feat: Ensure map works without poi type information

src/main/webapp/js/mapModal.js

@@ -58,6 +58,7 @@ class MapModal {
             submitLocation: 'OK',
             zoomToLocation: 'Zoom to My Location',
             geolocationNotSupported: 'Geolocation is not supported by this browser',
+            geolocationNotSupported: 'Geolocation is not supported by this browser',
             geolocationFailed: 'Unable to retrieve your location',
             closeMap: 'Close Map'
         }
@@ -65,7 +66,7 @@ class MapModal {
 
     /**
      * @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
+     * @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
@@ -75,7 +76,11 @@ class MapModal {
         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;
+
         this.geoJsonData = geoJsonData;
         if(language in MapModal.TRANSLATIONS) {
             this.translations = MapModal.TRANSLATIONS[language];
@@ -186,13 +191,16 @@ class MapModal {
                 this.markersByType[typeId].push(layer);
             }
         }).addTo(this.map);
-        this.legendControl = new LegendControl({
-            typeColorMap: this.typeColorMap,
-            typeNameMap: this.typeNameMap,
-            markersByType: this.markersByType,
-            mapModalInstance: this
-        });
-        this.map.addControl(this.legendControl);
+
+        if(this.includeTypeInformation) {
+            this.legendControl = new LegendControl({
+                typeColorMap: this.typeColorMap,
+                typeNameMap: this.typeNameMap,
+                markersByType: this.markersByType,
+                mapModalInstance: this
+            });
+            this.map.addControl(this.legendControl);
+        }
 
         // Enable adding new points if allowed
         if (this.allowNewPoints) {
@@ -300,6 +308,21 @@ class MapModal {
             const typeInput = newPointFormElement.querySelector('#type');
             const submitButton = newPointFormElement.querySelector('#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);
@@ -362,7 +385,6 @@ class MapModal {
     }
 
     createFeatureForPoint(name, type, longitude, latitude) {
-        console.info("Create feature for [" + longitude + "," + latitude + "," + name + "," + type + "]");
         return {
             "type": "Feature",
             "geometry": {
@@ -430,9 +452,6 @@ class MapModal {
                 <div class="form-group">
                     <label for="poiTypeSelect">${this.translations.type}:</label>
                     <select class="form-control" id="type" name="type">
-                        <option value="2">${this.typeNameMap[2]}</option>
-                        <option value="3">${this.typeNameMap[3]}</option>
-                        <option value="5">${this.typeNameMap[5]}</option>
                     </select>
                 </div>
                 <div class="form-group text-right">
@@ -506,8 +525,10 @@ const DisplaySelectedFeatureInfoControl = Control.extend({
             infoMessageDiv.innerHTML = `
             <h4>${name}</h4>
             <b>${this.options.translations.latitude}</b> ${latitude}<br>
-            <b>${this.options.translations.longitude}</b> ${longitude}<br>
-            <b>${this.options.translations.type}</b> ${type}`;
+            <b>${this.options.translations.longitude}</b> ${longitude}`;
+            if (type) {
+                infoMessageDiv.innerHTML += `<br><b>${this.options.translations.type}</b> ${type}`
+            }
 
             confirmButton.innerHTML = feature.properties.pointOfInterestId
                 ? this.options.translations.selectLocation