jump to coordinate feature added to the header stripe

public/static/css/map_editor.css

@@ -7,6 +7,10 @@
     z-index: 1;
 }
 
+#jumpForm {
+    display: inline;
+}
+
 /* modify the cursor for the Leaflet map */
 .leaflet-container {
     cursor: crosshair;

public/static/js/map_editor.js

@@ -310,6 +310,21 @@
                 var placeId = addedPlaces[i].id;
                 places[tempId].id = placeId;
             }
+        },
+
+        // TODO: check whether marker is already existing on the map for the coordinates
+        //       or alternatively block saving for matching coordinates
+        placeMarker: function (latlng) {
+            var marker = L.marker(latlng, {
+                icon: IconCollection.iconBlue,
+                zIndexOffset: 2000
+            })
+                .addTo(MapEditor.map)
+                .on('click', function () {
+                    MapEditor.select(this);
+                });
+    
+            MapEditor.select(marker);
         }
     };
 
@@ -340,6 +355,32 @@
             } else {
                 return { ppi: 72, tileSize: 512, zoomOffset: -1, minZoom: 2, maxZoom: 20 };
             }
+        },
+
+        extractCoordinates: function(coordinatesStr) {
+            var coordinates = {valid: false, latlng: {lat: 0., lng: 0.}};
+            var delimiters = [',', ' ', ';'];
+
+            coordinatesStr = coordinatesStr.trim();
+            if(coordinatesStr.length == 0) {
+                return coordinates;
+            }
+
+            for(var delimiter of delimiters) {
+                if(coordinatesStr.indexOf(delimiter) != -1) {
+
+                    var coordinatesArr = coordinatesStr.split(delimiter);
+                    coordinates.latlng.lat = parseFloat(coordinatesArr[0]);
+                    coordinates.latlng.lng = parseFloat(coordinatesArr[1]);
+
+                    if( !isNaN(coordinates.latlng.lat) && !isNaN(coordinates.latlng.lng) ) {
+                        coordinates.valid = true;
+                        return coordinates;
+                    }
+                }
+            }
+
+            return coordinates;
         }
     };
 
@@ -348,16 +389,7 @@
     });
 
     MapEditor.map.on('click', function (e) {
-        var marker = L.marker(e.latlng, {
-            icon: IconCollection.iconBlue,
-            zIndexOffset: 2000
-        })
-            .addTo(MapEditor.map)
-            .on('click', function () {
-                MapEditor.select(this);
-            });
-
-        MapEditor.select(marker);
+        MapEditor.placeMarker(e.latlng);
     });
 
     var highResData = Util.getHighResData();
@@ -440,4 +472,31 @@
     document.getElementById('deleteButton').onclick = function () {
         MapEditor.deletePlace();
     };
+
+    document.getElementById('jumpButton').onclick = function (e) {
+        var coordinatesStr = document.getElementById("jumpCoordinates").value;
+        var coordinates = Util.extractCoordinates(coordinatesStr);
+
+        if(coordinates.valid) {
+            MapEditor.placeMarker(coordinates.latlng);
+        }
+    };
+
+    document.getElementById('jumpCoordinates').onkeyup = function (e) {
+        var coordinatesStr = document.getElementById("jumpCoordinates").value;
+        var coordinates = Util.extractCoordinates(coordinatesStr);
+        var jumpButton = document.getElementById("jumpButton");
+
+        if(coordinates.valid) {
+            jumpButton.disabled = false;
+
+            if(e.key == 'Enter') {
+                MapEditor.placeMarker(coordinates.latlng);
+            }
+        }
+        else {
+            jumpButton.disabled = true;
+        }
+    };
+
 })();

views/admin/map_editor.php

@@ -10,8 +10,12 @@
 
 @extends(templates/layout_full)
 
-@section(subheader)
+@section(subheader) 
            <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
+        --><span>
+               <input type="text" id="jumpCoordinates" placeholder="Insert coordinates here" />
+               <button id="jumpButton" disabled >Jump</button>
+           </span><!--
         --><span><!--
             <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
             --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">