Auto zoom/pan WMS layer

spatial/static/spatial/js/gridmap.js

@@ -48,11 +48,11 @@ function getCurrentVisibleOLLayer()
     // The WMS layer returned from mapserver is found
     let currentWMSLayer = WMSLayersDateBucket[currentTimestamp][currentParameter];
     // We have the ordering in the openlayers Map as a property, use that to return the OpenLayers layer
-    return layers[currentLayer["ordering"]];
+    return layers[currentWMSLayer["ordering"]];
 }
 
 
-async function initGridMap(inputModelId, lonLat, zoomLevel, mapAttribution) {
+async function initGridMap(inputModelId, mapAttribution) {
     modelId = inputModelId;
     var backgroundLayer = new ol.layer.Tile({
 		source: new ol.source.OSM({
@@ -159,9 +159,9 @@ msLoadMap(): Unable to access file. (/disks/data01/mapserver/wms/SEPTREFFUM/SEPT
 	// Setting zoom and center for the map (need to do this after creating map. so that we can transform our
 	// center to correct map projection)
 	var view = new ol.View({
-		center: ol.proj.transform(lonLat, 'EPSG:4326', map.getView().getProjection().getCode()),
-		zoom: 5,
-		maxMapZoom: 10,
+		//center: ol.proj.transform(lonLat, 'EPSG:4326', map.getView().getProjection().getCode()),
+		//zoom: 5,
+		//maxMapZoom: 10,
 	});
 	map.setView(view);
 
@@ -172,6 +172,14 @@ msLoadMap(): Unable to access file. (/disks/data01/mapserver/wms/SEPTREFFUM/SEPT
     setCurrentDate(todayLayerIndex);
     switchLayer(todayLayerIndex);
 
+    // Zoom and center the map to fit to the extent of the WMS layer. 
+    // If the current WMS layer has a lot of no-data / invisible values surrounding the 
+    // visible values, the zoom might appear to be a bit too far out
+    let currentWMSLayer = WMSLayersDateBucket[currentTimestamp][currentParameter]
+    let WMSExtent = currentWMSLayer.EX_GeographicBoundingBox; // Assuming this is always EPSG:4326???
+    let extent = ol.proj.transformExtent(WMSExtent, 'EPSG:4326', map.getView().getProjection());
+    map.getView().fit(extent, map.getSize());
+
     popup = new ol.Overlay({
     element: document.getElementById('popup')
     });

spatial/templates/spatial/gridmap.html

@@ -18,7 +18,7 @@
 		var longitude = {{settings.MAP_CENTER_LONGITUDE|unlocalize}};
 		var latitude = {{settings.MAP_CENTER_LATITUDE|unlocalize}};
 		var zoomLevel = {{settings.MAP_ZOOMLEVEL}};
-		initGridMap("{{model_id}}",[longitude,latitude],zoomLevel,"{{settings.MAP_ATTRIBUTION|safe}}");
+		initGridMap("{{model_id}}","{{settings.MAP_ATTRIBUTION|safe}}");
 	});
 </script>
 {% endblock %}