Skip to Content

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 (https://en.wikipedia.org/wiki/Web_Map_Service):

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:

/wp-content/uploads/2016/06/wms1_965947.png

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’:

/wp-content/uploads/2016/06/wms2_966014.png

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:

/wp-content/uploads/2016/06/wms3_966015.png

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:

/wp-content/uploads/2016/06/wms4_966016.png

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

/wp-content/uploads/2016/06/wms5_966017.png

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:

/wp-content/uploads/2016/06/wms6_966018.png

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

/wp-content/uploads/2016/06/wms7_966019.png

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

/wp-content/uploads/2016/06/wms8_966029.png

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

/wp-content/uploads/2016/06/wms9_966030.png

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:

    /wp-content/uploads/2016/06/wms10_966031.png

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

    /wp-content/uploads/2016/06/wms11_966032.png

  • 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:

    /wp-content/uploads/2016/06/wms12_966033.png

    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:

    /wp-content/uploads/2016/06/wms13_966034.png

  • 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!

To report this post you need to login first.

4 Comments

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

  1. 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.

    Br,

    Vincent  

    (0) 
  2. Luis Felipe Vidal Arciniegas

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

    nolayers.PNG

    The format of the URL ESRI layer I’m using is: http://servergis.domain.com/arcgis/rest/services/gc/MapServer/0 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.

    (0) 
    1. Mike Howles 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)


      http://yourESRIhostname/services/MapServer/WMSServer?request=GetCapabilities&service=WMS


      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.



      (0) 

Leave a Reply