diff --git a/src/components/leaflet-map.ts b/src/components/leaflet-map.ts
index 0819bef..61034b1 100644
--- a/src/components/leaflet-map.ts
+++ b/src/components/leaflet-map.ts
@@ -32,20 +32,12 @@ export class LeafletMap extends LitElement {
@query("#mapid")
_mapElement!: HTMLDivElement;
- @query("#go-to-target-control-button")
- _goToTargetButton!: HTMLButtonElement;
-
- @query("#ask-permission-control-button")
- _askPermissionButton!: HTMLButtonElement;
-
// Properties and states
@property({ type: Object, noAccessor: true }) targetPosition?: LatLngTuple;
@property({ type: Object })
currentPosition?: LatLngTuple;
- @state()
protected _map?: L.Map;
- @state()
protected _currentLocationMarker?: L.Marker;
firstUpdated(): void {
diff --git a/src/components/locked-content.ts b/src/components/locked-content.ts
index d0a1d81..c3ccf3f 100644
--- a/src/components/locked-content.ts
+++ b/src/components/locked-content.ts
@@ -39,7 +39,7 @@ export class LockedContent extends LitElement {
];
// Components properties/attributes, no accessor attribute disables detecting
- // changes as these are readonly attriubtes there is no need to attach setters
+ // changes as these are readonly attributes there is no need to attach setters
@property({ noAccessor: true }) readonly imageId?: string;
@property({ noAccessor: true }) readonly imageURL?: string;
@property({ type: Object, noAccessor: true })
@@ -73,7 +73,7 @@ export class LockedContent extends LitElement {
}
private _dispatchAskPermissionEvent() {
- const event = new Event("askpermission");
+ const event = new Event("askpermission", { bubbles: true, composed: true });
this.dispatchEvent(event);
}
diff --git a/src/pages/[id].astro b/src/pages/[id].astro
index 59da5fb..94407b1 100644
--- a/src/pages/[id].astro
+++ b/src/pages/[id].astro
@@ -70,8 +70,12 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
imageURL={`http://localhost:3000/images/${data?.blob_url}`}
targetPosition={data?.loc}>
-
+
+
@@ -81,6 +85,10 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
-
+
diff --git a/src/scripts/initMap.ts b/src/scripts/initMap.ts
index 6c790bc..2f1a77f 100644
--- a/src/scripts/initMap.ts
+++ b/src/scripts/initMap.ts
@@ -30,54 +30,12 @@ L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
'© OpenStreetMap',
}).addTo(map);
-map.on("locationerror", onLocationError);
-
-map.on("locationfound", onLocationSuccess);
-
let currentLocationMarker: L.Marker;
-function onLocationError(err: L.ErrorEvent) {
- let errorMessage;
- switch (err.code) {
- case 1:
- errorMessage =
- "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.";
- break;
- case 2:
- errorMessage =
- "Konumunuz tespit edilemedi, lütfen biraz sonra tekrar deneyiniz.";
- break;
- case 3:
- errorMessage =
- "Konum isteği zaman aşımına uğradı, lütfen sayfayı yenileyip tekrar deneyiniz.";
- break;
- default:
- errorMessage =
- "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.";
- break;
- }
- // @ts-ignore
- Toastify({
- text: errorMessage,
- duration: 3000,
- gravity: "top", // `top` or `bottom`
- position: "center", // `left`, `center` or `right`
- stopOnFocus: true, // Prevents dismissing of toast on hover
- style: {
- background: "black",
- borderRadius: "6px",
- margin: "16px",
- },
- onClick: function () {}, // Callback after click
- }).showToast();
-}
-
-function onLocationSuccess(locationEvent: L.LocationEvent) {
- const position = locationEvent.latlng;
-
+export function onLocationSuccess(position: GeolocationPosition) {
const currentPos = {
- lat: position.lat,
- lng: position.lng,
+ lat: position.coords.latitude,
+ lng: position.coords.longitude,
};
if (currentLocationMarker) {
@@ -88,29 +46,7 @@ function onLocationSuccess(locationEvent: L.LocationEvent) {
}
}
-// @ts-ignore L.Control allows extensions
-L.Control.AskPermisson = L.Control.extend({
- onAdd: function () {
- const locationButton = document.createElement("button");
-
- locationButton.textContent = "Konum İzni Ver";
-
- locationButton.classList.add("custom-map-control-button");
-
- locationButton.type = "button";
-
- locationButton.addEventListener("click", (ev) => {
- startWatchingLocation();
- locationButton.textContent = "Konumuma Git";
- L.DomEvent.stopPropagation(ev);
- });
-
- return locationButton;
- },
-});
-
-// @ts-ignore L.Control allows extensions
-L.Control.CurrentLocation = L.Control.extend({
+const CurrentLocation = L.Control.extend({
onAdd: function (map: L.Map) {
const locationButton = document.createElement("button");
@@ -120,35 +56,17 @@ L.Control.CurrentLocation = L.Control.extend({
locationButton.type = "button";
- locationButton.addEventListener("click", (ev) => {
+ locationButton.addEventListener("click", () => {
if (currentLocationMarker) {
map.setView(currentLocationMarker.getLatLng(), 12);
- } else {
- // @ts-ignore
- Toastify({
- text: "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.",
- duration: 3000,
- gravity: "top", // `top` or `bottom`
- position: "center", // `left`, `center` or `right`
- stopOnFocus: true, // Prevents dismissing of toast on hover
- style: {
- background: "black",
- borderRadius: "6px",
- margin: "16px",
- },
- onClick: function () {}, // Callback after click
- }).showToast();
}
-
- L.DomEvent.stopPropagation(ev);
});
return locationButton;
},
});
-// @ts-ignore L.Control allows extensions
-L.Control.GoToTargetLocation = L.Control.extend({
+const GoToTargetLocation = L.Control.extend({
onAdd: function (map: L.Map) {
const locationButton = document.createElement("button");
@@ -164,36 +82,11 @@ L.Control.GoToTargetLocation = L.Control.extend({
},
});
-// @ts-ignore L.Control allows extensions
-L.control.askPermission = function (opts) {
- // @ts-ignore L.Control allows extensions
- return new L.Control.AskPermisson(opts);
-};
-
-// @ts-ignore L.Control allows extensions
-L.control.goToCurrentLocation = function (opts) {
- // @ts-ignore L.Control allows extensions
- return new L.Control.CurrentLocation(opts);
-};
-
-// @ts-ignore L.Control allows extensions
-L.control.targetLocation = function (opts) {
- // @ts-ignore L.Control allows extensions
- return new L.Control.GoToTargetLocation(opts);
-};
-
-// @ts-ignore L.Control allows extensions
-const goToCurrentLocationControl = L.control.goToCurrentLocation({
+const goToCurrentLocationControl = new CurrentLocation({
position: "bottomleft",
});
-// @ts-ignore L.Control allows extensions
-const askPermissionControl = L.control.askPermission({
- position: "bottomleft",
-});
-
-// @ts-ignore L.Control allows extensions
-const targetLocationControl = L.control.targetLocation({
+const targetLocationControl = new GoToTargetLocation({
position: "bottomleft",
});
@@ -210,29 +103,9 @@ function addTargetLocationMarker(target: TargetLocation) {
}
}
-function startWatchingLocation() {
- goToCurrentLocationControl.addTo(map);
- askPermissionControl.remove();
-}
-
function initLocationControls() {
targetLocationControl.addTo(map);
- // Check geolocation permission, if user has given permission before
- // start watching user location
- navigator.permissions
- .query({ name: "geolocation" })
- .then((permissionStatus) => {
- switch (permissionStatus.state) {
- case "granted":
- startWatchingLocation();
- break;
- case "denied":
- case "prompt":
- askPermissionControl.addTo(map);
- default:
- break;
- }
- });
+ goToCurrentLocationControl.addTo(map);
}
addTargetLocationMarker(TARGET_LOCATION);