vadikas/SARBase
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added fullscreen mode for the map, coordinates under the mouse in the right bottom corner, copy of the coodinates on right-click and crosshair cursor as default.

Browse Source
This commit is contained in:
Vadim Likholetov 2023-12-10 15:46:54 +02:00
parent 4c3e6b314d
commit c6e8c1e202
2 changed files with 45 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
templates/jscripts.html
View File

@ -3,13 +3,14 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.css"/>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' />
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
@ -27,4 +28,8 @@
.comment-text {
white-space: pre-line;
}
.leaflet-container {
cursor: crosshair;
}
</style>

40
templates/sar_details.html
View File

@ -323,7 +323,11 @@
var gpxData = {{ gpx_ids | tojson }};
var map = L.map('map').setView([{{ sar.SARCall.latitude }}, {{ sar.SARCall.longitude }}], 13);
var map = L.map('map',
{
fullscreenControl: true,
}
).setView([{{ sar.SARCall.latitude }}, {{ sar.SARCall.longitude }}], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
@ -335,6 +339,25 @@
loadAndDisplayGPX(id);
});
// context menu
var coordControl = L.control({position: 'bottomright'});
map.on('contextmenu', function (e) {
var coords = e.latlng.lat.toFixed(5) + ", " + e.latlng.lng.toFixed(5);
// Create a temporary input to copy the text.
var tempInput = document.createElement('input');
document.body.appendChild(tempInput);
tempInput.value = coords;
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
coordControl.getContainer().innerHTML = "<strong>To clipboard: </strong> " + e.latlng.lat.toFixed(5) + ", " + e.latlng.lng.toFixed(5);
});
// Initialize drawing capabilities
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
@ -353,6 +376,21 @@
});
map.addControl(drawControl);
// Create a control for displaying the coordinates.
coordControl.onAdd = function (map) {
this._container = L.DomUtil.create('div', 'leaflet-control-coordinates');
return this._container;
}
coordControl.addTo(map);
// Update the control when the mouse is moved.
map.on('mousemove', function (e) {
coordControl.getContainer().innerHTML = " " + e.latlng.lat.toFixed(5) + ", " + e.latlng.lng.toFixed(5);
});
map.on('draw:created', function (e) {
var layer = e.layer;