jump to coordinate feature added to the header stripe
All checks were successful
default-pipeline default-pipeline #114

This commit is contained in:
Balázs Vigh 2021-04-27 10:18:28 +02:00
parent 0f810bd2ba
commit 8bc3fda49b
3 changed files with 78 additions and 11 deletions

View File

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

View File

@ -310,6 +310,21 @@
var placeId = addedPlaces[i].id; var placeId = addedPlaces[i].id;
places[tempId].id = placeId; 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 { } else {
return { ppi: 72, tileSize: 512, zoomOffset: -1, minZoom: 2, maxZoom: 20 }; 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) { MapEditor.map.on('click', function (e) {
var marker = L.marker(e.latlng, { MapEditor.placeMarker(e.latlng);
icon: IconCollection.iconBlue,
zIndexOffset: 2000
})
.addTo(MapEditor.map)
.on('click', function () {
MapEditor.select(this);
});
MapEditor.select(marker);
}); });
var highResData = Util.getHighResData(); var highResData = Util.getHighResData();
@ -440,4 +472,31 @@
document.getElementById('deleteButton').onclick = function () { document.getElementById('deleteButton').onclick = function () {
MapEditor.deletePlace(); 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;
}
};
})(); })();

View File

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