feat(web): add link to external map in leaflet popup (#3847)

* feat(web): add link to external map in leaflet popup

Sometimes it's useful to open a geo location to an external map
application to not have to copy the coordinates manually.
Here I put a link to OpenStreetMap because it's what I personally use.
But I known some people would want to use something different. We could
instead link to geohacks (eg. https://geohack.toolforge.org/geohack.php?params=048.861085_N_0002.313158_E_globe:Earth)
or make it a configurable param.

* chore: cleanup

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Le_Futuriste 2023-08-25 15:19:49 +02:00 committed by GitHub
parent 6d1567cf44
commit 20e0c03b39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions

View file

@ -1,13 +1,13 @@
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import { Marker, Icon, type LatLngExpression, type Content } from 'leaflet';
import { Marker, Icon, type LatLngExpression } from 'leaflet';
import { getMapContext } from './map.svelte';
import iconUrl from 'leaflet/dist/images/marker-icon.png';
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
export let latlng: LatLngExpression;
export let popupContent: Content | undefined = undefined;
let popupHTML: string;
let marker: Marker;
const defaultIcon = new Icon({
@ -37,10 +37,14 @@
$: if (marker) {
marker.setLatLng(latlng);
if (popupContent) {
marker.bindPopup(popupContent);
if (popupHTML) {
marker.bindPopup(popupHTML);
} else {
marker.unbindPopup();
}
}
</script>
<span contenteditable="true" bind:innerHTML={popupHTML} class="hide">
<slot />
</span>