Skip to Content
Author's profile photo Michael Howles

Design Studio 1.6 SDK – Leaflet Maps WMS Layer Support!

I have added a new interesting feature to the SCN Open Source Community Leaflet Maps component I would like to share today.

An original overview can be found here:

Design Studio 1.6 SDK – Leaflet Maps for more mapping goodness

What is WMS?  Wikipedia has a good definition (

A Web Map Service (WMS) is a standard protocol for serving (over the Internet) georeferenced map images which a map server generates using data from a GIS database. The Open Geospatial Consortium developed the specification and first published it in 1999.

Basically it makes for interesting overlays not possible with Map Tiles or feature overlays alone.  This could be because geographic data is too huge to maintain pre-rendered tiles for, or the real-time nature of some data (weather, for example) would not make sense to store/bake in as a tile or feature.

I have what I think makes for an interesting illustration of how you could augment your maps as a result.  I’ll use a few interesting examples:

I’ll start with an example map from my prior Leaflet blog post with Markers showing universities in a few regions of the US:


Next, in Additional Properties Sheet, I go to Layers -> Overlays -> and Add a new overlay and click the ‘More…’ button.

What I have added is a new Layer Type option called ‘WMS’:


What we now must do is provide a WMS server URL which then will request the WMS capabilities available.  To find a WMS server, use google or a directory service like Spatineo (Spatineo Directory).  I have included a few examples that you can find under Presets:


For this example however, I will pick Nexrad under the ‘WMS Presets’ entry.  As you change your WMS base URL, it will query the URL and assuming you have provided a valid URL, it will return a list of Layers available for your use:


In this example, I will pick the first entry ‘nexrad_base_reflect’.  Below are the results:


Pretty cool!

What else can we do?  I found another WMS that shows Geological survey information, perhaps good if your data makes sense to be paired with that.  I included a few sample URLs:


I will pick Tennessee Geology, and then checkmark the layer with the title ‘Tennessee_Geology’:


We can even add both Nexrad, Tennessee Geological layers at same time:


And of course you can set which layers are visible by the default, and the user may toggle them at runtime:


I am no WMS expert, but the possibilities become quite interesting I think!

A few things to note:

  • The WMS services must support the map CRS (Coordinate Reference System) that is being used.  Leaflet by default is set to EPSG3857 (Sperical Mercator).  This is what most map tile providers also use.  I did run across some WMS services that only supported EPSG4326 projection (Equirectangular.)  You can read details here (Documentation – Leaflet – a JavaScript library for interactive maps) As a result, I went ahead and made this a property that you can change on your Leaflet Map to support these type of WMS layers:


  • Note that if you use a different projection besides the default, your tile provider will most likely now look incorrect:


  • What I’ve noticed is if the WMS overlays are only available at EPSG4326 projection, you’d be better off deleting your base maps and using perhaps just a simple GeoJSON shape overlay (or a WMS that renders it for you in the correct projection) to give your map some context:


    So why so much fuss over EPS4326?  I found many of the NASA overlays only support that projection.  I’ll throw one on there:

    Here’s NASA with a Blue Marble overlay:


  • Another thing to note with this Leaflet plugin is that during design-time, I’ve got a pretty bad memory leak going on in the Additional Property Sheet that I cannot seems to track down.  Probably related to the sheer number of dialog components available for this component.  I’d highly suggest saving your work often as you change properties.  A way to work around this leak is to make changes slowly, save often, and close your bi app and re-open it.  (Or simply close and re-open the Additional Property Sheet panel).  This is just a reality for open source free software so I hope you don’t mind 🙂 – This does not affect your end-users and there is no memory leak there.

This version is nearly done and should be available for download in the usual spot (details here: SCN Design Studio 1.6 SDK Components (ver 3.0)) this week (week of June 1 2016)

Questions/Comments/Feedback always welcomed!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Vincent Dechandon
      Vincent Dechandon

      Mike, when will you stop!? You always amaze me coming with these ideas. You should come to work at Galigeo, we could do great things together.



      Author's profile photo Sergio Guerrero
      Sergio Guerrero


      Thank you for sharing this blog. it is absolutely great as always!

      Author's profile photo Luis Felipe Vidal Arciniegas
      Luis Felipe Vidal Arciniegas

      Hi Mike, excellent work. Now I want to work with WMS ESRI ARCGIS but the following message appears:


      The format of the URL ESRI layer I'm using is: and has 3 layers created in the WMS.

      Could it be that the error occurs because you have to be included the .js in the SDK for the layers ESRI:ghleafleft.PNG

      Finally my question would be if ESRI WMS layers are supported ?

      Thank you and I repeat excellent job.

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      Hey Luis,

      Thanks for the nice feedback 🙂

      While I have no experience with ESRI WMS, For WMS, the type of URL it expects in order return the WMS capabilities is something like this for ESRI (I assume) per reading this blog How to Use ArcGIS Data, Features and Basemaps in Tableau | ArcGIS Blog: (Tableau is used in their post but me extension is expecting a similar URL)


      Can you provide a sample of the response you get in your URL so I can see what it looks like?

      Not sure if that helps or not?  I'd be interested to hear if this is the magic bullet.

      I've not played with any ESRI Leaflet plugins you mentioned as I've tried to not use any plugins/Leaflet forks that I see from Mapbox or ESRI, however if we determine it's needed, I can see about adding additional JS files.