reefactor: initSelectionMap

This commit is contained in:
log101 2024-07-27 15:13:52 +03:00
parent 9c74cc7263
commit 7cb50bd982
7 changed files with 174 additions and 111 deletions

View File

@ -0,0 +1,10 @@
import L from "leaflet"
export const openstreetmapTiles = L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 19,
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}
)

View File

@ -0,0 +1,18 @@
import L from "leaflet"
function updateMarkerLocation(
marker: L.Marker,
icon: L.Icon,
position: L.LatLng,
map: L.Map
) {
if (marker) {
marker.setLatLng(position)
} else {
marker = L.marker(position, { icon })
marker.addTo(map)
}
return marker
}
export { updateMarkerLocation }

View File

@ -0,0 +1,13 @@
import L from "leaflet"
var targetLocationIcon = L.icon({
iconUrl: "goal.svg",
iconSize: [32, 32],
})
var currentLocationIcon = L.icon({
iconUrl: "blue-dot.png",
iconSize: [32, 32],
})
export { targetLocationIcon, currentLocationIcon }

View File

@ -6,6 +6,12 @@ function updateText(elemId: string, text: string) {
else console.error("Element could not be found!")
}
function updateInputValue(elemId: string, value: string) {
const elem = document.getElementById(elemId) as HTMLInputElement
if (elem) elem.value = value
else console.error("Element could not be found!")
}
function toggleClass(elemId: string, className: string) {
const elem = document.getElementById(elemId)
if (elem) elem.classList.toggle(className)
@ -48,6 +54,7 @@ export {
removeElement,
toggleClass,
updateText,
updateInputValue,
revealContent,
addAttribute,
}

View File

@ -16,6 +16,7 @@ function locationSuccessCallback(
position: GeolocationPosition,
targetPosition: LatLngTuple
) {
// Enable current location control
removeClasses("current-location-control", "disabled-button")
const newPosition = position.coords

View File

@ -1,111 +0,0 @@
import { onLocationError } from "@/lib/error"
import { toast } from "@/lib/utils"
var map = L.map("map").setView([41.024857599001905, 28.940787550837882], 10)
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map)
let targetLocationMarker
let targetLocationCircle
var targetLocationIcon = L.icon({
iconUrl: "goal.svg",
iconSize: [32, 32],
})
var currentLocationIcon = L.icon({
iconUrl: "blue-dot.png",
iconSize: [32, 32],
})
let currentLocationMarker
function startWatchingLocation() {
map.locate({ watch: true })
}
function onLocationSuccess(locationEvent) {
const position = locationEvent.latlng
const currentPos = {
lat: position.lat,
lng: position.lng,
}
if (currentLocationMarker) {
currentLocationMarker.setLatLng(currentPos)
} else {
currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon })
currentLocationMarker.addTo(map)
}
}
map.on("locationerror", onLocationError)
map.on("locationfound", onLocationSuccess)
L.Control.AskPermisson = L.Control.extend({
onAdd: function (map) {
const locationButton = document.createElement("button")
locationButton.textContent = "Konum İzni Ver"
locationButton.classList.add("custom-map-control-button")
locationButton.type = "button"
locationButton.addEventListener("click", (ev) => {
if (locationButton.textContent != "Konumuma Git") {
startWatchingLocation()
locationButton.textContent = "Konumuma Git"
} else {
if (currentLocationMarker) {
map.setView(currentLocationMarker.getLatLng(), 12)
} else {
toast(
"Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin."
)
}
}
L.DomEvent.stopPropagation(ev)
})
return locationButton
},
})
L.control.askPermission = function (opts) {
return new L.Control.AskPermisson(opts)
}
L.control.askPermission({ position: "bottomleft" }).addTo(map)
map.on("click", (e) => {
if (targetLocationMarker) {
targetLocationMarker.setLatLng(e.latlng)
targetLocationCircle.setLatLng(e.latlng)
} else {
targetLocationMarker = L.marker(e.latlng, {
icon: targetLocationIcon,
}).addTo(map)
targetLocationCircle = L.circle(e.latlng, {
color: "blue",
fillColor: "#30f",
fillOpacity: 0.2,
radius: 50,
}).addTo(map)
}
const pos = targetLocationMarker.getLatLng()
document.getElementById("coordinates").innerText =
`${pos.lat}. Enlem, ${pos.lng}. Boylam`
document.getElementById("geolocation-input").value = `${pos.lat},${pos.lng}`
document.getElementById("location-selected-confirmation").innerText =
"Konum seçildi, bir sonraki adıma geçebilirsiniz."
})

View File

@ -0,0 +1,125 @@
import L from "leaflet"
import { openstreetmapTiles } from "@/components/Leaflet/constants"
import { toast } from "@/lib/utils"
import {
currentLocationIcon,
targetLocationIcon,
} from "@/components/Leaflet/icons"
import {
addClasses,
removeClasses,
updateInputValue,
updateText,
} from "@/components/LockedContent/domUtils"
import { updateMarkerLocation } from "@/components/Leaflet/geolocation"
var map = L.map("map").setView([41.024857599001905, 28.940787550837882], 10)
openstreetmapTiles.addTo(map)
let targetLocationMarker: L.Marker
let targetLocationCircle: L.Circle
let currentLocationMarker: L.Marker
map.on("locationerror", () =>
toast(
"Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin."
)
)
map.on("locationfound", (ev) => {
removeClasses("current-location-control", "disabled-button")
addClasses("ask-permission-control", "disabled-button")
currentLocationMarker = updateMarkerLocation(
currentLocationMarker,
currentLocationIcon,
ev.latlng,
map
)
})
const CurrentLocationControl = L.Control.extend({
onAdd: function (map: L.Map) {
const locationButton = document.createElement("button")
locationButton.textContent = "Konumuma Git"
locationButton.classList.add("custom-map-control-button", "disabled-button")
locationButton.type = "button"
locationButton.id = "current-location-control"
locationButton.addEventListener("click", (ev) => {
console.log(currentLocationMarker)
if (currentLocationMarker) {
map.setView(currentLocationMarker.getLatLng(), 12)
} else {
toast("Konumunuza erişilemiyor, lütfen biraz bekleyip tekrar deneyin.")
}
L.DomEvent.stopPropagation(ev)
})
return locationButton
},
})
const AskPermissonControl = L.Control.extend({
onAdd: function (map: L.Map) {
const locationButton = document.createElement("button")
locationButton.textContent = "Konum İzni Ver"
locationButton.classList.add("custom-map-control-button")
locationButton.type = "button"
locationButton.id = "ask-permission-control"
locationButton.addEventListener("click", (ev) => {
map.locate({ watch: true })
L.DomEvent.stopPropagation(ev)
})
return locationButton
},
})
const askPermissionControl = new AskPermissonControl({ position: "bottomleft" })
const currentLocationControl = new CurrentLocationControl({
position: "bottomleft",
})
askPermissionControl.addTo(map)
currentLocationControl.addTo(map)
map.on("click", (e) => {
if (targetLocationMarker) {
targetLocationMarker.setLatLng(e.latlng)
targetLocationCircle.setLatLng(e.latlng)
} else {
targetLocationMarker = L.marker(e.latlng, {
icon: targetLocationIcon,
}).addTo(map)
targetLocationCircle = L.circle(e.latlng, {
color: "blue",
fillColor: "#30f",
fillOpacity: 0.2,
radius: 50,
}).addTo(map)
}
const pos = targetLocationMarker.getLatLng()
updateText("coordinates", `${pos.lat}. Enlem, ${pos.lng}. Boylam`)
updateInputValue("geolocation-input", `${pos.lat},${pos.lng}`)
updateText(
"location-selected-confirmation",
"Konum seçildi, bir sonraki adıma geçebilirsiniz."
)
})