You may have wanted to add maps to your website for data analysis, at some point. I definitely did, when I developed a Coronavirus tracker last year. Trying to add maps, especially interactive ones, was difficult! It required loading the geometry of the map manually, and if you wanted to make it possible to hover over a state (for example, in the US), it was a nightmare.
Use a new type of map: svg maps.
If they're in the right use case, SVG maps can be much more effective for representing data specific to several countries at once, like Coronavirus case counts, and much easier to integrate with.
Some Benefits
You can make these maps interactive! Because SVGs are integrated with the DOM, you can add event listeners to individual states with one line of code: document.getElementById('united-states'), or document.getElementById('south-korea'). This also allows you to style the regions of the map, and shade them based on the data you want to visualize.
These maps are used live on https://ncov2019.live/map.
They don't require any API keys or custom scripting.
They are minimalistic.
These maps are available from several places, and I found mine on simplemaps.com.
You can combine this with the https://www.npmjs.com/package/svg-pan-zoom library to let users scroll through the map.
Top comments (1)
Interesting!!! Thanks