Layer Config with Leaflet

Code for the leaflet layer configuration script described in this post is available on GitHub here.

I currently have the pleasure of working with the  Mary’s River Watershed Council to create web maps for their in development website update. The map above shows the in progress map (No those aren’t the final colors).

One of the biggest issues with web maps for folks without developers on staff is that they can become out of date very quickly. One of the main challenges on this project is to make it easy to update for a non technical staff. I think that this solution, with a little documentation, provides a good model for making good dynamic maps for non-profits and other typically low-resource groups.

The Challenges

  • Map showing all projects within the council work area.
  • Maps on several pages (~12) to show different work areas and projects.
  • Still have access to show all other projects when desired.
  • Click/Hover interactivity from various field names depending on the data.
  • Do it on a shoestring.

And the big one

  • Data must be update-able by non developer GIS staff.

I considered using one of our usual suspects for quick web maps, like Mapbox and CartoBD (which are great by the way), but neither quite fit with the various maps the MRWC wanted to display, and the ultimate data update flexibility they desired.

So, custom solution here we come. I decided to create a map with Leaflet and add two things to make the maps very customizable, and up-dateable for the staff. First, add a custom CONFIG file, in JSON, so that it was pretty readable for the MRWC staff. Second, make the visible layers, map center, and map zoom settable through the URL Variables, so the embedded iFrames can be set to display exactly the layers and geography desired. With the config file, and URL control, we can make one map to rule them all!

The config.json

The config file specifies the following about all layers available in the map.

  • All overlay geojson layers.
  • Display name for each layer.
  • Paths to the geojson for each layer.
  • Style settings for each layer.
  • Geometry type for each layer. (limits the type of geojson you can use, but increases simplicity for non-technical staff use)
  • Hover and Click interactivity fields if any for each layer.

example config.json section for ‘Wetlands’ layer:

"clickArray":[{"displayname":"Project Name","field":"ProjectNam"},{"displayname":"Subbasin","field":"Subbasin"},{"displayname":"Square Feet","field":"sq_ft"},{"displayname":"Status","field":"Status"}]

URL Variables (really!)

URL variables are used to specify:

  • lyrAr*: A list of layers from configjson to display. Defaults to all layers visible if not specified.
  • lat and lng: Used to set map center. Defaults to center specified in script.js if not set.
  • zoom: The map zoom level. Defaults to zoom specified in script.js if not set.

This way, all layers are always available, but only those specified in the URL are displayed initially.

Screen Shot 2014-09-23 at 12.21.01 PM

A Couple Examples

The map at the top of this page shows vanilla map linked at

This map is loaded as an iFrame with the URL variables of ‘lyrArr’ for just the MRWC administrative boundary and sub basins.,SubBasins

This map is loaded as an iFrame with the URL variables of ‘lyrArr’ for the MRWC administrative boundary and sub basins and the Wetlands layer. It is also zoomed to the main wetlands work area with hover and click enabled for the Wetlands layer.,SubBasins,Wetlands&zoom=14&lat=44.593&lng=-123.415

So the MRWC can add as many maps as they want, using iFrames from one single map source. I think that this solution, produced quickly, will provide the flexibility MRWC desires and will be easy for them to update and modify as projects evolve.

As usual, the code is available on GitHub here.

Leave a Reply

Your email address will not be published. Required fields are marked *