|
|
|
|
@ -1,9 +1,11 @@
|
|
|
|
|
<script lang="ts" module>
|
|
|
|
|
import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
|
|
|
|
|
import { addProtocol, setRTLTextPlugin } from 'maplibre-gl';
|
|
|
|
|
import { Protocol } from 'pmtiles';
|
|
|
|
|
|
|
|
|
|
let protocol = new Protocol();
|
|
|
|
|
void maplibregl.addProtocol('pmtiles', protocol.tile);
|
|
|
|
|
void maplibregl.setRTLTextPlugin(mapboxRtlUrl, true);
|
|
|
|
|
void addProtocol('pmtiles', protocol.tile);
|
|
|
|
|
void setRTLTextPlugin(mapboxRtlUrl, true);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
@ -16,12 +18,20 @@
|
|
|
|
|
import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
|
|
|
|
|
import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
|
|
|
|
|
import { Icon, modalManager } from '@immich/ui';
|
|
|
|
|
import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
|
|
|
|
|
import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
|
|
|
|
|
import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
|
|
|
|
|
import { isEqual, omit } from 'lodash-es';
|
|
|
|
|
import { DateTime, Duration } from 'luxon';
|
|
|
|
|
import maplibregl, { GlobeControl, type GeoJSONSource, type LngLatLike } from 'maplibre-gl';
|
|
|
|
|
import {
|
|
|
|
|
GlobeControl,
|
|
|
|
|
LngLat,
|
|
|
|
|
LngLatBounds,
|
|
|
|
|
Marker,
|
|
|
|
|
type GeoJSONSource,
|
|
|
|
|
type LngLatLike,
|
|
|
|
|
type Map,
|
|
|
|
|
type MapMouseEvent,
|
|
|
|
|
} from 'maplibre-gl';
|
|
|
|
|
import { onDestroy, onMount, untrack } from 'svelte';
|
|
|
|
|
import { t } from 'svelte-i18n';
|
|
|
|
|
import {
|
|
|
|
|
@ -37,7 +47,6 @@
|
|
|
|
|
NavigationControl,
|
|
|
|
|
Popup,
|
|
|
|
|
ScaleControl,
|
|
|
|
|
type Map,
|
|
|
|
|
} from 'svelte-maplibre';
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
@ -82,15 +91,15 @@
|
|
|
|
|
return undefined;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const bounds = new maplibregl.LngLatBounds();
|
|
|
|
|
const bounds = new LngLatBounds();
|
|
|
|
|
for (const marker of mapMarkers) {
|
|
|
|
|
bounds.extend([marker.lon, marker.lat]);
|
|
|
|
|
}
|
|
|
|
|
return bounds;
|
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
let map: maplibregl.Map | undefined = $state();
|
|
|
|
|
let marker: maplibregl.Marker | null = null;
|
|
|
|
|
let map: Map | undefined = $state();
|
|
|
|
|
let marker: Marker | null = null;
|
|
|
|
|
let abortController: AbortController;
|
|
|
|
|
|
|
|
|
|
const theme = $derived($mapSettings.allowDarkMode ? themeManager.value : Theme.LIGHT);
|
|
|
|
|
@ -103,7 +112,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
center = { lng, lat };
|
|
|
|
|
marker = new maplibregl.Marker().setLngLat([lng, lat]).addTo(map);
|
|
|
|
|
marker = new Marker().setLngLat([lng, lat]).addTo(map);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -125,7 +134,7 @@
|
|
|
|
|
onSelect(ids);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleMapClick(event: maplibregl.MapMouseEvent) {
|
|
|
|
|
function handleMapClick(event: MapMouseEvent) {
|
|
|
|
|
if (clickable) {
|
|
|
|
|
const { lng, lat } = event.lngLat;
|
|
|
|
|
onClickPoint({ lng, lat });
|
|
|
|
|
@ -135,7 +144,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (map) {
|
|
|
|
|
marker = new maplibregl.Marker().setLngLat([lng, lat]).addTo(map);
|
|
|
|
|
marker = new Marker().setLngLat([lng, lat]).addTo(map);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -157,7 +166,7 @@
|
|
|
|
|
|
|
|
|
|
const asMarker = (feature: Feature<Geometry, GeoJsonProperties>): MapMarkerResponseDto => {
|
|
|
|
|
const featurePoint = feature as FeaturePoint;
|
|
|
|
|
const coords = maplibregl.LngLat.convert(featurePoint.geometry.coordinates as [number, number]);
|
|
|
|
|
const coords = LngLat.convert(featurePoint.geometry.coordinates as [number, number]);
|
|
|
|
|
return {
|
|
|
|
|
lat: coords.lat,
|
|
|
|
|
lon: coords.lng,
|
|
|
|
|
@ -294,7 +303,7 @@
|
|
|
|
|
fitBoundsOptions={{ padding: 50, maxZoom: 15 }}
|
|
|
|
|
attributionControl={false}
|
|
|
|
|
diffStyleUpdates={true}
|
|
|
|
|
onload={(event) => {
|
|
|
|
|
onload={(event: Map) => {
|
|
|
|
|
event.setMaxZoom(18);
|
|
|
|
|
event.on('click', handleMapClick);
|
|
|
|
|
if (!simplified) {
|
|
|
|
|
@ -303,7 +312,7 @@
|
|
|
|
|
}}
|
|
|
|
|
bind:map
|
|
|
|
|
>
|
|
|
|
|
{#snippet children({ map }: { map: maplibregl.Map })}
|
|
|
|
|
{#snippet children({ map }: { map: Map })}
|
|
|
|
|
{#if showSimpleControls}
|
|
|
|
|
<NavigationControl position="top-left" showCompass={!simplified} />
|
|
|
|
|
|
|
|
|
|
|
Min Idzelis
GitHub