From c3ea250407fc66714acb058bc011bf8a6c259812 Mon Sep 17 00:00:00 2001
From: Lene Wasskog <lene.wasskog@nibio.no>
Date: Fri, 17 Jan 2025 10:04:57 +0100
Subject: [PATCH] build: Set view on map on creation
---
VIPSWeb/static/js/frontpageMap.js | 17 ++++++----------
.../static/js/weatherStationSelectorMap.js | 20 ++++++-------------
.../static/applefruitmoth/js/map.js | 16 ++++++---------
ipmd/static/ipmd/js/ipmdlib.js | 15 +++++---------
.../static/observations/js/observationList.js | 17 ++++++----------
.../observations/js/observationViewMap.js | 20 +++++++------------
spatial/static/spatial/js/gridmap.js | 14 +++----------
spatial/static/spatial/js/spatialMap.js | 17 ++++++----------
8 files changed, 45 insertions(+), 91 deletions(-)
diff --git a/VIPSWeb/static/js/frontpageMap.js b/VIPSWeb/static/js/frontpageMap.js
index 8e5dbb75..64dfe9f9 100755
--- a/VIPSWeb/static/js/frontpageMap.js
+++ b/VIPSWeb/static/js/frontpageMap.js
@@ -126,17 +126,14 @@ function initFrontpageMap(lonLat, zoomLevel, mapAttribution)
target: 'map',
layers: [backgroundLayer, forecastLayer, observationLayer],
overlays: [popOverlay],
- renderer: 'canvas'
+ renderer: 'canvas',
+ view: new ol.View({
+ center: ol.proj.fromLonLat(lonLat, 'EPSG:3857'),
+ zoom:zoomLevel,
+ maxZoom: getSelectedMapLayer() == FORECAST_LAYER ? maxMapZoomForForecasts : maxMapZoomForObservations
+ })
});
- // 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:zoomLevel,
- maxZoom: getSelectedMapLayer() == FORECAST_LAYER ? maxMapZoomForForecasts : maxMapZoomForObservations
- });
-
// Getting data and rendering the selected layer
selectMapLayer(getSelectedMapLayer());
/*if(getSelectedMapLayer() == FORECAST_LAYER)
@@ -148,8 +145,6 @@ function initFrontpageMap(lonLat, zoomLevel, mapAttribution)
initObservationLayer();
}*/
- map.setView(view);
-
// Attempting to adjust map to small screen
if(map.getSize()[0] < 500)
{
diff --git a/VIPSWeb/static/js/weatherStationSelectorMap.js b/VIPSWeb/static/js/weatherStationSelectorMap.js
index 609b81b3..6afbda4b 100755
--- a/VIPSWeb/static/js/weatherStationSelectorMap.js
+++ b/VIPSWeb/static/js/weatherStationSelectorMap.js
@@ -70,24 +70,16 @@ function initMap(center, zoomLevel, attribution, organizationId, weatherStationF
target: 'weatherStationSelectionMap',
layers: [backgroundLayer,weatherStationLayer],
overlays: [popOverlay],
- renderer: 'canvas'
- });
-
- var centerPosition = ol.proj.transform(center, 'EPSG:4326', map.getView().getProjection().getCode());
-
- // Setting zoom and center for the map (need to do this after creating map. so that we kan transform our
- // center to correct map projection)
- var view = new ol.View({
- center: centerPosition,
- zoom:zoomLevel
+ renderer: 'canvas',
+ view: new ol.View({
+ center: ol.proj.fromLonLat(center, 'EPSG:3857'),
+ zoom: zoomLevel
+ })
});
- map.setView(view);
// Using Bootstrap's popover plugin. See http://getbootstrap.com/javascript/#popovers
var poiDetails = $("#popover");
-
-
-
+
// Displays popup with forecasts for a given station
// (if there is a station where the click event is fired)
var displayFeatureDetails = function(pixel, coordinate) {
diff --git a/applefruitmoth/static/applefruitmoth/js/map.js b/applefruitmoth/static/applefruitmoth/js/map.js
index 5496de3c..9602b07c 100755
--- a/applefruitmoth/static/applefruitmoth/js/map.js
+++ b/applefruitmoth/static/applefruitmoth/js/map.js
@@ -49,17 +49,13 @@ var initMap = function(container, mapAttribution)
target: container,
layers: [backgroundLayer, forecastLayer],
overlays: [popOverlay],
- renderer: 'canvas'
+ renderer: 'canvas',
+ view: new ol.View({
+ center: ol.proj.fromLonLat([9,61], 'EPSG:3857'),
+ zoom: 6
+ })
});
-
- // 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([9,61], 'EPSG:4326', map.getView().getProjection().getCode()),
- zoom: 6
- });
- map.setView(view);
-
+
// Using Bootstrap's popover plugin. See http://getbootstrap.com/javascript/#popovers
var poiDetails = $("#popover");
diff --git a/ipmd/static/ipmd/js/ipmdlib.js b/ipmd/static/ipmd/js/ipmdlib.js
index def866f6..7f45505a 100644
--- a/ipmd/static/ipmd/js/ipmdlib.js
+++ b/ipmd/static/ipmd/js/ipmdlib.js
@@ -670,21 +670,16 @@ async function initDataSourceMap(containerId, geoJson, countryCodeList, featureC
map = new ol.Map({
target: containerId,
layers: [backgroundLayer],
- renderer: 'canvas'
+ renderer: 'canvas',
+ view: new ol.View({
+ center: ol.proj.fromLonLat([10,65], 'EPSG:3857'),
+ zoom: 7
+ })
});
-
// Adding it to list of maps, for bookkeeping
maps[containerId] = map;
- // 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([10,65], 'EPSG:4326', map.getView().getProjection().getCode()),
- zoom: 7
- });
- map.setView(view);
-
// Read the datasource's geoJson features
let drawnFeatures = undefined;
let features = new ol.Collection();
diff --git a/observations/static/observations/js/observationList.js b/observations/static/observations/js/observationList.js
index 31b65b8b..987e4786 100644
--- a/observations/static/observations/js/observationList.js
+++ b/observations/static/observations/js/observationList.js
@@ -101,7 +101,12 @@ var initMap = function(
target: 'observationMap',
layers: [backgroundLayer, observationLayer],
overlays: [popOverlay],
- renderer: 'canvas'
+ renderer: 'canvas',
+ view: new ol.View({
+ center: ol.proj.fromLonLat(center, 'EPSG:3857'),
+ zoom:zoomLevel,
+ maxZoom:7
+ })
});
// For some reason, we have to wait with selecting the layer until after the map has
@@ -110,16 +115,6 @@ var initMap = function(
// Using Bootstrap's popover plugin. See http://getbootstrap.com/javascript/#popovers
poiDetails = $("#popover");
- // Setting zoom and center for the map (need to do this after creating map. so that we kan transform our
- // center to correct map projection)
- var centerPosition = ol.proj.transform(center, 'EPSG:4326', map.getView().getProjection().getCode());
- var view = new ol.View({
- center: centerPosition,
- zoom:zoomLevel,
- maxZoom:7
- });
- map.setView(view);
-
// Need to build the query string
var params = [];
diff --git a/observations/static/observations/js/observationViewMap.js b/observations/static/observations/js/observationViewMap.js
index a37cf9b1..7414e30b 100755
--- a/observations/static/observations/js/observationViewMap.js
+++ b/observations/static/observations/js/observationViewMap.js
@@ -39,22 +39,16 @@ var initMap = function(geoJSON, poi, container, mapAttribution)
map = new ol.Map({
target: container,
layers: [backgroundLayer],
- renderer: 'canvas'
+ renderer: 'canvas',
+ view: new ol.View({
+ center: ol.proj.fromLonLat([10,65], 'EPSG:3857'),
+ zoom: 7,
+ maxZoom: 7
+ })
});
- // 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([10,65], 'EPSG:4326', map.getView().getProjection().getCode()),
- zoom: 7,
- maxZoom: 7
- });
- map.setView(view);
-
var features = new ol.Collection();
-
-
-
+
if(geoJSON != null)
{
var featureOverlay = new ol.layer.Vector({
diff --git a/spatial/static/spatial/js/gridmap.js b/spatial/static/spatial/js/gridmap.js
index 4f9937e9..ee181beb 100644
--- a/spatial/static/spatial/js/gridmap.js
+++ b/spatial/static/spatial/js/gridmap.js
@@ -327,19 +327,11 @@ async function initGridMap(inputModelId, wmsURL, mapAttribution) {
map = new ol.Map({
target: "mapContainer",
layers: [backgroundLayer].concat(layers),
- renderer: 'canvas'
+ renderer: 'canvas',
+ view: new ol.View({
+ })
});
-
- // 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,
- });
- map.setView(view);
-
// If today is outside of the date range, use the most recent timestamp
if(wmsServiceSuccess && isDataReturned)
{
diff --git a/spatial/static/spatial/js/spatialMap.js b/spatial/static/spatial/js/spatialMap.js
index b2d8c711..a57ba0b8 100644
--- a/spatial/static/spatial/js/spatialMap.js
+++ b/spatial/static/spatial/js/spatialMap.js
@@ -86,18 +86,13 @@ function initSpatialMap(lonLat, zoomLevel, mapAttribution, mapId) {
map = new ol.Map({
target: mapId,
layers: [backgroundLayer, carrotLayer],
- renderer: 'canvas'
- });
-
-
- // 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: zoomLevel,
- maxMapZoom: maxMapZoom,
+ renderer: 'canvas',
+ view: new ol.View({
+ center: ol.proj.fromLonLat(lonLat, 'EPSG:3857'),
+ zoom: zoomLevel,
+ maxZoom: maxMapZoom,
+ })
});
- map.setView(view);
map.on('singleclick', (evt) => {
const coordinate = proj4('EPSG:3857', 'EPSG:25833', evt.coordinate)
--
GitLab