log101/konulu-konum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove unnecessary control from leaflet-map

Browse Source
This commit is contained in:
log101 2024-07-22 14:29:29 +03:00
parent 09e69f61b9
commit d5bc7b98dd
4 changed files with 33 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/leaflet-map.ts
View File

@ -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 {

4
src/components/locked-content.ts
View File

@ -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);
}

34
src/pages/[id].astro
View File

@ -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}></locked-content>
<leaflet-map id="leaflet-map-component" targetPosition={data?.loc}
></leaflet-map>
<div
id="map"
class="w-full h-[450px] rounded"
data-target-location={data?.loc}
>
</div>
<ShareButton client:only />
<div class="flex justify-center">
@ -81,6 +85,10 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
</div>
</main>
<script>
import { errorCallback } from "@/components/LockedContent/geolocation";
import { onLocationSuccess } from "@/scripts/initMap";
let watchId: number;
function updateCurrentLocation(position: GeolocationPosition) {
const lockedContent = document.getElementById("locked-content-component");
if (lockedContent) {
@ -90,13 +98,7 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
);
}
const leafletMap = document.getElementById("leaflet-map-component");
if (leafletMap) {
leafletMap.setAttribute(
"currentPosition",
`[${position.coords.latitude}, ${position.coords.longitude}]`
);
}
onLocationSuccess(position);
}
navigator.permissions
@ -104,7 +106,10 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
.then((permissionStatus) => {
switch (permissionStatus.state) {
case "granted":
window.navigator.geolocation.watchPosition(updateCurrentLocation);
watchId = window.navigator.geolocation.watchPosition(
updateCurrentLocation,
errorCallback
);
break;
case "denied":
case "prompt":
@ -114,9 +119,14 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
});
window.addEventListener("askpermission", () => {
console.log("ask permission");
if (!watchId) {
watchId = window.navigator.geolocation.watchPosition(
updateCurrentLocation,
errorCallback
);
}
});
</script>
<script src="../components/locked-content.ts"></script>
<script src="../components/leaflet-map.ts"></script>
<script src="../scripts/initMap.ts"></script>
</Layout>

145
src/scripts/initMap.ts
View File

@ -30,54 +30,12 @@ L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).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);