From 4398b87bd038d4bb2c1bba7c7a0b86e63292dd13 Mon Sep 17 00:00:00 2001
From: Lene Wasskog <lene.wasskog@nibio.no>
Date: Wed, 23 Oct 2024 08:36:48 +0200
Subject: [PATCH] feat: Map contains localized names of poi types
---
src/main/webapp/js/mapModal.js | 64 +++++++++----------
.../templates/forecastConfigurationForm.ftl | 13 +---
2 files changed, 32 insertions(+), 45 deletions(-)
diff --git a/src/main/webapp/js/mapModal.js b/src/main/webapp/js/mapModal.js
index 2a44710a..4fda7c86 100644
--- a/src/main/webapp/js/mapModal.js
+++ b/src/main/webapp/js/mapModal.js
@@ -45,7 +45,14 @@ class MapModal {
zoomToLocation: 'Zoom til meg',
geolocationNotSupported: 'Geolokalisering støttes ikke av denne nettleseren',
geolocationFailed: 'Fant ikke din posisjon',
- closeMap: 'Lukk kart'
+ closeMap: 'Lukk kart',
+ poiType0: 'Uspesifisert',
+ poiType1: 'Værstasjon',
+ poiType2: 'Gård',
+ poiType3: 'Felt',
+ poiType5: 'Felle',
+ poiType6: 'Bigårdsplass',
+ poiType7: 'Planteskole',
},
en: {
selectLocation: 'Select location',
@@ -59,26 +66,32 @@ class MapModal {
zoomToLocation: 'Zoom to My Location',
geolocationNotSupported: 'Geolocation is not supported by this browser',
geolocationFailed: 'Unable to retrieve your location',
- closeMap: 'Close Map'
+ closeMap: 'Close Map',
+ poiType0: 'Unspecified',
+ poiType1: 'Weather station',
+ poiType2: 'Farm',
+ poiType3: 'Field',
+ poiType5: 'Trap',
+ poiType6: 'Apiary site',
+ poiType7: 'Nursery',
}
};
/**
* @param mapModalId The id of the HTML element in which the modal should be opened
- * @param typeNameMap A mapping from pointOfInterestTypeIds to their localized names - expects names for ids 0,1,2,3,5,6,7
* @param geoJsonData GeoJson containing all features which should be displayed on the map
* @param language The language in which texts should be displayed, either 'nb' or 'en'
* @param allowNewPoints Whether or not the user should be allowed to add new points
* @param callbackOnClose Callback function to call when closing the modal
*/
- constructor(mapModalId, typeNameMap, geoJsonData, language = 'nb', allowNewPoints = false, callbackOnClose = null) {
+ constructor(mapModalId, geoJsonData, language = 'nb', allowNewPoints = false, callbackOnClose = null) {
this.mapModalElement = document.getElementById(mapModalId);
this.mapContainerId = mapModalId + "-container";
this.mapContainerElement = this.addMapContainer(this.mapModalElement, this.mapContainerId);
- this.typeNameMap = typeNameMap;
- // Empty or invalid typeNameMap means that type information should not be displayed
- this.includeTypeInformation = Object.keys(typeNameMap).length === 7;
+ // The variable below should instead be: this.selectPoi or this.selectCoordinates
+ // this.includeTypeInformation = Object.keys(typeNameMap).length === 7;
+ this.includeTypeInformation = true;
this.geoJsonData = geoJsonData;
if(language in MapModal.TRANSLATIONS) {
@@ -99,7 +112,6 @@ class MapModal {
this.displaySelectedFeatureInfoControl = new DisplaySelectedFeatureInfoControl({
translations: this.translations,
- typeNameMap: this.typeNameMap,
onSubmit: (feature) => {this.confirmSelection(feature)},
coordinatePrecision: this.coordinatePrecision
});
@@ -194,7 +206,7 @@ class MapModal {
if(this.includeTypeInformation) {
this.legendControl = new LegendControl({
typeColorMap: this.typeColorMap,
- typeNameMap: this.typeNameMap,
+ translations: this.translations,
markersByType: this.markersByType,
mapModalInstance: this
});
@@ -306,22 +318,6 @@ class MapModal {
const longitudeInput = newPointFormElement.querySelector('#map-poi-longitude');
const typeInput = newPointFormElement.querySelector('#map-poi-type');
const submitButton = newPointFormElement.querySelector('#map-poi-submit-button');
-
- // Add options for the allowed types - or remove the select list altogether
- if(this.includeTypeInformation) {
- ["2", "3", "5"].forEach(value => {
- const option = document.createElement("option");
- option.value = value;
- option.text = this.typeNameMap[value];
- typeInput.appendChild(option);
- })
- } else {
- const formGroup = typeInput.closest('.form-group');
- if(formGroup){
- formGroup.remove()
- }
- }
-
const validateInputs = () => {
const isValidLat = !isNaN(parseFloat(latitudeInput.value)) && isFinite(latitudeInput.value);
const isValidLng = !isNaN(parseFloat(longitudeInput.value)) && isFinite(longitudeInput.value);
@@ -451,6 +447,9 @@ class MapModal {
<div class="form-group">
<label for="map-poi-type">${this.translations.type}:</label>
<select class="form-control" id="map-poi-type" name="type">
+ <option value="2">${this.translations['poiType2']}</option>
+ <option value="3">${this.translations['poiType3']}</option>
+ <option value="5">${this.translations['poiType5']}</option>
</select>
</div>
<div class="form-group text-right">
@@ -495,7 +494,6 @@ const DisplaySelectedFeatureInfoControl = Control.extend({
options: {
position: 'bottomleft',
onSubmit: undefined,
- typeNameMap: {},
translations: {},
coordinatePrecision: 5
},
@@ -517,17 +515,15 @@ const DisplaySelectedFeatureInfoControl = Control.extend({
if (feature) {
const name = feature.properties.pointOfInterestName;
- const type = this.options.typeNameMap[feature.properties.pointOfInterestTypeId];
+ const type = this.options.translations['poiType' + feature.properties.pointOfInterestTypeId];
const latitude = feature.geometry.coordinates[1].toFixed(this.options.coordinatePrecision);
const longitude = feature.geometry.coordinates[0].toFixed(this.options.coordinatePrecision);
infoMessageDiv.innerHTML = `
<h4>${name}</h4>
<b>${this.options.translations.latitude}</b> ${latitude}<br>
- <b>${this.options.translations.longitude}</b> ${longitude}`;
- if (type) {
- infoMessageDiv.innerHTML += `<br><b>${this.options.translations.type}</b> ${type}`
- }
+ <b>${this.options.translations.longitude}</b> ${longitude}<br>
+ <b>${this.options.translations.type}</b> ${type}`
confirmButton.innerHTML = feature.properties.pointOfInterestId
? this.options.translations.selectLocation
@@ -617,14 +613,14 @@ const LegendControl = Control.extend({
options: {
position: 'bottomright',
typeColorMap: {},
- typeNameMap: {},
+ translations: {},
markersByType: {},
mapModalInstance: null,
},
onAdd: function (map) {
const legendDiv = DomUtil.create('div', 'info legend');
const typeColorMap = this.options.typeColorMap;
- const typeNameMap = this.options.typeNameMap;
+ const translations = this.options.translations;
const markersByType = this.options.markersByType;
DomEvent.disableClickPropagation(legendDiv);
@@ -638,7 +634,7 @@ const LegendControl = Control.extend({
const itemDiv = DomUtil.create('div', 'legend-item', legendDiv);
itemDiv.innerHTML = `<i style="background:${color};"></i>
- <span>${typeNameMap[type]} (${count})</span>`;
+ <span>${translations['poiType' + type]} (${count})</span>`;
DomEvent
.on(itemDiv, 'click', DomEvent.stop)
diff --git a/src/main/webapp/templates/forecastConfigurationForm.ftl b/src/main/webapp/templates/forecastConfigurationForm.ftl
index 9152e42d..aca82d17 100755
--- a/src/main/webapp/templates/forecastConfigurationForm.ftl
+++ b/src/main/webapp/templates/forecastConfigurationForm.ftl
@@ -126,16 +126,6 @@
});
}
- const typeNameMap = {
- 0: "${i18nBundle["pointOfInterestType_0"]}",
- 1: "${i18nBundle["pointOfInterestType_1"]}",
- 2: "${i18nBundle["pointOfInterestType_2"]}",
- 3: "${i18nBundle["pointOfInterestType_3"]}",
- 5: "${i18nBundle["pointOfInterestType_5"]}",
- 6: "${i18nBundle["pointOfInterestType_6"]}",
- 7: "${i18nBundle["pointOfInterestType_7"]}"
- };
-
// Make function globally available
window.openLocationMap = () => {
let poiIds = locationList.map(poi => poi.pointOfInterestId);
@@ -149,7 +139,8 @@
})
.then(response => response.json())
.then(geoJson => {
- const locationMapInstance = new MapModal('location-map', typeNameMap, geoJson, '${currentLanguage}', true, callbackOnCloseLocationMap);
+ const locationMapInstance = new MapModal('location-map', geoJson, '${currentLanguage}', true, callbackOnCloseLocationMap);
+ console.info("locationMapInstance", locationMapInstance)
const selectedPoiId = getSelectedPoiId(selectLocationElement);
locationMapInstance.openModal(selectedPoiId, ${user.organizationId.defaultMapCenter.y?c}, ${user.organizationId.defaultMapCenter.x?c}, ${user.organizationId.defaultMapZoom} + 1);
})
--
GitLab