diff --git a/src/main/webapp/js/mapModal.js b/src/main/webapp/js/mapModal.js index 1a773e93d00f76be7ddef9bcfbfeae33490707c4..b5876c773dccebc3f433444db61f575973f23762 100644 --- a/src/main/webapp/js/mapModal.js +++ b/src/main/webapp/js/mapModal.js @@ -288,7 +288,7 @@ class MapModal { const containerPoint = this.map.latLngToContainerPoint(latlng); 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); document.addEventListener('click', this.handleClickOutsidePointForm.bind(this), true); @@ -390,43 +390,57 @@ class MapModal { * @returns {Element} */ addHtmlElementNewPointForm(positionX, positionY, latitude, longitude) { - const html = ` - <div id="new-point-form" class="panel panel-default" style="top: ${positionY}px; left: ${positionX}px;"> - <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> + const form = document.createElement("div"); + form.id="new-point-form" + form.classList.add("panel"); + form.classList.add("panel-default"); + + // 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;">×</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 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 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 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>`; - const tmpContainer = document.createElement("div"); - tmpContainer.innerHTML = html; - const htmlElement = tmpContainer.querySelector('#new-point-form'); - this.mapContainerElement.appendChild(htmlElement); - return htmlElement; + this.mapContainerElement.appendChild(form); + return form; } /**