diff --git a/src/components/Leaflet/constants.ts b/src/components/Leaflet/constants.ts new file mode 100644 index 0000000..c7eeee9 --- /dev/null +++ b/src/components/Leaflet/constants.ts @@ -0,0 +1,10 @@ +import L from "leaflet" + +export const openstreetmapTiles = L.tileLayer( + "https://tile.openstreetmap.org/{z}/{x}/{y}.png", + { + maxZoom: 19, + attribution: + '© OpenStreetMap', + } +) diff --git a/src/components/Leaflet/geolocation.ts b/src/components/Leaflet/geolocation.ts new file mode 100644 index 0000000..b3ac879 --- /dev/null +++ b/src/components/Leaflet/geolocation.ts @@ -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 } diff --git a/src/components/Leaflet/icons.ts b/src/components/Leaflet/icons.ts new file mode 100644 index 0000000..e068ca3 --- /dev/null +++ b/src/components/Leaflet/icons.ts @@ -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 } diff --git a/src/components/LockedContent/domUtils.ts b/src/components/LockedContent/domUtils.ts index 2ca7932..19f9fc2 100644 --- a/src/components/LockedContent/domUtils.ts +++ b/src/components/LockedContent/domUtils.ts @@ -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, } diff --git a/src/components/LockedContent/geolocation.ts b/src/components/LockedContent/geolocation.ts index 8040505..406da74 100644 --- a/src/components/LockedContent/geolocation.ts +++ b/src/components/LockedContent/geolocation.ts @@ -16,6 +16,7 @@ function locationSuccessCallback( position: GeolocationPosition, targetPosition: LatLngTuple ) { + // Enable current location control removeClasses("current-location-control", "disabled-button") const newPosition = position.coords diff --git a/src/scripts/initSelectionMap.js b/src/scripts/initSelectionMap.js deleted file mode 100644 index 65102ad..0000000 --- a/src/scripts/initSelectionMap.js +++ /dev/null @@ -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: - '© OpenStreetMap', -}).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." -}) diff --git a/src/scripts/initSelectionMap.ts b/src/scripts/initSelectionMap.ts new file mode 100644 index 0000000..0e185ce --- /dev/null +++ b/src/scripts/initSelectionMap.ts @@ -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." + ) +})