arrow_backward Back to blog

4 Steps to Creating An Overlay

Alt text
Over the last few months, Intridea has worked on several projects revolving around charts, maps, and interactive stats. Learning how to effectively display these aspects, both at a functional and beautiful level, is a challenging task. However, like the old saying goes, necessity is the mother of invention, and these projects taught us some unique ways to streamlining the overlay process…

The Challenge: Effectively display data stats and implement maps with a highlight overlay for maps to draw attention to one and/or a few specific countries.

The Solution: After some research, we chose Mapbox as the base map, enabling easier customization in the shaded area/border/ocean colors, and for the overlay, utilizing d3 to add a highlight layer. Here’s the 4 step process:

Step 1: Initiate Mapbox map on specify div:

Step 2: Add a base layer to the map with custom styles:

In order to complete Step 2, we created detailed geojsons for each country, either by generating from a shapefile or creating manually from http://geojson.io.

Step 3: Use d3 to load country geojson and set bounds to country area:

Step 4: Add a marker on country capital and create an anchor to correctly position display:

 

Feel free to utilize this process!
Resources:

 

 

arrow_backBack

New Project Request