Creating Clickable Browser-Based Maps

a.k.a. getting maps to do stuff :)

Examples

  1. https://www.270towin.com/ US political map with outline highlights on hover

  2. https://interactivegeomaps.com/europe-map-with-html-tooltips/: Map with tooltips on hover

  3. https://population.io/#/1987/02/14/male/United%20States/expectancy Small sidbars that change on click

  4. https://tympanus.net/Development/Interactive3DMallMap/ Yes, it's a mall, but the bottom and side panes are a nice layout choice when lots of text accompanies the map

  5. https://leafletjs.com/examples/choropleth/ A chrolopleth map seems like the way to go for political boundaries that highlight on hover

  6. https://react.rocks/tag/Map Kanban of examples

Tools

  1. https://onextrapixel.com/8-javascript-libraries-for-interactive-map-visualizations/ Map libraries with example images

  2. https://www.10bestdesign.com/jqvmap/ jQuery package for embedding clickable maps in HTML

  3. https://www.react-simple-maps.io/ Seemingly cool d3-based React maps library, but the examples won't load?

  4. https://leafletjs.com/ Leaflet is sweet!

  5. https://www.npmjs.com/package/react-svg-map Simple component for displaying S VG maps

Tutorials & Other Code Resources

  1. https://medium.com/@heatherbooker/how-to-make-an-interactive-map-in-react-f4e6e074b500 Blog re: making interactive maps with React, CSS, SVG

  2. https://medium.com/@zimrick/how-to-create-pure-react-svg-maps-with-topojson-and-d3-geo-e4a6b6848a98 Topojson and d3-geo interactive map tutorial

  3. https://www.storybench.org/how-to-build-an-interactive-choropleth-map-with-barely-any-code/ Low code option for cloropleth maps!

  4. https://stackoverflow.com/questions/34471758/create-an-interactive-svg-component-using-react Useful thread on hover SVG hover events in React

  5. https://www.knoyd.com/blog/2017/6/23/create-map-in-d3-part1 Tutorial series that's also a nice example of interactive maps made with d3