Скачать с ютуб Creating an App with the world's most detailed SVG map в хорошем качестве

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

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/At... Specific map data from Natural Earth I used: https://www.naturalearthdata.com/down... SHP file to SVG converter: https://mapshaper.org/ The final SVG map of the world: https://drive.google.com/file/d/1kdSm... What is an SVG file? https://www.w3schools.com/graphics/sv... SVG Path Simplification tools (They do work, just not for my project): https://luncheon.github.io/simplify-s... Mobile Zoom: https://developer.mozilla.org/en-US/d... https://github.com/mdn/dom-examples/b... 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/Progres... Excellent PWA example: https://github.com/mdn/pwa-examples/t... 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