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

feat: Ensure new location form is displayed within map boundaries

parent 45e0dd1e
No related branches found
No related tags found
1 merge request!191Add map module and Open-Meteo support
...@@ -288,7 +288,7 @@ class MapModal { ...@@ -288,7 +288,7 @@ class MapModal {
const containerPoint = this.map.latLngToContainerPoint(latlng); const containerPoint = this.map.latLngToContainerPoint(latlng);
this.selectedNewPointMarker = circleMarker(latlng, this.styleOfSelectedPointMarker(true)).addTo(this.map); this.selectedNewPointMarker = circleMarker(latlng, this.styleOfSelectedPointMarker(true)).addTo(this.map);
const newPointFormElement = this.addHtmlElementNewPointForm(containerPoint.x + 25, containerPoint.y - 25, latlng.lat, latlng.lng) const newPointFormElement = this.addHtmlElementNewPointForm(containerPoint.x, containerPoint.y, latlng.lat, latlng.lng)
DomEvent.disableClickPropagation(newPointFormElement); DomEvent.disableClickPropagation(newPointFormElement);
document.addEventListener('click', this.handleClickOutsidePointForm.bind(this), true); document.addEventListener('click', this.handleClickOutsidePointForm.bind(this), true);
...@@ -390,43 +390,57 @@ class MapModal { ...@@ -390,43 +390,57 @@ class MapModal {
* @returns {Element} * @returns {Element}
*/ */
addHtmlElementNewPointForm(positionX, positionY, latitude, longitude) { addHtmlElementNewPointForm(positionX, positionY, latitude, longitude) {
const html = ` const form = document.createElement("div");
<div id="new-point-form" class="panel panel-default" style="top: ${positionY}px; left: ${positionX}px;"> form.id="new-point-form"
<div class="panel-heading"> form.classList.add("panel");
<h4 class="panel-title">${this.translations.createNewLocation}</h4> form.classList.add("panel-default");
<span id="close-button" style="position: absolute; top: 5px; right: 10px; cursor: pointer; font-size: 18px;">&times;</span>
// Adjust position so that the form is always displayed within the map
const mapWidth = this.mapModalElement.offsetWidth;
const mapHeight = this.mapModalElement.offsetHeight;
const formWidth = 200; // approximately
const formHeight = 400; // approximately
if (positionX + formWidth > mapWidth) {
positionX = mapWidth - formWidth - 10; // 10px padding from the edge
}
if (positionY + formHeight > mapHeight) {
positionY = mapHeight - formHeight - 10; // 10px padding from the edge
}
form.style.left = `${positionX}px`;
form.style.top = `${positionY}px`;
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;">&times;</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">
</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)}">
</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)}">
</div> </div>
<div class="panel-body"> <div class="form-group">
<div class="form-group"> <label for="poiTypeSelect">${this.translations.type}:</label>
<label for="name">${this.translations.name}:</label> <select class="form-control" id="type" name="type">
<input type="text" class="form-control" id="name" name="name"> <option value="2">${this.typeNameMap[2]}</option>
</div> <option value="3">${this.typeNameMap[3]}</option>
<div class="form-group"> <option value="5">${this.typeNameMap[5]}</option>
<label for="latitude">${this.translations.latitude}:</label> </select>
<input type="text" class="form-control" id="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)}">
</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>
</select>
</div>
<div class="form-group text-right">
<button id="submit-button" class="btn btn-primary">${this.translations.submitLocation}</button>
</div>
</div> </div>
<div class="form-group text-right">
<button id="submit-button" class="btn btn-primary">${this.translations.submitLocation}</button>
</div>
</div>`; </div>`;
const tmpContainer = document.createElement("div"); this.mapContainerElement.appendChild(form);
tmpContainer.innerHTML = html; return form;
const htmlElement = tmpContainer.querySelector('#new-point-form');
this.mapContainerElement.appendChild(htmlElement);
return htmlElement;
} }
/** /**
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment