diff --git a/src/main/webapp/js/mapModal.js b/src/main/webapp/js/mapModal.js
index b5876c773dccebc3f433444db61f575973f23762..2a44710aee46daf49efaa1bbe73c5a8ccf5b0fcc 100644
--- a/src/main/webapp/js/mapModal.js
+++ b/src/main/webapp/js/mapModal.js
@@ -65,7 +65,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 +75,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 +190,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) {
@@ -293,12 +300,27 @@ class MapModal {
DomEvent.disableClickPropagation(newPointFormElement);
document.addEventListener('click', this.handleClickOutsidePointForm.bind(this), true);
- const closeButton = newPointFormElement.querySelector("#close-button");
- const nameInput = newPointFormElement.querySelector('#name');
- const latitudeInput = newPointFormElement.querySelector('#latitude');
- const longitudeInput = newPointFormElement.querySelector('#longitude');
- const typeInput = newPointFormElement.querySelector('#type');
- const submitButton = newPointFormElement.querySelector('#submit-button');
+ const closeButton = newPointFormElement.querySelector("#map-poi-close-button");
+ const nameInput = newPointFormElement.querySelector('#map-poi-name');
+ const latitudeInput = newPointFormElement.querySelector('#map-poi-latitude');
+ 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);
@@ -362,7 +384,6 @@ class MapModal {
}
createFeatureForPoint(name, type, longitude, latitude) {
- console.info("Create feature for [" + longitude + "," + latitude + "," + name + "," + type + "]");
return {
"type": "Feature",
"geometry": {
@@ -412,31 +433,28 @@ class MapModal {
form.innerHTML = `
<div class="panel-heading">
<h4 class="panel-title">${this.translations.createNewLocation}</h4>
- <span id="close-button" style="position: absolute; top: 5px; right: 10px; cursor: pointer; font-size: 18px;">×</span>
+ <span id="map-poi-close-button" style="position: absolute; top: 5px; right: 10px; cursor: pointer; font-size: 18px;">×</span>
</div>
<div class="panel-body">
<div class="form-group">
- <label for="name">${this.translations.name}:</label>
- <input type="text" class="form-control" id="name" name="name">
+ <label for="map-poi-name">${this.translations.name}:</label>
+ <input type="text" class="form-control" id="map-poi-name" name="name">
</div>
<div class="form-group">
- <label for="latitude">${this.translations.latitude}:</label>
- <input type="text" class="form-control" id="latitude" name="latitude" value="${latitude.toFixed(this.coordinatePrecision)}">
+ <label for="map-poi-latitude">${this.translations.latitude}:</label>
+ <input type="text" class="form-control" id="map-poi-latitude" name="latitude" value="${latitude.toFixed(this.coordinatePrecision)}">
</div>
<div class="form-group">
- <label for="longitude">${this.translations.longitude}:</label>
- <input type="text" class="form-control" id="longitude" name="longitude" value="${longitude.toFixed(this.coordinatePrecision)}">
+ <label for="map-poi-longitude">${this.translations.longitude}:</label>
+ <input type="text" class="form-control" id="map-poi-longitude" name="longitude" value="${longitude.toFixed(this.coordinatePrecision)}">
</div>
<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>
+ <label for="map-poi-type">${this.translations.type}:</label>
+ <select class="form-control" id="map-poi-type" name="type">
</select>
</div>
<div class="form-group text-right">
- <button id="submit-button" class="btn btn-primary">${this.translations.submitLocation}</button>
+ <button id="map-poi-submit-button" class="btn btn-primary">${this.translations.submitLocation}</button>
</div>
</div>`;
this.mapContainerElement.appendChild(form);
@@ -506,8 +524,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