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

feat: synchronize map permissoins with lockedcontent component permissons

Browse Source
This commit is contained in:
log101 2024-07-19 13:18:44 +03:00
parent 7e77b4326f
commit 430c50b3ae
5 changed files with 236 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LockedContent/templates.ts
View File

@ -1,4 +1,4 @@
import { html, type TemplateResult } from "lit";
import { html } from "lit";
import { lockSVG, unlockSVG } from "./svg";
// This template is shown when user hasn't give geolocation permission yet

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

@ -11,7 +11,6 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import LockedContent from "@/components/LockedContent";
import WebComponentWrapper from "@/components/WebComponentWrapper.astro";
import { CalendarIcon } from "@radix-ui/react-icons";
import { Separator } from "@/components/ui/separator";
@ -86,5 +85,5 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
</p>
</div>
</main>
<script src="../scripts/initMap.js"></script>
<script src="../scripts/initMap.ts"></script>
</Layout>

161
src/scripts/initMap.js
View File

@ -1,161 +0,0 @@
const data = JSON.parse(document.getElementById('map').dataset.targetLocation)
const TARGET_LOCATION = data
function startWatchingLocation() {
map.locate({ watch: true })
}
var map = L.map('map').setView(TARGET_LOCATION, 13);
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);
var targetLocationIcon = L.icon({
iconUrl: 'goal.svg',
iconSize: [32, 32],
});
L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map);
var circle = L.circle(TARGET_LOCATION, {
color: 'blue',
fillColor: '#30f',
fillOpacity: 0.2,
radius: 50
}).addTo(map);
var currentLocationIcon = L.icon({
iconUrl: 'blue-dot.png',
iconSize: [32, 32],
});
let currentLocationMarker;
function onLocationError(err) {
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) {
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.GoToCurrentLocation = 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 {
// @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;
},
});
L.Control.GoToTargetLocation = L.Control.extend({
onAdd: function (map) {
const locationButton = document.createElement('button');
locationButton.textContent = 'Hedefe Git';
locationButton.classList.add('custom-map-control-button');
locationButton.addEventListener('click', () => {
map.setView(TARGET_LOCATION, 18);
});
return locationButton;
}
});
L.control.currentLocation = function (opts) {
return new L.Control.GoToCurrentLocation(opts);
};
L.control.targetLocation = function (opts) {
return new L.Control.GoToTargetLocation(opts);
};
L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
L.control.targetLocation({ position: 'bottomleft' }).addTo(map);

230
src/scripts/initMap.ts Normal file
View File

@ -0,0 +1,230 @@
import L from "leaflet";
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;
const data = JSON.parse(targetLocation ?? "{}");
const TARGET_LOCATION = data;
var map = L.map("map").setView(TARGET_LOCATION, 13);
L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map);
L.circle(TARGET_LOCATION, {
color: "blue",
fillColor: "#30f",
fillOpacity: 0.2,
radius: 50,
}).addTo(map);
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);
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;
const currentPos = {
lat: position.lat,
lng: position.lng,
};
if (currentLocationMarker) {
currentLocationMarker.setLatLng(currentPos);
} else {
currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
currentLocationMarker.addTo(map);
}
}
// @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({
onAdd: function (map: L.Map) {
const locationButton = document.createElement("button");
locationButton.textContent = "Konumuma Git";
locationButton.classList.add("custom-map-control-button");
locationButton.type = "button";
locationButton.addEventListener("click", (ev) => {
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({
onAdd: function (map: L.Map) {
const locationButton = document.createElement("button");
locationButton.textContent = "Hedefe Git";
locationButton.classList.add("custom-map-control-button");
locationButton.addEventListener("click", () => {
map.setView(TARGET_LOCATION, 18);
});
return locationButton;
},
});
// @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({
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({
position: "bottomleft",
});
function startWatchingLocation() {
goToCurrentLocationControl.addTo(map);
askPermissionControl.remove();
map.locate({ watch: true });
}
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;
}
});
}
initLocationControls();

8
src/scripts/initSelectionMap.js
View File

@ -48,7 +48,7 @@ map.on('locationerror', onLocationError);
map.on('locationfound', onLocationSuccess)
L.Control.GoToCurrentLocation = L.Control.extend({
L.Control.AskPermisson = L.Control.extend({
onAdd: function (map) {
const locationButton = document.createElement('button');
@ -90,11 +90,11 @@ L.Control.GoToCurrentLocation = L.Control.extend({
},
});
L.control.currentLocation = function (opts) {
return new L.Control.GoToCurrentLocation(opts);
L.control.askPermission = function (opts) {
return new L.Control.AskPermisson(opts);
};
L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
L.control.askPermission({ position: 'bottomleft' }).addTo(map);
map.on('click', (e) => {