From 8bc3fda49b5554a5ccd4787ce1d21265d405addb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Tue, 27 Apr 2021 10:18:28 +0200 Subject: [PATCH 1/2] jump to coordinate feature added to the header stripe --- public/static/css/map_editor.css | 4 ++ public/static/js/map_editor.js | 79 ++++++++++++++++++++++++++++---- views/admin/map_editor.php | 6 ++- 3 files changed, 78 insertions(+), 11 deletions(-) diff --git a/public/static/css/map_editor.css b/public/static/css/map_editor.css index 59f2315..26a1b83 100644 --- a/public/static/css/map_editor.css +++ b/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; diff --git a/public/static/js/map_editor.js b/public/static/js/map_editor.js index 10901f2..9dfe4af 100644 --- a/public/static/js/map_editor.js +++ b/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; + } + }; + })(); diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php index b8d3d83..c6de87b 100644 --- a/views/admin/map_editor.php +++ b/views/admin/map_editor.php @@ -10,8 +10,12 @@ @extends(templates/layout_full) -@section(subheader) +@section(subheader) + + + From faaff3384195d7561a22097eb8095e836b619e72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Tue, 27 Apr 2021 17:48:45 +0200 Subject: [PATCH 2/2] removed #jumpForm and reformatted the code --- public/static/css/map_editor.css | 4 ---- public/static/js/map_editor.js | 20 ++++++++++---------- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/public/static/css/map_editor.css b/public/static/css/map_editor.css index 26a1b83..59f2315 100644 --- a/public/static/css/map_editor.css +++ b/public/static/css/map_editor.css @@ -7,10 +7,6 @@ z-index: 1; } -#jumpForm { - display: inline; -} - /* modify the cursor for the Leaflet map */ .leaflet-container { cursor: crosshair; diff --git a/public/static/js/map_editor.js b/public/static/js/map_editor.js index 9dfe4af..097b0d8 100644 --- a/public/static/js/map_editor.js +++ b/public/static/js/map_editor.js @@ -323,7 +323,7 @@ .on('click', function () { MapEditor.select(this); }); - + MapEditor.select(marker); } }; @@ -357,23 +357,23 @@ } }, - extractCoordinates: function(coordinatesStr) { - var coordinates = {valid: false, latlng: {lat: 0., lng: 0.}}; + extractCoordinates: function (coordinatesStr) { + var coordinates = { valid: false, latlng: { lat: 0., lng: 0. } }; var delimiters = [',', ' ', ';']; coordinatesStr = coordinatesStr.trim(); - if(coordinatesStr.length == 0) { + if (coordinatesStr.length == 0) { return coordinates; } - for(var delimiter of delimiters) { - if(coordinatesStr.indexOf(delimiter) != -1) { + 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) ) { + if (!isNaN(coordinates.latlng.lat) && !isNaN(coordinates.latlng.lng)) { coordinates.valid = true; return coordinates; } @@ -477,7 +477,7 @@ var coordinatesStr = document.getElementById("jumpCoordinates").value; var coordinates = Util.extractCoordinates(coordinatesStr); - if(coordinates.valid) { + if (coordinates.valid) { MapEditor.placeMarker(coordinates.latlng); } }; @@ -487,10 +487,10 @@ var coordinates = Util.extractCoordinates(coordinatesStr); var jumpButton = document.getElementById("jumpButton"); - if(coordinates.valid) { + if (coordinates.valid) { jumpButton.disabled = false; - if(e.key == 'Enter') { + if (e.key == 'Enter') { MapEditor.placeMarker(coordinates.latlng); } }