BootLeaf

Installation
Configuration
Basemaps
Layers
Table of Contents
Identify
Query
Filter
Custom code
ArcGIS authorisation
Known issues

Introduction

This is an update to the excellent Bootleaf code written by Bryan McBride, which incorporates the responsive framework Bootstrap with the lightweight Leaflet mapping API.

This update decouples the application logic from the map contents, and so provides a framework for rapid creation of new maps by simply updating a configuration file.

bootleaf screenshot

Support is provided for:

WMS tiled layers
WFS layers
GeoJSON layers
ArcGIS Server feature, dynamic and tiled layers
Clustering of WFS, GeoJSON and ArcGIS Server feature layers

Note - WMS and WFS layers have been tested in GeoServer only. CORS and jsonp should be enabled on GeoServer for best results.

Note - Bootleaf uses the Esri-Leaflet plugin, in order to support ArcGIS layers and display Esri basemaps. Please note the Esri usage terms before using this.

Additional functionality includes:

Table of Contents with support for groups and radio buttons
Identify function for WMS and ArcGIS Dynamic layers
Query Widget, for finding features within ArcGIS Feature and Dynamic layers
Spatial Bookmarks
Address search using OpenStreetMap, Google or ArcGIS
Ability to share the map with current location and visible layers
Tooltips and info-windows
Simple labels within WFS and GeoJson layers

The application comprises:

index.html - defines the elements on the page, including the map, sidebar, navigation, buttons, etc. References all of the other files
config.js - configuration file, which personalises each map. Specifies the starting extent, basemap, controls, and layers
style.css - over-writes the default styles to personalise the map
custom.js - adds custom functionality to personalise the map
src/... - the directory containing the core Bootleaf functionality
data - stores any local GeoJSON datasets which are not hosted on a server

Installation

Use these steps to create a map based on the current version of the Bootleaf template:

download the code from here
unzip the file into a temp directory
copy the bootleaf directory into a suitable directory on your server
rename the bootleaf folder to the name of your app (your_app)
open your application via http://your_server/path/your_app and verify that it works correctly

Deployment and upgrades

to deploy your app to another server, copy the your_app directory to the server. This will include both the Bootleaf code (in the src directory) and your custom app as a stand-alone package
in the future, to update your app to the latest version of the Bootleaf template, download the code again and replace the src in your local version with the src latest version (ensuring you don't over-write your custom config file)

Configuration

All configuration options for the map are controlled via the config.js file, so open this file in your code editor and go for it!

The format of this file is JSON, which uses key/value pairs holding parameters and their values, eg:

"title": "Bootleaf template map",
"start": {
	"center": [42, -85],
	"zoom": 5,
	"attributionControl": false,
	"zoomControl": false,
	"layers": []
}

When editing these values, ensure that the key names are quoted. Textual values should be quoted, but numerical values and booleans should not be quoted. Un-needed parameters may be commented out using /* ... */ notation around the entire parameter.

Parameter explanations

title : displayed in the header of the browser
start : used to set the inital map extent, and other Leaflet initiation parameters
about : displayed in the map's About panel
bing_key : a license key to use Bing Maps basemap tiles
mapboxKey : a license key to use MapBox basemap tiles
controls : used to configure individual map controls. If a control is commented out, it will not be shown. Valid positions are topleft, topright, bottomleft, bottomright
- zoom : specify the location of the zoom in/out buttons
- leafletGeocoder : configure the geocoder
  - type: Google/OpenStreetMap/ArcGIS
  - suffix: an optional keyword to filter each search. eg, use "Australia" to tell the geocoder to search within Australia only
  - key: when using the Google Maps option, specify your API key (https://developers.google.com/maps/documentation/geocoding/start#get-a-key)
- TOC : configure the default table of contents (see below for further configuration options)
- history : display next/previous buttons on the map, to enable moving forward/back through the extent history
- bookmarks : spatial bookmarks may be saved to the config file, or added via the UI. In the latter case they're accessible via cookies on the current user's machine. Follow the pattern of the sample bookmarks to create new instances
activeTool : a tool may optionally be configured as active when the map loads. Current options are identify, queryWidget (see below for more info) and coordinate (which reports the coordinates at the location clicked on the map)
defaultIcon : optionally, override the default icon which is a blue pin, for example to specify an alternate image, or to change the size and shape of the pin. This icon is used in the geocoding result display amongst other areas
projections - an array of proj4js projection definitions, which are used when projecting coordinates from other reference systems onto the map. Determine each layer's projection, then look up the details at https://spatialreference.org/. Add each layer's WKID to the projections array in the format:

"projections": [
	{wkid: 'proj 4 projection parameters from spatialreference.org'},
	{4269: '+proj=longlat +ellps=GRS80 +datum=NAD83 +no_defs '}
]

showIdentifyMarker : true/false - when true, the location clicked on the map is shown in a popup. Default is true.

Basemaps

Various basemaps may be included on the map, by listing the basemap IDs as shown below. The first basemap listed is the default.

"basemaps" : ['esriStreets', 'MapboxLight', 'OpenStreetMap']

Esri basemaps:

esriStreets
esriTopographic
esriImagery
esriShadedRelief
esriTerrain
esriGray
esriDarkGray
esriNationalGeographic
esriOceans

MapBox basemaps

MapboxStreets
MapboxLight
MapboxDark
MapboxSatellite
MapboxSatelliteStreets
MapboxHighContrast

(MapBox Basemaps require a valid mapboxKey parameter in the config file)

Bing basemaps:

Aerial
AerialWithLabels
Road

(Bing basemaps require a valid bing_key parameter in the config file)

Leaflet Tiled basemaps:

OpenStreetMap

basemaps screenshot

If no basemaps are listed in the config file, all basemaps will be available on the map.

Layers

Support for various layer types is included in this Bootleaf update, including ArcGIS Server (feature, dynamic and tiled), WMS tiled and GeoJSON, with more types to be added in future.

To begin adding layers, find the "layers": [] section of the config file, and add a new layer using the format:

{
	"id": "a unique ID for this layer",
	"name": "the name, which will appear in the Table of Contents",
	"type": "layer type (see 'Supported layer types' below)",
	"url": "layer URL"
}

Supported layer types

agsFeatureLayer : ArcGIS Server Feature layer
agsDynamicLayer : ArcGIS Server Dynamic layer
agsTiledLayer : ArcGIS Server Tiled layer
geoJSON : Leaflet GeoJSON
wmsTiledLayer : Leaflet WMS Tile layer
tileLayer : tiled layers which follow the pattern 'https://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'
WFS : WFS layers (Note: to date, testing has only been done on WFS as provided by GeoServer in GeoJSON format.)

Note - it may be necessary to use a reverse proxy in order to access data from GeoServer.

Bootleaf

Install / Use

README