Web mapping experiments with Leaflet

Ten years ago when I first created some web maps of road accidents it wasn’t possible to use client side web mapping. Firstly, Google Maps was too slow – the browser ground to a halt when mapping more than a couple of hundred markers. Secondly there was the Ordnance Survey’s “derived data” problem. There was some confusion over Google terms and conditions and the Ordnance Survey objected to derived data being used with Google Maps – where derived data was any data generated based on OS mapping. So, the only option was to generate the maps server side, using OS base maps. How things have changed! The arrival of the open source Leaflet library has made web mapping very straightforward and you can use a variety of base maps including OpenStreetMap. The problem with marker overloading can be solved by point clustering and it is also possible to generate heat maps.

• Clustering of road accident markers
• Road accident heat map
• Accidents near a junction

Web Map Service data

The road accident data used above is stored in geoJSON files located on the same server as the web map pages. However, Leaflet has built-in Web Map Service functionality to allow data to be imported from servers such  as GeoServer. The following example uses data provide by the British Geological Society (BGS).

• A basic WMS map of bedrock in Great Britain

Other leaflet plugin experiments

• Geocoding
• A basic search of GeoJSON data
• Overlaying old maps – Berlin 1966
• Overlaying old maps – Manchester time zones 1914
• Transit map of Greater Manchester (work in progress – updated 04/03/2019)

• Using data from a mySQL database

Greyscale background maps

Update March 2021

Previously, to allow for the option of using a greyscale background map as an alternative to a full colour OSM backdrop, I had been using an alternative tile server, where the tiles were rendered in greyscale and then served up. This had started causing problems with certain browsers (Edge and Chrome) which the tiles were not accepted due to an SSL security error. This was rectified using the Leaflet Grayscale plugin which simply takes the standard OSM full colour tiles and turns them greyscale (or grayscale) on the browser.