9/28/2015 - 2:32 PM

Add a WMS layer to

Add a WMS layer to

Add a WMS layer from an ArcGIS REST Service to

Note: This is a pretty roundabout way to do this. After some discussion on Twitter, it seems you can just add these sorts of layers directly in

httP://.../MapServer/tile/{z}/{y}/{x} (Add the bold part to the service URI

Introduction allows you to use its console API to access Leaflet/Mapbox.js methods. This means you can add layers from external sources. This works great with your tile map service from the likes of Stamen, CartoDB, or Mapbox, but adding layers from a WMS is a little different. Apparently you can work with WMS layers using Leaflet with L.tileLayer.wms(), but I've not ever successfully done this with straigh-up Leaflet. I have been able to access WMS layers using esri-leaflet. In this little note, I want to address two things:

  1. How to add esri-leaflet so it is accessible to the console API
  2. How to combine esri-leaflet and to include a WMS from an ArcGIS REST Service in a project.

Adding esri-leaflet loads natively with access to mapbox.js and, as a result, Leaflet. We need to be add esri-leaflet so it is also available for us to use.

  1. Navigate to
  2. Open up your browser's developer tools
  • Chrome: Press F12
  • Firefox: Install Firebug and press F12
  • IE, Safari, et al.: I'm not sure how this all works on other browsers. You may want to switch to Chrome or Firefox for this.
  1. Navigate to the Console tab.
  • Unless otherwise note, all the commands you'll be typing all the commands you see here into the console and the pressing Enter to run them
  1. To add esri-leaflet, we are going to append the library inside a <script> tag to the <head> of our open page (Source). In the console create a variable to create and hold our new <script> tag:
  • var script = document.createElement('script');
  1. We're using JavaScript for all this, but let's be certain the browser knows this when it accesses esri-leaflet:
  • script.type = 'text/javascript';
  1. Now we'll add the location or source of esri-leaflet. The library is hosted using a content delivery network (CDN). This means we can access it online with a single URL:
  • script.src = '';
  1. Great! Now we have a <script> tag that can give us access to esri-leaflet (You can check out what the final tag looks like by running console.log(script)). Now we need to add or append the contents of our script variable to the <head> of
  • document.head.appendChild(script)

Hooray! Hopefully this all worked and you've added esri-leaflet to Now we'll moving on to accessing esri-leaflet through's console API so we can add a WMS from and ArcGIS REST Service.

Adding a WMS from an ArcGIS REST Service

For this example, we're going to be adding a WMS of the Veteran's Wildlife Management Area north of Georgetown, KY that is accessed from the Georgetown-Scott County Planning Commission's ArcGIS REST Service:

  1. We're going to jump straight into using esri-leaflet. We'll create a variable that includes a reference to the WMS we want to use and theL.esri.tiledMapLayer() to access that WMS:
  • var aerial = L.esri.tiledMapLayer({url:''});
  1. Now that we've set up our access to our WMS, we can add it to using the console API:
  1. Let's check to make sure everything worked. You could pan and zoom to the Veteran's WMA, but we can use the console API to just zoom to the location:
  •[38.328393, -84.544945], 14)

Well...hopefully it all worked! If it did, you can now use the WMS layer to help with whatever feature creation you want to do in These are truly amazing times!