Skip to content
Snippets Groups Projects
Commit d90cab7a authored by Lene Wasskog's avatar Lene Wasskog
Browse files

feat: Remove bottom-left info panel for selected point, improve popup content and button labels

parent 025e5d44
No related branches found
No related tags found
1 merge request!191Add map module and Open-Meteo support
...@@ -35,13 +35,11 @@ class MapModal { ...@@ -35,13 +35,11 @@ class MapModal {
static TRANSLATIONS = { static TRANSLATIONS = {
nb: { nb: {
selectLocation: 'Velg sted', selectLocation: 'Velg sted',
saveLocation: 'Lagre nytt sted',
createNewLocation: 'Opprett nytt sted', createNewLocation: 'Opprett nytt sted',
name: 'Navn', name: 'Navn',
latitude: 'Breddegrad', latitude: 'Breddegrad',
longitude: 'Lengdegrad', longitude: 'Lengdegrad',
type: 'Type', type: 'Type',
submitLocation: 'OK',
zoomToLocation: 'Zoom til meg', zoomToLocation: 'Zoom til meg',
geolocationNotSupported: 'Geolokalisering støttes ikke av denne nettleseren', geolocationNotSupported: 'Geolokalisering støttes ikke av denne nettleseren',
geolocationFailed: 'Fant ikke din posisjon', geolocationFailed: 'Fant ikke din posisjon',
...@@ -56,13 +54,11 @@ class MapModal { ...@@ -56,13 +54,11 @@ class MapModal {
}, },
en: { en: {
selectLocation: 'Select location', selectLocation: 'Select location',
saveLocation: 'Save new location',
createNewLocation: 'Create New Location', createNewLocation: 'Create New Location',
name: 'Name', name: 'Name',
latitude: 'Latitude', latitude: 'Latitude',
longitude: 'Longitude', longitude: 'Longitude',
type: 'Type', type: 'Type',
submitLocation: 'OK',
zoomToLocation: 'Zoom to My Location', 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', geolocationFailed: 'Unable to retrieve your location',
...@@ -110,11 +106,6 @@ class MapModal { ...@@ -110,11 +106,6 @@ class MapModal {
this.selectedExistingPointMarker = null; this.selectedExistingPointMarker = null;
this.coordinatePrecision = 6; this.coordinatePrecision = 6;
this.displaySelectedFeatureInfoControl = new DisplaySelectedFeatureInfoControl({
translations: this.translations,
onSubmit: (feature) => {this.confirmSelection(feature)},
coordinatePrecision: this.coordinatePrecision
});
this.zoomToLocationControl = new ZoomToLocationControl({ this.zoomToLocationControl = new ZoomToLocationControl({
translations: this.translations translations: this.translations
}); });
...@@ -181,9 +172,8 @@ class MapModal { ...@@ -181,9 +172,8 @@ class MapModal {
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19 maxZoom: 19
}).addTo(this.map); }).addTo(this.map);
console.info("Create map " + this.mapContainerId + " centered on (" + latitude + "," + longitude + ") with points", this.geoJsonData); console.info("Create map " + this.mapContainerId + " centered on (" + latitude + "," + longitude + ") with points", this.geoJsonData ? this.geoJsonData.features : null);
this.map.addControl(this.displaySelectedFeatureInfoControl);
this.map.addControl(this.zoomToLocationControl); this.map.addControl(this.zoomToLocationControl);
this.map.addControl(this.closeMapControl); this.map.addControl(this.closeMapControl);
...@@ -226,7 +216,6 @@ class MapModal { ...@@ -226,7 +216,6 @@ class MapModal {
if(this.selectedExistingPointMarker === layer) { if(this.selectedExistingPointMarker === layer) {
layer.closePopup(); layer.closePopup();
this.removeSelectedPointMarkerIfExists(); this.removeSelectedPointMarkerIfExists();
this.displaySelectedFeatureInfoControl.updateInfoPanel();
} }
layer.unbindPopup(); layer.unbindPopup();
layer.off('click'); layer.off('click');
...@@ -236,7 +225,6 @@ class MapModal { ...@@ -236,7 +225,6 @@ class MapModal {
layer.bindPopup(this.popupContent(layer.feature)); layer.bindPopup(this.popupContent(layer.feature));
layer.on('click', () => { layer.on('click', () => {
this.displaySelectedPoint(layer.feature, layer, false); this.displaySelectedPoint(layer.feature, layer, false);
this.displaySelectedFeatureInfoControl.updateInfoPanel(layer.feature)
}); });
} }
...@@ -245,7 +233,6 @@ class MapModal { ...@@ -245,7 +233,6 @@ class MapModal {
const selectedLayer = this.getLayerById(pointOfInterestId); const selectedLayer = this.getLayerById(pointOfInterestId);
this.displaySelectedPoint(selectedFeature, selectedLayer, true); this.displaySelectedPoint(selectedFeature, selectedLayer, true);
selectedLayer.openPopup(); selectedLayer.openPopup();
this.displaySelectedFeatureInfoControl.updateInfoPanel(selectedFeature);
} }
getFeatureById(pointOfInterestId) { getFeatureById(pointOfInterestId) {
...@@ -301,7 +288,6 @@ class MapModal { ...@@ -301,7 +288,6 @@ class MapModal {
this.removeSelectedPointMarkerIfExists(); this.removeSelectedPointMarkerIfExists();
this.removeNewPointMarkerIfExists(); this.removeNewPointMarkerIfExists();
this.closeNewPointFormIfOpen(); this.closeNewPointFormIfOpen();
this.displaySelectedFeatureInfoControl.updateInfoPanel(null);
// Calculate the pixel position from the map's click event // Calculate the pixel position from the map's click event
const containerPoint = this.map.latLngToContainerPoint(latlng); const containerPoint = this.map.latLngToContainerPoint(latlng);
...@@ -393,7 +379,23 @@ class MapModal { ...@@ -393,7 +379,23 @@ class MapModal {
} }
popupContent(feature) { popupContent(feature) {
return `<div id='poi-popup'>${feature.properties.pointOfInterestName}</div>`; const popupElement = document.createElement("div");
popupElement.id = 'poi-popup';
const name = feature.properties.pointOfInterestName;
const type = this.translations['poiType' + feature.properties.pointOfInterestTypeId];
const latitude = feature.geometry.coordinates[1].toFixed(this.coordinatePrecision);
const longitude = feature.geometry.coordinates[0].toFixed(this.coordinatePrecision);
const buttonLabel = this.translations.selectLocation;
popupElement.innerHTML = `<h4>${name}</h4>
<b>${this.translations.latitude}</b> ${latitude}<br>
<b>${this.translations.longitude}</b> ${longitude}<br>
<b>${this.translations.type}</b> ${type}<br><br>
<button id="submit-button" class="btn btn-primary">${buttonLabel}</button>`
const buttonElement = popupElement.querySelector("#submit-button");
buttonElement.addEventListener('click', () => {
this.confirmSelection(feature);
});
return popupElement;
} }
/** /**
...@@ -452,7 +454,7 @@ class MapModal { ...@@ -452,7 +454,7 @@ class MapModal {
</select> </select>
</div> </div>
<div class="form-group text-right"> <div class="form-group text-right">
<button id="map-poi-submit-button" class="btn btn-primary">${this.translations.submitLocation}</button> <button id="map-poi-submit-button" class="btn btn-primary">${this.translations.selectLocation}</button>
</div> </div>
</div>`; </div>`;
this.mapContainerElement.appendChild(form); this.mapContainerElement.appendChild(form);
...@@ -489,55 +491,6 @@ class MapModal { ...@@ -489,55 +491,6 @@ class MapModal {
} }
const DisplaySelectedFeatureInfoControl = Control.extend({
options: {
position: 'bottomleft',
onSubmit: undefined,
translations: {},
coordinatePrecision: 5
},
onAdd: function (map) {
const container = DomUtil.create('div', 'leaflet-bar leaflet-control hidden');
container.id = 'selected-point-info-panel';
const infoMessageDiv = DomUtil.create('div', 'info-message', container);
infoMessageDiv.id = 'info-message';
const button = DomUtil.create('button', 'btn btn-primary', container);
button.id = 'confirm-button';
return container;
},
updateInfoPanel: function (feature) {
const container = this._container;
const infoMessageDiv = container.querySelector('#info-message');
const confirmButton = container.querySelector('#confirm-button');
if (feature) {
const name = feature.properties.pointOfInterestName;
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}<br>
<b>${this.options.translations.type}</b> ${type}`
confirmButton.innerHTML = feature.properties.pointOfInterestId
? this.options.translations.selectLocation
: this.options.translations.saveLocation;
confirmButton.onclick = () => {
this.options.onSubmit(feature);
};
container.classList.remove('hidden');
} else {
container.classList.add('hidden');
}
}
});
const ZoomToLocationControl = Control.extend({ const ZoomToLocationControl = Control.extend({
options: { options: {
position: 'topleft', position: 'topleft',
...@@ -669,8 +622,6 @@ const LegendControl = Control.extend({ ...@@ -669,8 +622,6 @@ const LegendControl = Control.extend({
itemDiv.style.textDecoration = isVisible ? "none" : "line-through solid black 2px"; itemDiv.style.textDecoration = isVisible ? "none" : "line-through solid black 2px";
} }
}); });
// Export the module // Export the module
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment