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

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

[@mattgio1172]

Love this! You're doing some really awesome videos lately - and i love the frequent upload schedule!

[@staywithmesenpai]

Underrated Content

[@Pi7on]

Great stuff man!

[@juanestebanmelgarejosalina8029]

What a disrespect from humanity to do not watch enough this channel!

[@krakentoast]

Very nice

[@intel386DX]

The beginning ia just EPIC! Greetings form Bulgaria! 😛😂 Is this map DOS in text mode or Atari 2600 hehe ?

[@LeReubzRic]

Fun fact: My dad is from the parish of Clarendon, Jamaica

[@entx8491]

Loving your work, I have to watch at least 3 more videos before going out for NY 2023, lol

[@televisedfeedback6660]

Hmm, this seems super useful. I'm wanting to do something like this, but much more limited, just to the US. I want something that can draw state and county boundaries quickly, but can also do intensive math for demographic shifts. I'm thinking C++ with qt gui, but svg for the map. I was originally using Flash, but it's just too much data and calculations for Flash.

[@Cecil_Augus]

I would love if it explained in detaild how you achieved this.

[@AlexAlex-jl5dh]

I think your work is amazing. How I can talk to you.

[@thescratchguy428]

4:16 Just laughed so lard rn

[@liviucristianionescu]

+1 for random Romania

[@StijnHommes]

Too bad you decided to make a website and then tried to make it look like an instead of making a REAL app. That one decision means it will NEVER end up on any of my devices even though something similar to this would be useful for a traveller like me. One wrong decision like making PWA spam can lose you a lot of users or potential business.

[@sIMP37]

dude, there are lots of pwa on the appstore, you are probably using lots without knowing