For making multiple unique iframe maps available from one source.
Live at https://www.mrwc.org/restore/sub-basins/ go to individual sub-basins for smaller sidebar maps.
Task
- Make a base map with several layers.
- Enable map to be shown via iFrame on several pages, should display different extent and layer subset on each page.
- Should be easily updateable by non-developer GIS staff.
The result is this leaflet implimentation. The one important file is 'resource/config.json'. config.json:
- 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:
"displayname":"Wetlands",
"pathtofile":"resources/geojson/Wetlands071814.json",
"stroke":true,
"color":"#33a02c",
"weight":4,
"opacity":0.9,
"fill":true,
"fillColor":"#33a02c",
"fillOpacity":0.2,
"geometry":"polygon",
"hover":true,
"hoverArray":[{"displayname":"Project","field":"ProjectNam"}],
"click":true,
"clickArray":[{"displayname":"Project Name","field":"ProjectNam"},{"displayname":"Subbasin","field":"Subbasin"},{"displayname":"Square Feet","field":"sq_ft"},{"displayname":"Status","field":"Status"}].URL variables are used to specify:
- lyrArr: 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 project was developed for the Mary's River Watershed Council. The following two URLs demonstrate how the code can be used to show different maps/layers based on the URL. Here we go to a vanilla map, showing all layers, some with hover, some with click, some with no interactivity. Just for testing. Second URL goes to a specific project area and only displays some of the layers.
This URL goes to the map with no URL variables, shows all layers in config
http://nickmartinelli.com/mrwc/
This URL specifies the watershed layer and zooms to a specific project ares using just URL variables