Choropleth chart with leaflet.js-Openstreet maps(boundry merge,topoJSON)

Hi All,

     This is my first blog in SCN,and first blog elsewhere for that matter.To cut the chase and  get to the point this blogs talks about my experience in creating a custom visualization extension for Lumira which uses leaflet.js to fetch the basemap tiles from openstreet maps and use D3 to overlay a choropleth layer on top of the base map.while I am at it I also had done a geographical boundary merge  to form business boundaries.the below is what I’m talking about

The left side is california county map which I got from internet and right side is my viz in webIDE.if you can notice the bottom counties like sandiego,orange Imperial etc are merged to form a single path

The below are the links I had referred to for building this

D3 + Leaflet

Merging States · GitHub

For someone who is not aware of leaflet.leaflet.js is a open source javscript library which provides a framework to fetch the base map tiles from different sites like openstreetmap,esri,mapbox etc and also provides custom overlay layer where we can render our custom path using D3

The first problem I faced when I try to adapt the D3 codes to web IDE is the dependant libraries like leaflet.js,leaflet-d3.js,leaflet.css etc.

By default Lumira doesn’t provides these libraries.It just provides d3 and require.js

Its best practice to include all the dependencies in the package itself rather than externally linking.and the below post by Annie

talks about how we can do that

Using External Resources when building SAP Lumira Viz Extensions in SAP Web IDE

The second problem is how do I merge the boundaries.there are 2 ways we can do that.easy way and the hard way.

the easy way is to get the topoJSON formatted shape files from Internet or convert geoJSON shapefiles to topoJSON in any online converter

and we can employ d3 topoJSON function API to merge the boundaries

topojson.merge(us, us.objects.states.geometries.filter(function(d) { return selected.has(d.id); })

The hardway is to use shapefile manipulation programes like ogr2ogr to generate topoJSON/geoJSON files with merged boundaries

ofcourse I took the easy way

leaflet.js is a cool library, we can get many flavours of basemaps from different providers with no/little modification to the code

Leaflet Provider Demo is a helpful link to choose between the base layers and we have many choices.

Hope you find my blog useful

Thanks

Md.Arrif