Geo-referenced image viewer
Mentors
- Martin Raifer
- Milos Brzakovic
Contributor
- Mukesh Jaiswal
Required skills
- Javascript
- d3js
Timeline
- May 20 - June 12: Community bonding period
- June 13 - September 12: Coding period
Google Summer of Code has been a good learning experience for me. I was introduced to the world of open source and the way people work together on such massive projects. Although I struggled to understand the codebase of such a useful app, in the end, seeing the feature work made it up for it. My mentors were experienced, kind, and most importantly available throughout the project phase, which I highly appreciate as a contributor.
The OSM codebase does lack proper documentation and can be hard to navigate for a beginner. But once you do, it’s easy to implement features.
This is how I understood and navigated the codebase, which helped me build the feature. Understanding the codebase
The project’s goal was very clear. We wanted to add the capability to view images from the local device or other sources per drag and drop to the editor. Then by clicking on an appropriate marker for the image position, one could view the image.
A likely use case can be
- An OpenStreetMap (OSM) user takes photos from his/her phone that are preferably geo-tagged
- The user wants to see where those photos were taken on the map by dragging and dropping (or importing) in iD
- And use those photos as reference to update any details on the map
Specific goals
- add layer 'local photos', which works like 'local gpx'
- add drag-drop handler
- vendor in the exif parsing library
- make sure the existing drag-drop handler that handles gpx files is ok
- add rendering code and CSS for the images’ thumbnails, maybe using mapillary markers as inspiration
I was able to achieve all of the above goals. The feature works as expected. However, the code can be made robust and additional features can be added.
Step 1: Open iD and go to ‘Local Photos’
Step 2: Click on ‘…’ (Edit local photos layer) to open the upload photos modal
Step 3: After uploading photos, they will be loaded as follows
Step 4: Click on one of the photos to view the image
Although the feature works as expected, to make it more robust, the following things are yet to be implemented. I plan to work on them before the PR is merged.
- Add translation to text
- Handle errors returned by promises while reading and parsing images. Errors can be from
- failure to open and read the image file
- failure to parse the image file
- A checkbox to hide and show layer
- ‘Zoom to data’ button: On click should bring all loaded images markers in the map view