130 lines
2.9 KiB
HTML
130 lines
2.9 KiB
HTML
{{define "map-header"}}
|
|
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
|
|
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
|
|
<script>
|
|
var map = null;
|
|
var markers = [];
|
|
function setMapMarker(coords) {
|
|
console.log("Setting map marker", coords);
|
|
map.jumpTo({
|
|
center: coords,
|
|
zoom: 14,
|
|
});
|
|
markers.forEach((marker) => marker.remove());
|
|
addMarker(coords);
|
|
}
|
|
function addMarker(coords) {
|
|
const marker = new mapboxgl.Marker({
|
|
color: "#FF0000",
|
|
draggable: true
|
|
}).setLngLat(coords).addTo(map);
|
|
marker.on('dragend', onMapMarkerDragEnd(marker));
|
|
markers.push(marker);
|
|
}
|
|
function onMapMarkerDragEnd(marker) {
|
|
return function() {
|
|
const lngLat = marker.getLngLat();
|
|
displaySelectedCoordinates(lngLat);
|
|
}
|
|
}
|
|
function displaySelectedCoordinates(lngLat) {
|
|
const gpsDisplay = document.getElementById("gps-display");
|
|
gpsDisplay.classList.remove('d-none');
|
|
longitude.textContent = lngLat.lng;
|
|
latitude.textContent = lngLat.lat;
|
|
}
|
|
function onLoadMap() {
|
|
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
|
|
console.log("Setting up the map...");
|
|
mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
|
|
map = new mapboxgl.Map({
|
|
container: "map",
|
|
center: {
|
|
lat: 36.2,
|
|
lng: -119.2
|
|
},
|
|
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
|
zoom: 15,
|
|
});
|
|
map.addControl(new mapboxgl.GeolocateControl({
|
|
positionOptions: {
|
|
enableHighAccuracy: true
|
|
},
|
|
trackUserLocation: true,
|
|
showUserHeading: true
|
|
}));
|
|
map.on("load", function() {
|
|
console.log("Map post-load...");
|
|
updateMapWithLocation(map);
|
|
console.log("Map post-load done.");
|
|
});
|
|
console.log("Map init done.");
|
|
}
|
|
function updateMapWithLocation(map) {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(
|
|
// on success
|
|
function(position) {
|
|
console.log("Got location", position);
|
|
map.jumpTo({
|
|
center: {
|
|
lng: position.coords.longitude,
|
|
lat: position.coords.latitude,
|
|
},
|
|
zoom: 14,
|
|
});
|
|
addMarker([
|
|
position.coords.longitude,
|
|
position.coords.latitude,
|
|
]);
|
|
},
|
|
// on error
|
|
function(error) {
|
|
switch (error.code) {
|
|
case error.PERMISSION_DENIED:
|
|
console.log("permission denied");
|
|
break;
|
|
case error.POSITION_UNAVAILABLE:
|
|
console.log("location unavailable");
|
|
break;
|
|
case error.TIMEOUT:
|
|
console.log("request timed out");
|
|
break;
|
|
}
|
|
},
|
|
// options
|
|
{
|
|
enableHighAccuracy: true,
|
|
timeout: 10000,
|
|
maximumAge: 0
|
|
}
|
|
);
|
|
} else {
|
|
console.log("location is not supported");
|
|
}
|
|
}
|
|
window.addEventListener("load", onLoadMap);
|
|
</script>
|
|
<style>
|
|
.map-container {
|
|
background-color: #e9ecef;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
|
height: 500px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
#map {
|
|
height: 500px;
|
|
width:100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
#map img {
|
|
max-width: none;
|
|
min-width: 0px;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
{{end}}
|