Creating an App with the world's most detailed SVG map

Video Description

https://notin.tokyo/maptrack I created an app to track which First Level Administrative Divisions in the world that one has gone to, driven through, or flown to. The map data comes from Natural Earth (source links below) and was parsed into an SVG file broken up into groups of top level administrations and their divisions inside. The program is written as a Progressive Web App (PWA) made from scratch in HTML, CSS, and JavaScript. This video covers the process and challenges I faced as I collected data and built the app. The project currently is slow due to extensive use of the DOM and would be much faster if a canvas was used to render the map instead. All those who use the SVG map below should keep that in mind. Sources: What is a First Level Administration? https://commons.wikimedia.org/wiki/Atlas_of_first-level_administrative_divisions Specific map data from Natural Earth I used: https://www.naturalearthdata.com/downloads/10m-cultural-vectors/10m-admin-1-states-provinces/ SHP file to SVG converter: https://mapshaper.org/ The final SVG map of the world: https://drive.google.com/file/d/1kdSmctjGjkTDEE8VOy4-S90mwDzzfcpr/view?usp=sharing What is an SVG file? https://www.w3schools.com/graphics/svg_intro.asp SVG Path Simplification tools (They do work, just not for my project): https://luncheon.github.io/simplify-svg-path/index.html Mobile Zoom: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Pinch_zoom_gestures https://github.com/mdn/dom-examples/blob/master/pointerevents/Pinch_zoom_gestures.html Updated line of code: var curDiff = Math.sqrt(Math.pow(evCache[1].clientX - evCache[0].clientX, 2) + Math.pow(evCache[1].clientY - evCache[0].clientY, 2)); As of editing this video my push request has been accepted by Mozilla and the code should be changed on their website to reflect the proper changes. What is a PWA? https://en.wikipedia.org/wiki/Progressive_web_application Excellent PWA example: https://github.com/mdn/pwa-examples/tree/master/js13kpwa icons: Plane by papergarden from Noun Project Car by Andi from Noun Project Walk by Adrien Coquet from Noun Project Mouse by Midev from Noun Project