Skip to Content
Author's profile photo Former Member

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

California-county-map.gifmap blog1.PNG

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


map blog2.PNG       map blog3.PNG

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

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Annie Thornton
      Annie Thornton

      Hi Mohamed,

      Great chart!

      Would it be possible for you to share your finished extension and dataset, or maybe a Lums file? Or have you published this extension on GitHub yet?

      It would be great to explore and see how the extension works 🙂

      Thanks,

      Annie

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Annie,

      Thanks for the appreciation.but unfortunately I can't share the source code as I developed it for some project(not open source).I just sharing the leanings from the project

      Thanks

      Md.Arrif

      Author's profile photo Annie Thornton
      Annie Thornton

      Alright! No worries. Thanks for sharing the blog post though.

      Cheers!

      - Annie