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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
10 | |
7 | |
5 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 |