Part 2 can be found here:  Creating Custom GeoJSON maps in Design Studio 1.5 – Part 2 of 2

Background and Overview

Now that Design Studio 1.5 is GA, we now have a new baseline component that’s been missing until now.


Maps are a love/hate relationship with me, as it straddles two worlds, in my opinion: BI and GIS.  Maybe we can place them on two ends of a spectrum and come up with all sorts of cases that are somewhere in the middle, but nonetheless, they can be quite polar and simultaneously related.  Someone could make a pretty neat Venn diagram or spectrum illustration, I’m sure…

Related Posts

After playing with 1.5, the main features that struck me that I’ve not been able to accomplish with the Open Source variants were these scenarios:

  • Slippy Maps (Tile-based, think MapQuest/Google Maps/etc) with polygon overlays.
    While I’d gotten a tile-based approach and vector-based approach working in separate components, I’d never tried tackling both pieces at once.  I’d love to have one day tackled this myself on a hobbyist basis, but SAP has done a terrific job for us with theirs!
  • Multiple Layers (up to 10) of Information
    So in addition to support for any TileJSON-based slippy tile provider (Mapbox, OSM, MapQuest, Stamen, etc), we can now overlay this with 10 layers of either marker/bubble type, or area/choropleth type.  I do not see the 10 layers as being a limitation and honestly if you are using all 10 layers, your map probably is pretty messy looking already.
  • Multiple Datasources
    And finally, the holy grail that makes these layers work, is the per-layer data source assignment.  This makes sense because each layer may be at a different geographic level of granularity.  Perhaps your ‘base’ layer is at a country level, and your subsequent levels are at a region level, or location level.  I say it’s the ‘holy grail’ because with the SDK prior to 1.5, this has been impossible to support.  (As a result of this new 1.5 SDK functionality, we could accomplish the same, if there were still gaps to address – More on that later.)

Layer Types

So what are some of the baseline options we’ve seen today that fit with the BI side of the mapping spectrum?  Two main thematic ways we see across SAP’s maps and partner/open source extensions are:

Type Illustration

1) Marker/Bubble/Cluster/Heat Layers

I lump all these together because they all rely on one common piece of geographic information, which is Latitude and Longitude.  Without it, you cannot produce any of these variants.  They certainly have their utility and function, but without latitude and longitude (or a Geocoder service to translate some other geographic field), they cannot be used.  Prior to 1.5 Maps, we had an Open Source Location-based version of this type of map.  Also an older tile-based approach I tried using some geocoding I tried here: Design Studio SDK (1.3/1.4) – Opensource SCN Maps (Part 1)


2) Area/Choropleth Layers

Instead of being latitude/longitude based, area layers (aka Choropleth layers) use polygon/vector overlays to visualize a region or shape of data (commonly called features in GIS-lingo).  These features typically will represent administrative boundaries such as Country, or Region, or Sub-Region.  While they require more information to define in terms of the vertexes that define the polygons, they have the benefit of carrying attributes with them, which is how both SAP’s 1.5 maps associate themselves with your data, and was also how my Open Source Choropleth map accomplished the, coincidentally.


Composite/”Holy Grail” Example

  • Multiple Layers
  • Multiple datasources

I’m posting today talk about the second type of layers: Area/Choropleth Layers.

I’ve touched on these before 1.5, and the information in this post (Design Studio SDK: How to create home-made map files for Choropleth Maps) definitely applies to both Design Studio 1.5 maps as well as the Open Source versions mentioned in both the types described above.  The post mentioned talks about how you can find and use existing GeoJSON content out on the internet, and modify the feature attributes that tie those to a value in your data.  I won’t retread that ground today, so check out that post for the ‘basics’.

A Different Case

What about custom maps where they are not based solely on common administrative boundaries, and where lat/lng alone is not good enough to tell the story.  A few examples to explore would be:

  1. Organizational Regions
    Perhaps your company breaks out sales areas into geographic regions, but these regions are either a collection of administrative boundaries (say, multiple US states.)
  2. Arbitrary Regions
    Perhaps you are in real-estate and you break out your regions in more arbitrary/granular boundaries like municipal tracts of land that straddle administrative boundaries altogether.
  3. Commercial Zoning Developments or ‘Campus Analytics’ (There’s probably a better term that I just don’t know what it is here)
    Maybe as a strip mall developer or commercial zoning planner, or as a campus administrator, you’d very close to the ground, get geospatial, information.

These 3 examples most certainly will not exist for you today online as they are organization-specific and use-specific.  But there’s good news, if you take a trip over to the mysterious other end of the spectrum, GIS!

I set out to try an example last night for the 3rd use case, as I thought it would be fun to see what I came up with.  I wanted to use the delivered Design Studio 1.5 Maps, and for reasons you’ll see later, I had limited success, however cases 1 and 2 would see better results.  More on this later.

What I needed for Case 3

  1. A requirement and a location

    I am a city planner/developer for a small municipal city and would like to see the building locations that current companies own or are even leasing from a developer (think McDonald’s, Arby’s Apple Store, etc.)  This footprint of information is maybe only one city block in scale.  Not only do I want to see the buildings (I could do this alone in Google Maps), but I want to shade them with data in Design Studio based on measures like maybe ‘Rent’ or ‘Lease Duration’, etc.  I’m going to use an area where I am familiar with for this example:


  2. Software

    In my previous Open Source examples, and reinforced through some Googling, I decided to use a free, very powerful (and initially daunting) application called QGIS (Quantum GIS).  Download links, documentation, and tutorials can be found on their website: Welcome to the QGIS project!

    A note of caution: I am not a GIS expert, and not even a novice.  The steps I took here probably would be seen as amateurish to any true GIS practitioner, I am certain!  🙂   The sheer number of features and options and plugins in this tool just floored me.  It would probably be like a GIS guy stumbling through IDT for his first time.

    For those just reading along and not installing yet, here’s a screenshot of QGIS upon opening for the first time:


  3. Reference Geographic Information

    This is where I am just using tools at my disposal, which isn’t much.  I’m sure as a “true” city planner or residential developer, you’d have access to where your plots are with regards to lat/lng and/or your building dimensions.  Since we are just playing pretend, I wanted to use what I saw in the Google Maps illustration and get it into GeoJSON features that I could use in Design Studio.  (I’m not sure if for real-world use cases, Google condones “tracing” or not, but this is just an example and I’d leave it to you to source your own information.)


So we’ve got a location, some software, and some reference geographic information… Below are the steps I took (and oh yeah, between each step there was much Googling that I’m sparing you from!  🙂 ).

  1. Install OpenLayers Plugin into QGIS

    In QGIS, I went to ‘Plugins’ -> ‘Manage and Install Plugins’ -> and searched for ‘OpenLayers Plugin’


  2. After the plugin installed, I was able to go to ‘Web’ -> ‘OpenLayers plugin’ -> and select the type of map I wanted.  I selected Google Streets Map, but as you can see, you have other options:


  3. Now that I have our reference tracing layer set up, I need to create a Shapefile Layer to trace on to each building in this example.  To do this, I went to ‘Layer’ -> ‘Create Layer’ -> ‘New Shapefile Layer…’  I then was confronted with a Dialog box.  Some of the stuff I don’t understand but I did a few things.  I set the ‘Type’ to ‘Polygon’, and set up the ‘Attributes list’ with 2 fields that potentially would be in my Design Studio data set: ‘building’ and ‘company’. It came with an ‘Id’ field which I removed.


  4. After clicking OK, you will be prompted to save your new SHP file somewhere on your workstation.  Save it that wherever makes sense for you.  I saved mine with the filename ‘buildings’.  After saving, you will see a new layer appear in your Layers panel.  (For anyone who has worked in Photoshop, the layers felt similar here)
  5. I then wanted to start adding features to the layer.  I got stuck here for a bit looking in various context menus and it wasn’t until I toggled on editing mode that I was able to then add features.  You can toggle on editing mode by right-clicking your layer and selecting the option, or in the toolbar.  In the illustration below, the toggle button is outlined in green, and the editing options are shown in blue that become enabled.  We’ll be using the ‘Add Feature’ button:


  6. After clicking ‘Add Feature’, I selected the Apple Store as the first building to trace.  I clicked on each vertex of the building using my Google Streets map as a reference.  (Again, this reference map could be based on whatever reference makes sense, perhaps bodies of water or forestry would be better traced using satellite/terrain imagery, etc).  After completing each click, to close the polygon I completed with a right-click (A guess, coming from my Photoshop background):  Below is an example of each click, the blue circle indicating the final right-click:


  7. After right-clicking, thus completing the shape, you are given the chance to populate your feature’s attributes (building and company).  You can do this now, or later.  Below is an example of what you would see and what I populated it with.  I tried to make my values sounds like something that would come from your BW or UNX source, as that is what one of them would need to match up with.


  8. So like in a television cooking show, let’s fast-forward to a more completed version with several building traced 🙂


  9. If you need to change or update your Layer’s attribute data, it is always available to maintain by right-clicking on your layer, and clicking ‘Open Attribute Table’.  You can even add or remove fields if you need to later:


  10. Let’s take what we have in this simple example and export it to the GeoJSON format that Design Studio 1.5 Maps expects.  Right-click the layer, and select ‘Save As…’  Select the ‘Format’ of ‘GeoJSON’ and give it a name and click OK.


  11. We’re done!  A quick note, when you save the layer as GeoJSON, it’ll add it to your QGIS canvas, and it’s essentially a second copy floating there on your map.  For our purposes, it is just redundant information and you can delete it from you layers (your file will remain wherever you saved it, though).

Part 2 – Returning to Familiar Territory

After my brief stint fumbling around in QGIS, I wanted to see if my buildings use case would then work.  Part 2, will go into detail about taking this GeoJSON and showing it in the Design Studio Geo Map component, as well as what it looks like in the Open Source Choropleth Maps component, comparing and contrasting pros and cons of each.

Part 2 can be found here:  Creating Custom GeoJSON maps in Design Studio 1.5 – Part 2 of 2

To report this post you need to login first.


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

  1. josivan martins
    Hello, good day.My name is Josivan. I’m learning the Designer Studio and have many doubts.

    1-the first is how I define a certain point on the map, for example Brasilia, Brazil’s capital and bond the latitude and longitude. Using the OpenStreetMap.

    2Another, how do I set the latitude longitude using just the Designer Studio. I’m using this example. 06//designstudioinnovation-seriestopic6geomaps-parti-feature-review


Leave a Reply