Adding British Geological Survey (BGS) WMS Layers to geojson.io

This took a little while to do; there doesn’t seem to be anywhere explaining how to add WMS layers and controls in simple terms… so here it is for anyone else. Pieced together from various places, the leaflet documentation, and some guesswork, here is how to add WMS layers for BGS solid and superficial deposit geology and linear features to a geojson.io view. The layer opacity has been set to 0.5 to allow the base map to be seen.

You will need to access the developers’ console (F12 on Firefox).

It will look like this:

Enter the following commands where the “>>” is:

var solid = L.tileLayer.wms("https://map.bgs.ac.uk/arcgis/services/BGS_Detailed_Geology/MapServer/WMSServer", {layers: 'BGS.50k.Bedrock', format: 'image/png', version: '1.3.0'});
var drift = L.tileLayer.wms("https://map.bgs.ac.uk/arcgis/services/BGS_Detailed_Geology/MapServer/WMSServer", {layers: 'BGS.50k.Superficial.deposits', format: 'image/png', version: '1.3.0'});
var linear = L.tileLayer.wms("https://map.bgs.ac.uk/arcgis/services/BGS_Detailed_Geology/MapServer/WMSServer", {layers: 'BGS.50k.Linear.features', format: 'image/png', version: '1.3.0'});
var layer_control = {"Solid": solid, "Drift": drift, "Linear Features": linear};
solid.setOpacity(0.5);
drift.setOpacity(0.5);
linear.setOpacity(0.5);
window.api.map.addLayer(drift);
window.api.map.addLayer(solid);
window.api.map.addLayer(linear);
L.control.layers(null, layer_control).addTo(window.api.map);

I find I have to leave the console now.

One thing to note is that the BGS WMS will not return an image if you are very “zoomed out”. Zoom in until the scale bar shows 500m or 1km.

Other BGS WMS layers to add:

var artificial = L.tileLayer.wms("https://map.bgs.ac.uk/arcgis/services/BGS_Detailed_Geology/MapServer/WMSServer", {layers: 'BGS.50k.Artificial.ground', format: 'image/png', version: '1.3.0'});
var movement = L.tileLayer.wms("https://map.bgs.ac.uk/arcgis/services/BGS_Detailed_Geology/MapServer/WMSServer", {layers: 'BGS.50k.Mass.movement', format: 'image/png', version: '1.3.0'});