From 3ed1ac21f629b60d7c12260cd1f811e0ec2cd345 Mon Sep 17 00:00:00 2001
From: Tor-Einar Skog <tor-einar.skog@nibio.no>
Date: Mon, 30 Oct 2023 14:29:43 +0100
Subject: [PATCH] Auto zoom/pan WMS layer
---
spatial/static/spatial/js/gridmap.js | 18 +++++++++++++-----
spatial/templates/spatial/gridmap.html | 2 +-
2 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/spatial/static/spatial/js/gridmap.js b/spatial/static/spatial/js/gridmap.js
index 0ea74e5e..45bd9c6b 100644
--- a/spatial/static/spatial/js/gridmap.js
+++ b/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')
});
diff --git a/spatial/templates/spatial/gridmap.html b/spatial/templates/spatial/gridmap.html
index b6c0d022..a44cc9e7 100644
--- a/spatial/templates/spatial/gridmap.html
+++ b/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 %}
--
GitLab