diff --git a/spatial/static/spatial/js/gridmap.js b/spatial/static/spatial/js/gridmap.js index 0ea74e5e41f052d95b8071526c164969a3615713..45bd9c6b4bd098c87967c3813b5feafba9b6a9b4 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 b6c0d022606722171a4e887c9d9d3c3d70936b2b..a44cc9e78f2a2297d55e4cbf79b93fc80c93dffe 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 %}