Add interactive maps to your website without an API
Michael Fatemi
Posted on July 7, 2021
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.
Posted on July 7, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.