[ Ссылка ]

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?
[ Ссылка ]

Specific map data from Natural Earth I used:
[ Ссылка ]

SHP file to SVG converter:
[ Ссылка ]

The final SVG map of the world:
[ Ссылка ]

What is an SVG file?
[ Ссылка ]

SVG Path Simplification tools (They do work, just not for my project):
[ Ссылка ]

Mobile Zoom:
[ Ссылка ]
[ Ссылка ]
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?
[ Ссылка ]

Excellent PWA example:
[ Ссылка ]

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

свернуть