2024-07-19 10:18:44 +00:00
|
|
|
import L from "leaflet";
|
|
|
|
|
2024-07-19 13:38:58 +00:00
|
|
|
type TargetLocation = [lat: number, lng: number] | null;
|
|
|
|
|
2024-07-19 10:18:44 +00:00
|
|
|
const mapEl = document.getElementById("map");
|
|
|
|
|
|
|
|
var targetLocationIcon = L.icon({
|
|
|
|
iconUrl: "goal.svg",
|
|
|
|
iconSize: [32, 32],
|
|
|
|
});
|
|
|
|
|
|
|
|
var currentLocationIcon = L.icon({
|
|
|
|
iconUrl: "blue-dot.png",
|
|
|
|
iconSize: [32, 32],
|
|
|
|
});
|
|
|
|
|
|
|
|
const targetLocation = mapEl?.dataset.targetLocation;
|
|
|
|
|
2024-07-19 13:38:58 +00:00
|
|
|
const data = targetLocation ? JSON.parse(targetLocation) : null;
|
2024-07-19 10:18:44 +00:00
|
|
|
|
2024-07-19 13:38:58 +00:00
|
|
|
const TARGET_LOCATION = data as TargetLocation;
|
2024-07-19 10:18:44 +00:00
|
|
|
|
2024-07-19 13:38:58 +00:00
|
|
|
var map = L.map("map");
|
2024-07-19 10:18:44 +00:00
|
|
|
|
2024-07-19 13:38:58 +00:00
|
|
|
if (TARGET_LOCATION) map.setView(TARGET_LOCATION, 13);
|
2024-07-19 10:18:44 +00:00
|
|
|
|
|
|
|
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
|
|
maxZoom: 19,
|
|
|
|
attribution:
|
|
|
|
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
|
|
|
}).addTo(map);
|
|
|
|
|
|
|
|
let currentLocationMarker: L.Marker;
|
|
|
|
|
2024-07-22 11:29:29 +00:00
|
|
|
export function onLocationSuccess(position: GeolocationPosition) {
|
2024-07-19 10:18:44 +00:00
|
|
|
const currentPos = {
|
2024-07-22 11:29:29 +00:00
|
|
|
lat: position.coords.latitude,
|
|
|
|
lng: position.coords.longitude,
|
2024-07-19 10:18:44 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
if (currentLocationMarker) {
|
|
|
|
currentLocationMarker.setLatLng(currentPos);
|
|
|
|
} else {
|
|
|
|
currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
|
|
|
|
currentLocationMarker.addTo(map);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-07-22 11:29:29 +00:00
|
|
|
const CurrentLocation = L.Control.extend({
|
2024-07-19 10:18:44 +00:00
|
|
|
onAdd: function (map: L.Map) {
|
|
|
|
const locationButton = document.createElement("button");
|
|
|
|
|
|
|
|
locationButton.textContent = "Konumuma Git";
|
|
|
|
|
|
|
|
locationButton.classList.add("custom-map-control-button");
|
|
|
|
|
|
|
|
locationButton.type = "button";
|
|
|
|
|
2024-07-22 11:29:29 +00:00
|
|
|
locationButton.addEventListener("click", () => {
|
2024-07-19 10:18:44 +00:00
|
|
|
if (currentLocationMarker) {
|
|
|
|
map.setView(currentLocationMarker.getLatLng(), 12);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return locationButton;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2024-07-22 11:29:29 +00:00
|
|
|
const GoToTargetLocation = L.Control.extend({
|
2024-07-19 10:18:44 +00:00
|
|
|
onAdd: function (map: L.Map) {
|
|
|
|
const locationButton = document.createElement("button");
|
|
|
|
|
|
|
|
locationButton.textContent = "Hedefe Git";
|
|
|
|
|
|
|
|
locationButton.classList.add("custom-map-control-button");
|
|
|
|
|
|
|
|
locationButton.addEventListener("click", () => {
|
2024-07-19 13:38:58 +00:00
|
|
|
if (TARGET_LOCATION) map.setView(TARGET_LOCATION, 18);
|
2024-07-19 10:18:44 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
return locationButton;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2024-07-22 11:29:29 +00:00
|
|
|
const goToCurrentLocationControl = new CurrentLocation({
|
2024-07-19 10:18:44 +00:00
|
|
|
position: "bottomleft",
|
|
|
|
});
|
|
|
|
|
2024-07-22 11:29:29 +00:00
|
|
|
const targetLocationControl = new GoToTargetLocation({
|
2024-07-19 10:18:44 +00:00
|
|
|
position: "bottomleft",
|
|
|
|
});
|
|
|
|
|
2024-07-19 13:38:58 +00:00
|
|
|
function addTargetLocationMarker(target: TargetLocation) {
|
|
|
|
if (target) {
|
|
|
|
L.marker(target, { icon: targetLocationIcon }).addTo(map);
|
|
|
|
|
|
|
|
L.circle(target, {
|
|
|
|
color: "blue",
|
|
|
|
fillColor: "#30f",
|
|
|
|
fillOpacity: 0.2,
|
|
|
|
radius: 50,
|
|
|
|
}).addTo(map);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-07-19 10:18:44 +00:00
|
|
|
function initLocationControls() {
|
|
|
|
targetLocationControl.addTo(map);
|
2024-07-22 11:29:29 +00:00
|
|
|
goToCurrentLocationControl.addTo(map);
|
2024-07-19 10:18:44 +00:00
|
|
|
}
|
|
|
|
|
2024-07-19 13:38:58 +00:00
|
|
|
addTargetLocationMarker(TARGET_LOCATION);
|
2024-07-19 10:18:44 +00:00
|
|
|
initLocationControls();
|