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 }); Resources:
- http://diva-gis.org
- http://leafletjs.com (mapbox 1.0 use leafletjs as base api)
- http://geojson.io
