maptastik
9/28/2015 - 2:32 PM

Add a WMS layer to GeoJSON.io

Add a WMS layer to GeoJSON.io

README.md
content_copyfile_download
  • Rendered
  • Source

Add a WMS layer from an ArcGIS REST Service to GeoJSON.io

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 GeoJSON.io

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

Introduction

GeoJSON.io 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 GeoJSON.io console API
  2. How to combine esri-leaflet and GeoJSON.io to include a WMS from an ArcGIS REST Service in a GeoJSON.io project.

Adding esri-leaflet

GeoJSON.io 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 GeoJSON.io.
  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 GeoJSON.io 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 = 'http://cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js';
  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 GeoJSON.io:
  • document.head.appendChild(script)

Hooray! Hopefully this all worked and you've added esri-leaflet to GeoJSON.io. Now we'll moving on to accessing esri-leaflet through GeoJSON.io'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: http://gis.gscplanning.com/arcgis/rest/services/wma_aerial2012_hs/MapServer

  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:'http://gis.gscplanning.com/arcgis/rest/services/wma_aerial2012_hs/MapServer'});
  1. Now that we've set up our access to our WMS, we can add it to GeoJSON.io using the console API:
  • window.api.map.addLayer(aerial);
  1. Let's check to make sure everything worked. You could pan and zoom to the Veteran's WMA, but we can use the GeoJSON.io console API to just zoom to the location:
  • window.api.map.setView([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 GeoJSON.io. These are truly amazing times!