This commit is contained in:
partisan
parent
04fb53cf11
commit
43d7068c7a
48 changed files with 120 additions and 239 deletions
|
|
@ -171,80 +171,94 @@
|
|||
{{ if .Found }}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var map = L.map('map').setView([{{ .Latitude }}, {{ .Longitude }}], 13); // Set view to found coordinates
|
||||
var map = L.map('map').setView([{{ .Latitude }}, {{ .Longitude }}], 13);
|
||||
|
||||
// Base layers
|
||||
var streets = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
});
|
||||
// Streets
|
||||
var streets = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 20,
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
});
|
||||
|
||||
var satellite = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
});
|
||||
// Satellite (correct cords order is: {z}/{y}/{x})
|
||||
var satellite = L.tileLayer(
|
||||
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||||
maxZoom: 19,
|
||||
attribution: 'Tiles © Esri — Source: Esri, Earthstar Geographics, Maxar, GeoEye, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'
|
||||
}
|
||||
);
|
||||
|
||||
var esriSat = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{x}/{y}', {
|
||||
maxZoom: 19,
|
||||
attribution: 'Tiles © Esri'
|
||||
});
|
||||
// Topographic
|
||||
var topo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 17,
|
||||
attribution: '© <a href="https://opentopomap.org">OpenTopoMap</a> contributors'
|
||||
});
|
||||
|
||||
var topo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 17,
|
||||
attribution: '© OpenTopoMap contributors'
|
||||
});
|
||||
var baseMaps = {
|
||||
"{{ translate "streets" }}": streets,
|
||||
"{{ translate "satellite" }}": satellite,
|
||||
"{{ translate "topographic" }}": topo
|
||||
};
|
||||
|
||||
var baseMaps = {
|
||||
"{{ translate "streets" }}": streets,
|
||||
"{{ translate "satellite" }}": satellite,
|
||||
"{{ translate "esri_satellite" }}": esriSat,
|
||||
"{{ translate "topographic" }}": topo
|
||||
};
|
||||
streets.addTo(map);
|
||||
|
||||
streets.addTo(map); // Add default layer
|
||||
// Layer control
|
||||
L.control.layers(baseMaps).addTo(map);
|
||||
|
||||
// Layer control
|
||||
L.control.layers(baseMaps).addTo(map);
|
||||
// SVG Marker
|
||||
var svgIcon = L.divIcon({
|
||||
className: "",
|
||||
html: `
|
||||
<svg width="32" height="48" viewBox="0 0 32 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse cx="16" cy="17" rx="13" ry="13" fill="var(--blue)"/>
|
||||
<path d="M16 48c8-13 13-18 13-31a13 13 0 1 0-26 0c0 13 5 18 13 31z" fill="var(--blue)" stroke="var(--border)" stroke-width="2"/>
|
||||
<circle cx="16" cy="17" r="6" fill="var(--border)" />
|
||||
</svg>
|
||||
`,
|
||||
iconSize: [32, 48],
|
||||
iconAnchor: [16, 47],
|
||||
popupAnchor: [0, -40],
|
||||
});
|
||||
|
||||
// Marker with passed coordinates
|
||||
L.marker([{{ .Latitude }}, {{ .Longitude }}]).addTo(map)
|
||||
.bindPopup('{{ .Query }}');
|
||||
// Marker with passed coordinates
|
||||
L.marker([{{ .Latitude }}, {{ .Longitude }}], {icon: svgIcon})
|
||||
.addTo(map)
|
||||
.bindPopup('{{ .Query }}');
|
||||
|
||||
// Add scale control
|
||||
L.control.scale().addTo(map);
|
||||
|
||||
// Add scale control
|
||||
L.control.scale().addTo(map);
|
||||
// Add custom control for geolocation
|
||||
L.Control.geolocate = L.Control.extend({
|
||||
onAdd: function (map) {
|
||||
var div = L.DomUtil.create('div', 'leaflet-control-locate');
|
||||
div.title = '{{ translate "locate_me" }}';
|
||||
L.DomEvent.on(div, 'click', function () {
|
||||
map.locate({ setView: true, maxZoom: 16 });
|
||||
});
|
||||
return div;
|
||||
}
|
||||
});
|
||||
|
||||
// Add custom control for geolocation
|
||||
L.Control.geolocate = L.Control.extend({
|
||||
onAdd: function (map) {
|
||||
var div = L.DomUtil.create('div', 'leaflet-control-locate');
|
||||
div.title = '{{ translate "locate_me" }}';
|
||||
L.DomEvent.on(div, 'click', function () {
|
||||
map.locate({ setView: true, maxZoom: 16 });
|
||||
});
|
||||
return div;
|
||||
L.control.geolocate = function (opts) {
|
||||
return new L.Control.geolocate(opts);
|
||||
}
|
||||
});
|
||||
|
||||
L.control.geolocate = function (opts) {
|
||||
return new L.Control.geolocate(opts);
|
||||
}
|
||||
L.control.geolocate({ position: 'topright' }).addTo(map);
|
||||
|
||||
L.control.geolocate({ position: 'topright' }).addTo(map);
|
||||
// Geolocation function
|
||||
function onLocationFound(e) {
|
||||
var radius = e.accuracy / 2;
|
||||
L.marker(e.latlng).addTo(map)
|
||||
.bindPopup("{{ translate "you_are_within" }}" + radius + " {{ translate "meters_from_point" }}").openPopup();
|
||||
L.circle(e.latlng, radius).addTo(map);
|
||||
}
|
||||
|
||||
// Geolocation function
|
||||
function onLocationFound(e) {
|
||||
var radius = e.accuracy / 2;
|
||||
L.marker(e.latlng).addTo(map)
|
||||
.bindPopup("{{ translate "you_are_within" }}" + radius + " {{ translate "meters_from_point" }}").openPopup();
|
||||
L.circle(e.latlng, radius).addTo(map);
|
||||
}
|
||||
function onLocationError(e) {
|
||||
alert(e.message);
|
||||
}
|
||||
|
||||
function onLocationError(e) {
|
||||
alert(e.message);
|
||||
}
|
||||
|
||||
map.on('locationfound', onLocationFound);
|
||||
map.on('locationerror', onLocationError);
|
||||
map.on('locationfound', onLocationFound);
|
||||
map.on('locationerror', onLocationError);
|
||||
});
|
||||
</script>
|
||||
<script defer src="/static/js/minimenu.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue