feat: Map contains localized names of poi types

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)

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);
             })