Skip to Content

Audience:

This is for developers who want to get their hands a little dirty for the reward of some mapping flexibility and independence.

Context:

This is primarly for my Open Source Choropleth mapping component (Link here: Design Studio SDK (1.3/1.4) – Open Source Maps (Part 2) Choropleth Maps).  Similar to my Part 1 blog on Maps, they have a lot of information.  For my next step, I wanted to leave the flexibility and knowledge of how to develop your own map geometries in your hands.  I still think Maps are hard, but no longer in all capital letters.  🙂   My Chroropleth maps will provide some general-purpose maps, such as World-level Country features, and some example Country-level Regional features for US and Germany.  Since I am a one-man shop doing this for fun and free, I’m not in the business of converting all maps and all levels of geographic granularity.  But let’s see what’s involved with making our own!


Scenario:


I have a data set for China at a province/regional level which is not provided out of the box in the Open Source Choropleth Map Component.  I want to create the necessary file that can be used by this component though.

Workflow:

We will need to download the .SHP and .DBF files for China.  A great free resource can be found here: Download data by country | DIVA-GIS

/wp-content/uploads/2015/02/topojson_640521.png

And the contents of the .ZIP:

/wp-content/uploads/2015/02/topojson2_640522.png

I found a great site that will let you view the .shp files quickly.  mapshaper

/wp-content/uploads/2015/02/topojson3_640535.png

The next screen you will see the geometry in the .shp file to be sure this is what you want.

/wp-content/uploads/2015/02/topojson4_640536.png

This looks like what I am after, however if I had a specific need for even more regional granularity, it is available, here’s an example, just for reference:

/wp-content/uploads/2015/02/topojson5_640537.png

So now that we’ve identified our .shp file (CHN_adm1.shp), there is a corresponding .dbf (CHN_adm1.dbf) file by the same title.

Next we need to convert this data into TopoJSON (or GeoJSON) format for use in the map component.  There’s more than one to do this.  We cannot use the MapShaper website because it only converts the shapes (.shp) – We lose the attributes (like name of each feature) which are contained in the .DBF file.  There is a QGIS application (Download QGIS) that can export this to GeoJSON however it’s pretty daunting to use.  It’s a valid approach but it’s a big download and I just want something to do in the command line.

So what I did was used the node package by the same MapShaper guys.  Prerequisite is that you’ve installed Node on your workstation (it’s not hard.)

1) Install MapShaper node package (Instructions here: https://github.com/mbloch/mapshaper)

2) Next, I referred to the command-line instructions here: Command Reference · mbloch/mapshaper Wiki · GitHub

3) I came up with this command that has the magic amount of parameters to produce a good (and compressed) TopoJSON format file.  (Modify your paths as needed):

mapshaper -i shp\CHN_adm1.shp encoding=utf8 -simplify 5% -o China-regions.json format=topojson

This also takes a 14MB shp+dbf file and compresses the geometry down by 30% to the topojson file called China-regions.json weighing in at 385KB!  You can play with the -simplify parameter to even make it smaller at the tradeoff of less detail as you go.  Hint: You can use the mapshaper website to play with the simplify slider (shown in prior screenshots) in realtime to find an acceptable simplification ratio to save you some time!


Since this is a custom map, now it is up to you where to host it.  If you are in a corporate environment perhaps on a local intranet site, or perhaps you can post it externally or maybe we can all find a nice repository of them to host on and collaborate!


So let’s prove this works in the upcoming Open Source Choropleth Maps component!

/wp-content/uploads/2015/02/topojson7_640541.png

Looks like China to me!  I made a quick datasource with a handful of the provinces you see shaded above and the end result is our very own home made Choropleth Map in Design Studio.

Again, there will be a more in-depth blog to come related to the component itself, but I hope this blog gets some of us geeks excited at the prospect of map independence.  Another example shot below with some of the canned maps that will come out of box however:

/wp-content/uploads/2015/02/choropleth_640542.png

Link to the Design Studio Component: Design Studio SDK (1.3/1.4) – Open Source Maps (Part 2) Choropleth Maps

Summary of Resources Used:

To report this post you need to login first.

13 Comments

You must be Logged on to comment or reply to a post.

  1. Jeroen van der A

    Good finds. Currently I am looking at the geospatial functions in HANA. Perhaps the next step is to get that data in HANA en use Odata (I think analytical views don’t work with shapes yet) to have a nice centrally stored dataset.

    (0) 
  2. Jeroen van der A

    Hi Mike,

    I was working with your map and I was wondering if there is a sort of manual? It also felt like you continued quite a bit since this post 🙂

    (0) 
    1. Mike Howles Post author

      Jeroen,

      I’m a bit scattered when it comes to documentation and manuals 😉   I just Open-Source fun stuff and move on to the next shiny thing.  I’d be glad to answer any questions though!  Basically if you Google how to create GeoJSON and TopoJSON maps, you can find more details.  This post was how my workflow into creating some maps based on public domain data went.

      My continuation into how this worked in a component is here:

      http://scn.sap.com/community/businessobjects-design-studio/blog/2015/02/13/design-studio-sdk-1314–open-source-maps-part-2-choropleth-maps

      (0) 
  3. Bruno Maury

    Hi Mike,

    I followed the steps to get a map of Canada by district in TopoJSON.

    Now I want to try it with your choropleth map extension.

    Is there a simple way to add a map to the list of available maps?

    Thanks,

    (0) 
  4. R. Weygold

    Hi Mike,

    I am currently doing a POC with DS standard GeoMap component in relation to GeoJson files delivered by our partner company that creates all maps for our company.

    We noticed that GeoJson files in DS are expected to have the coordinates plotted “clockwise”. If the coordinates are plotted “anti-clockwise” this results in an “inverse / open polygon” in DS.

    This seems strange since the files we created with http://www.geosjson.io are shown correctly in http://www.geojsonlint.com. When our maps company convert their files to GeoJson the files are correctly shown in http://www.geojsonlint.com but not al all in DS ! (mapping of property to BI data is shown correctly though).

    I read this issue with clockwise vs anti-clockwise in another blog but can’t remember where.
    Do you have any suggestion on how to tackle this issue?

    Result for coordinates “anti-clockwise”:

    Custom_GeoJSON_GeoJson_Linksom.JPG

    much appreciated,

    Roland Weygold

    (0) 
      1. Mike Howles Post author

        Mustafa beat me to it 🙂 Yes that particular blog entry had a comment that introduced me to the ‘left-hand/right-hand rule’.  It seems that there is no standard an each implementation can choose which to adopt, thus the ambiguity.

        For what it’s worth, I’ve had pretty good success in QGIS, but I think I’ve always traced my polygons clockwise around the ‘meat’ of the intended polygon.  I once had one ‘inside-out’ as shown in the screenshot, but I don’t know how to ‘reverse’ it without just re-tracing it.  If anyone knows of a way in QGIS or otherwise to do that, it probably would be helpful for more complex polys.

        (0) 

Leave a Reply