4 Steps to Creating Overlays

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:

var map = L.mapbox.map("country_map", ‘your_mapbox_map_id');  

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

    var layer = L.geoJson(null, { style: { fillColor: '#c6bbaf', fillOpacity: 0.5, weight: 0, color: '#ffffff', opacity: 1 }})     map.addLayer(layer)  

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:

    var json_file = "/assets/" + country_isocode + ".json"     d3.json(json_file, function(error, data){            layer.addData(data.features);            map.fitBounds(layer.getBounds());     } 

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

           var latLng = L.latLng(lat, lng);       var pinAnchor = new L.Point(8, 8);       var pinAnchor = new L.Point(8, 8);       var icon = L.icon({         iconUrl: "/assets/icon-star.png",         iconAnchor: pinAnchor       });