jump to coordinate feature added to the header stripe
All checks were successful
default-pipeline default-pipeline #114
All checks were successful
default-pipeline default-pipeline #114
This commit is contained in:
parent
0f810bd2ba
commit
8bc3fda49b
@ -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;
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user