pianello/pianello-web-app
pianello/pianello-web-app
2
0
Fork 0
Code Issues 3 Pull requests Projects 1 Releases Packages 1 Wiki Activity

Update user marker position
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Details

Browse source
This commit is contained in:
Alessio Davoli 2023-12-13 19:02:00 +01:00
parent 207af1abf1
commit 4d53aabef4
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/lib/components/tabs/MapTab.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
const mapMarkerIcon = new URL('/icons/map.png', import.meta.url).href
export let route; export let route;
const pianelloCoordinates = [43.14, 12.53]; const pianelloCoordinates = [43.14, 12.53];
@ -17,7 +18,7 @@
const openStreetMapTile = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'; const openStreetMapTile = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
let errored = false; let errored = false;
const watchPosition = async () => { const watchPosition = async () => {
if (!("geolocation" in navigator)) { if (!("geolocation" in navigator)) {
errored = true; errored = true;
@ -39,7 +40,12 @@
longitude = crd.longitude; longitude = crd.longitude;
accuracy = crd.accuracy; accuracy = crd.accuracy;
const userMarker = leaflet.marker([latitude, longitude]).addTo(map); const icon = leaflet.icon({
iconUrl: mapMarkerIcon,
iconSize: [38, 95], // size of the icon
});
userMarker = leaflet.marker([latitude, longitude], {icon}).addTo(map);
// move the map to have the location in its center // move the map to have the location in its center
map.panTo(userMarker.getLatLng()); map.panTo(userMarker.getLatLng());