Hellow guys, Welcome to my website, and you are watching Creating an App with the world's most detailed SVG map. and this vIdeo is uploaded by Inkbox at 2022-08-31T22:00:09-07:00. We are pramote this video only for entertainment and educational perpose only. So, I hop you like our website.
| Name | Creating an App with the world's most detailed SVG map |
| Video Uploader | Video From Inkbox |
| Upload Date | This Video Uploaded At 01-09-2022 05:00:09 |
| Video Discription | 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 |
| Category | Science & Technology |
| Tags | Science & Technology Download MP4 | Science & Technology Download MP3 | Science & Technology Download MP4 360p | Science & Technology Download MP4 480p | Science & Technology Download MP4 720p | Science & Technology Download MP4 1080p |
