Merge pull request #114 from BritishGeologicalSurvey/layer-control

Layer control
BritishGeologicalSurvey · May 9, 2023 · 8633855 · 8633855
2 parents 71a6043 + 68f6776
commit 8633855
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/app/static/js/Leaflet.FeatureGroup.OGCAPI.js b/app/static/js/Leaflet.FeatureGroup.OGCAPI.js
@@ -40,7 +40,7 @@ L.FeatureGroup.OGCAPI = L.GeoJSON.extend({
 		 * @option limit = 100
 		 * The maximum amount of features to have on the map at any given time.
 		 */
-		limit: 100,
+		limit: 200,
 
 		/**
 		 * @option padding: Number = 0.1

diff --git a/app/static/js/map.js b/app/static/js/map.js
@@ -1,7 +1,7 @@
 
-// var control = {};
-// var overlays = {};
-// var baseMaps = {};
+var control = {};
+var overlays = {};
+var baseMaps = {};
 
 var mapCentre = [54.5, -1.5];
 var initZoom = 5.5;
@@ -45,7 +45,7 @@ geologyOfbtn = L.tileLayer.betterWms('https://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_
 /** Add Esri basemap layers to map - this is using the esri-leaflet.js extension 
  * for Leaflet and makes it easier to include Esri functionality in to Leaflet maps: https://esri.github.io/esri-leaflet   */
 var topo = L.esri.basemapLayer("Topographic").addTo(map);
-// var imagery = L.esri.basemapLayer("Imagery");
+var imagery = L.esri.basemapLayer("Imagery");
 
 /** Use the L.tileLayer.betterWms extension to load the AGS wms layer */
 var agsindex = L.tileLayer.wms('https://map.bgs.ac.uk/arcgis/services/AGS/AGS_Export/MapServer/WMSServer?', {
@@ -60,6 +60,8 @@ var agsindex = L.tileLayer.wms('https://map.bgs.ac.uk/arcgis/services/AGS/AGS_Ex
 var agsboreholes = L.featureGroup
 .ogcApi("https://ogcapi.bgs.ac.uk/", {
     collection: "agsboreholeindex",
+    pane: "overlays",
+    limit: 200,
     onEachFeature: function (feat, layer) {
         var properties = feat.properties;
         var popupContent = "<b>AGS Borehole Information</b><br><hr>" +
@@ -76,9 +78,11 @@ var agsboreholes = L.featureGroup
     },
 });
 
-agsboreholes.once("ready", function (ev) {
-    map.fitBounds(agsboreholes.getBounds());
-}).addTo(map);
+agsboreholes.on("ready", () => {map.addLayer(agsboreholes);})
+
+// agsboreholes.once("ready", function (ev) {
+//     map.fitBounds(agsboreholes.getBounds());
+// }).addTo(map);
 
 
 // (async () => {
@@ -109,13 +113,13 @@ agsboreholes.once("ready", function (ev) {
 //     layer.bindPopup(popupContent);
 // }
 
-// baseMaps["<span>Topographic</span>"] = topo;
-// baseMaps["<span>Imagery</span>"] = imagery;
-// overlays["<span>Geology</span>"] = geologyOfbtn;
+baseMaps["<span>Topographic</span>"] = topo;
+baseMaps["<span>Imagery</span>"] = imagery;
+overlays["<span>Geology</span>"] = geologyOfbtn;
 // overlays["<span>AGS Index</span>"] = agsindex;
 // overlays["<span>AGS Details</span>"] = agsboreholes;
 
-// control = L.control.layers(baseMaps, overlays, { collapsed: false }).addTo(map);
+control = L.control.layers(baseMaps, overlays, { collapsed: false }).addTo(map);
 
 // // jQuery UI slider for controling the opacity of the wms layer.
 // $opacitySlider = $("#opacitySlider").slider({