DevLog

[LanesGood]

DEVLOG

2/2/23

OK, finally just jumping in and trying to figure this out. I’ll start with a CodePen since that’s even easier than starting something and running a local server IMO.

https://codepen.io/LaneGoodman/pen/dyjwdWB?editors=0111

I’m thinking I can just add a <file type=”input”> and then get going. This does let me access a file dialogue. What happens to the file after that? Here’s where I’m now reading this: HTML Input type=”file” element.

OK, so it sounds like the file can be loaded into the browser’s local memory, and not sent to a server, so I don’t have to worry about setting up any sort of backend or database at this point.

Let’s look at the Exif JS library, which I had found previously and planned on using.

… lots of trying to figure out how to read the exif data from the uploaded file…

… reading the File API spec…

I’m calling the exif library, but when I try to console log the exif data, I only see “true.” Damn, what am I doing wrong?

Looking at stack overflow, though I’m trying to avoid this because I know the answer to my whole project is on there somewhere… OH! I stupidly was using an arrow function, and forgot that there’s no “this” for the function. EXIF relies on “this” so that won’t work.

Using a normal function expression… works! I can read the EXIF data now of an uploaded image from the file browser. (Later, will need to explore looping through an array of uploaded images)

OK, now I can see all the exif tags. Which one do I need? Looks like they are all listed here as part of the GPSTags list: https://github.com/exif-js/exif-js/blob/master/exif.js#L134

I think I just need lat/long - so that would be GPSLatitude, and GPS Longitude. (Could be interesting to check out GPSImgDirection, GPSDestBearing later)

OK, these are served as arrays of three numbers according to this issue. (There’s some code in here but I want to ignore it so I don’t see the answer right away.) What does that mean? A quick search yields that this is a separate number for degrees, minutes, and seconds. OK, gonna go learn a bit more about lat/long

Reading

• File API
  • Get and manipulate information about a user-uploaded file
• HTML Input type=”file” element

References

• https://photo.stackexchange.com/questions/50816/how-to-determine-camera-location-from-an-existing-photograph
• Resection
• Triangulation: https://en.wikipedia.org/wiki/Triangulation_(computer_vision)
• https://developer.mozilla.org/en-US/docs/Web/API/File_API
• https://pixelpeeper.com/

[LanesGood]

2/3/23

Used https://www.inchcalculator.com/convert-degrees-minutes-seconds-to-decimal/ to find the formula to convert DMS (degrees, minutes, seconds) coordinates into DD (Decimal Degrees). Now have coordinates from the image.

Reading about the different routing engines I can use. Ideally, I will hit an api endpoint. I don’t want to get into any sort of backend or hosting.

[LanesGood]

3/15/23

Didn’t do anything on the project since last devlog. Now working on this locally.

Was able to hook up the Graphhopper API after getting an API key, and finally submitted two points. First point is a “default location” and second point is extracted from photo. Running into issues of chaining; will need to refactor.

Figuring out promises and async - need to get exif data value from function before executing the routing engine api call

… after some time... hell yeah - it works!

[LanesGood]

3/16/23

Accomplishments

• was easily able to upload multiple files by adding the multiple attribute to the html input selector
• looped through the uploaded fileList, which is not an array but is array-like
• got coordinates from each file, and then stored in an array of coordinates
• sent array of coords to routing api, got route back and mapped it
• set up and hosted on github pages
• created some issues for personal tracking, and this devlog discussion 🤘

Mistakes + Learnings

• committed my api key 😨. this is a public, free and open api, so I'm not so worried, but will want to figure out creating a repo-based secret and then potentially using github actions to deploy
• spent a lot of time trying to get leaflet's geojson L.geoJSON() method to work on the coordinates. Played around a lot with geojson linter https://geojsonlint.com as leaflet kept telling me I had invalid geoJSON. Finally read and understood that there was no added value to using geoJSON() over polyline() as geoJSON converts to polyline under the hood. So, as I am receiving an array of coordinates from the routing engine, it's already prepped to easily insert as a polyline - once the lat/long position is reversed (followed code here: https://codepen.io/lknarf/pen/RpxpBQ)
• Yesterday I spent a lot of time trying to figure out code execution order; async vs synchronous, figuring out when values were returned, etc. I eventually converted the getEXIFData function to a promise, and then am awaiting this. I still need to learn:
  • if promise or async/await should be used exclusively, or combined (as I'm doing now), or potentially not at all
  • where things need to be returned async vs sync
• Re-reading the MDN file input docs and see some good examples of looping through an array of uploaded imagery, getting data from these and setting and rendering images on the html page. Will want to read more on this and start understanding where this data lives, how it might be stored, and what it looks like

Next steps

will likely make issues of many of the below

• fix up the async/promise part of the code
• add a marker to the map at each image point
• zoom map to image when uploaded
• fit map bounds to route when route available
• add a separate "submit" button to execute routing request, ensuring that all images are uploaded and processed
• gett the index of each image
• addthe images to the html, along with name and coordinates and potentially other info
• associate each image with the marker in some way - number, color, or image preview on map
• render other data from the routing engine: travel mode, time, and steps
• style changes + cleanup
• design
• use different map style (terrain?)

[LanesGood]

3/19

Achievements

• Added marker to image point
• Exploring with different map providers - could add feature to let users switch layers. Could also allow users to switch layers depending on map style.
• Fitting map to bounds of all uploaded images from which lat/lng are successfully extracted.
• separated submit button
• Render image info in preview area
• render image thumbnail in preview

Learnings + ideas

• The app doesn't need to show anything on the information from the exif data other than lat/lng, datetime, and potentially image focal length and bearing
  • We could explore adding a directional bearing and estimated distance to subject depending on focal length
• On fitting map bounds:
  • Had thought first to do this on the bounds of the route, but now realize that any straying outside of the bbox of the lat/lng center of images can be handled by padding, and that it's unnecessary to try to catch errors via only zooming to route bounds because the route can only be calculated for images with lat/lng
  • Learned about what leaflet fitbounds accepts - was not accepting a bbox array, and the points array from routing response is [long, lat] - reverse order. Relying only on image coordinates array was much more straightforward
• Need to bone up on best practices and use cases for insertAdjacentHTML vs insertAdjacentElement vs appendChild... I understand the general concepts but imagine there are various tradeoffs.

[LanesGood]

Current state

[LanesGood]

3/20 devlog

More progress!

Added:

• Updated preview card style
• Changed basemap style to light
• Popup added to marker, containing image. All markers' popups are opened on addition to the map
• Initial transport mode radio buttons (unstyled)
• Clear button to remove markers, remove route, and remove form data

Learnings

• Thinking more about how to correctly turn the FileList into an Array and then get index.
  • Index will primarily be used for associating image with popup/marker and preview card later on, and potentially for order of location in route (need to explore if possible to allow user to modify point order, set starting point, etc)
• Used and read about the form reset() method on the clear button to remove submitted elements
• Used and read about the FormData object to get submitted values from form.

Looking into:

• https://gis.stackexchange.com/questions/420344/leaflet-flickr-photos-and-marker-cluster-small-image-broken-relation
• https://blog.mastermaps.com/2014/08/showing-geotagged-photos-on-leaflet-map.html

May potentially use

[LanesGood]

3/21 devlog

Added

• Flyto marker if preview card clicked
• Open popup if preview card clicked.
• Get user's location and include in route
• Add marker at user location
• Clear user location marker on clear button press

Learnings

• Leaflet: how to find a layer within a layer group, without knowing the internal layer id?
  • Looked at https://stackoverflow.com/a/34323521, then added a custom object key photoIndex to the photo marker and the preview item during the initial array loop to sync these
• Event handlers and garbage collection - do you really need to remove event handlers when a dom node is removed?
  • lots written about this
• App architecture for vanilla JS apps. Should I be using classes? OOP? Modules? Links:
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_Classes
  • https://javascript.plainenglish.io/classes-vs-literal-objects-a-minimalistic-vanillajs-approach-to-oop-and-serialization-in-f08fdbf6157
  • https://frontendmasters.com/blog/vanilla-javascript-todomvc/
  • https://www.taniarascia.com/javascript-mvc-todo-app/
• used .replaceChildren() rather than looping through a parent and removing its children, following the frontend masters post linked above
• Stuck: can't remove current location coords from main image coords array

[LanesGood]

3/22 - 3/23

Added

• Route preview card with route time and distance
• Route line now includes popover with route time

Learning

• Got some schooling from a colleague on how to work with logical operators, and ensuring that non-mutated arrays are returned (thanks Chuck!)

Considering

• how to display route once it is returned?
  • could have it as a separate panel, or a tab, or load a new page, or display somewhere else on the screen
  • Other navigation apps: after you set your directions query, the main panel is replaced with your route
  • a back button gets you back to your query
• We could have a "View Route" card which is styled differently from the image preview cards, and then clicking this would open the full route
  • Preview time and distance, with icon for mode, and then full route displays directions, timeline, points, etc

To Ticket

• Submit button should be disabled if nothing in the form has changed
• I should not be able to upload the same image twice
• Once my route is returned, submitting again should override the previously returned route, both in the leaflet polyline and on the route display