c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases Activity

refactor: map (#4957)

Browse source 
* fix mixed up lng lat for asset map

* minor cleanup

* update packages
This commit is contained in:
Daniel Dietzler 2023-11-11 23:32:39 +01:00 committed by GitHub
parent 26fd797ac9
commit ad4cbf20de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 35 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
server/assets/style-dark.json
View file

@ -1,7 +1,6 @@
{ {
"version": 8, "version": 8,
"name": "Immich Map", "name": "Immich Map",
"metadata": { "maputnik:renderer": "mbgljs" },
"sources": { "sources": {
"immich-map": { "immich-map": {
"type": "vector", "type": "vector",

1
server/assets/style-light.json
View file

@ -1,7 +1,6 @@
{ {
"version": 8, "version": 8,
"name": "Immich Map", "name": "Immich Map",
"metadata": { "maputnik:renderer": "mbgljs" },
"sources": { "sources": {
"immich-map": { "immich-map": {
"type": "vector", "type": "vector",

48
web/package-lock.json generated
View file

@ -19,11 +19,11 @@
"justified-layout": "^4.1.0", "justified-layout": "^4.1.0",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"luxon": "^3.2.1", "luxon": "^3.2.1",
"maplibre-gl": "^3.5.2", "maplibre-gl": "^3.6.0",
"socket.io-client": "^4.6.1", "socket.io-client": "^4.6.1",
"svelte-loading-spinners": "^0.3.4", "svelte-loading-spinners": "^0.3.4",
"svelte-local-storage-store": "^0.5.0", "svelte-local-storage-store": "^0.5.0",
"svelte-maplibre": "^0.6.0", "svelte-maplibre": "^0.7.0",
"thumbhash": "^0.1.1" "thumbhash": "^0.1.1"
}, },
"devDependencies": { "devDependencies": {
@ -3490,9 +3490,9 @@
"integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==" "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA=="
}, },
"node_modules/@types/geojson": { "node_modules/@types/geojson": {
"version": "7946.0.12", "version": "7946.0.13",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.12.tgz", "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.13.tgz",
"integrity": "sha512-uK2z1ZHJyC0nQRbuovXFt4mzXDwf27vQeUWNhfKGwRcWW429GOhP8HxUHlM6TLH4bzmlv/HlEjpvJh3JfmGsAA==" "integrity": "sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ=="
}, },
"node_modules/@types/graceful-fs": { "node_modules/@types/graceful-fs": {
"version": "4.1.7", "version": "4.1.7",
@ -3614,14 +3614,14 @@
"dev": true "dev": true
}, },
"node_modules/@types/mapbox__point-geometry": { "node_modules/@types/mapbox__point-geometry": {
"version": "0.1.3", "version": "0.1.4",
"resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.3.tgz", "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
"integrity": "sha512-2W46IOXlu7vC8m3+M5rDqSnuY22GFxxx3xhkoyqyPWrD+eP2iAwNst0A1+umLYjCTJMJTSpiofphn9h9k+Kw+w==" "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA=="
}, },
"node_modules/@types/mapbox__vector-tile": { "node_modules/@types/mapbox__vector-tile": {
"version": "1.3.3", "version": "1.3.4",
"resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.3.tgz", "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz",
"integrity": "sha512-d263B3KCQtXKVZMHpMJrEW5EeLBsQ8jvAS9nhpUKC5hHIlQaACG9PWkW8qxEeNuceo9120AwPjeS91uNa4ltqA==", "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==",
"dependencies": { "dependencies": {
"@types/geojson": "*", "@types/geojson": "*",
"@types/mapbox__point-geometry": "*", "@types/mapbox__point-geometry": "*",
@ -3635,9 +3635,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/pbf": { "node_modules/@types/pbf": {
"version": "3.0.4", "version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
"integrity": "sha512-SOFlLGZkLbEXJRwcWCqeP/Koyaf/uAqLXHUsdo/nMfjLsNd8kqauwHe9GBOljSmpcHp/LC6kOjo3SidGjNirVA==" "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA=="
}, },
"node_modules/@types/pug": { "node_modules/@types/pug": {
"version": "2.0.7", "version": "2.0.7",
@ -3664,9 +3664,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/supercluster": { "node_modules/@types/supercluster": {
"version": "7.1.2", "version": "7.1.3",
"resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.2.tgz", "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
"integrity": "sha512-qMhofL945Z4njQUuntadexAgPtpiBC014WvVqU70Prj42LC77Xgmz04us7hSMmwjs7KbgAwGBmje+FSOvDbP0Q==", "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==",
"dependencies": { "dependencies": {
"@types/geojson": "*" "@types/geojson": "*"
} }
@ -9587,9 +9587,9 @@
} }
}, },
"node_modules/maplibre-gl": { "node_modules/maplibre-gl": {
"version": "3.5.2", "version": "3.6.0",
"resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.5.2.tgz", "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.6.0.tgz",
"integrity": "sha512-deqYA/RiEyXMGroZMDbOWNQTLnFsxREC+mDkQnuyCUNdBWm1KHafsXJYZP7rlLa5RLQNq05IAUAizY9aHTpIUw==", "integrity": "sha512-l+jBu+bMy96FOV4em7FgjMH77ewlOtLPXLAem/Q44y4+0vTGsJvPksJSoLoedmikcSff2QN20VZFo3+Zg0UJPQ==",
"dependencies": { "dependencies": {
"@mapbox/geojson-rewind": "^0.5.2", "@mapbox/geojson-rewind": "^0.5.2",
"@mapbox/jsonlint-lines-primitives": "^2.0.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2",
@ -11480,14 +11480,14 @@
} }
}, },
"node_modules/svelte-maplibre": { "node_modules/svelte-maplibre": {
"version": "0.6.0", "version": "0.7.0",
"resolved": "https://registry.npmjs.org/svelte-maplibre/-/svelte-maplibre-0.6.0.tgz", "resolved": "https://registry.npmjs.org/svelte-maplibre/-/svelte-maplibre-0.7.0.tgz",
"integrity": "sha512-/iTUkJtJpAH22aXAkEysDhWQa6d8J+WpvxenU1k6r5CASVGc4TyYLe7kQt3CkhlNSIP05EpkADvJJMeUMcnbvw==", "integrity": "sha512-8Mm3MEr0mCq4en5ZmuemCxnv82ljd4mNzTt/pC+X3CTKEcfoVyJgr2PaDu8Znu3DOxUR378XBlG1z5Dw3amnvA==",
"dependencies": { "dependencies": {
"d3-geo": "^3.1.0", "d3-geo": "^3.1.0",
"just-compare": "^2.3.0", "just-compare": "^2.3.0",
"just-flush": "^2.3.0", "just-flush": "^2.3.0",
"maplibre-gl": "^3.0.0", "maplibre-gl": "^3.5.0",
"pmtiles": "^2.10.0" "pmtiles": "^2.10.0"
}, },
"peerDependencies": { "peerDependencies": {

4
web/package.json
View file

@ -70,11 +70,11 @@
"justified-layout": "^4.1.0", "justified-layout": "^4.1.0",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"luxon": "^3.2.1", "luxon": "^3.2.1",
"maplibre-gl": "^3.5.2", "maplibre-gl": "^3.6.0",
"socket.io-client": "^4.6.1", "socket.io-client": "^4.6.1",
"svelte-loading-spinners": "^0.3.4", "svelte-loading-spinners": "^0.3.4",
"svelte-local-storage-store": "^0.5.0", "svelte-local-storage-store": "^0.5.0",
"svelte-maplibre": "^0.6.0", "svelte-maplibre": "^0.7.0",
"thumbhash": "^0.1.1" "thumbhash": "^0.1.1"
} }
} }

15
web/src/lib/components/shared-components/map/map.svelte
View file

@ -14,9 +14,9 @@
ScaleControl, ScaleControl,
Popup, Popup,
} from 'svelte-maplibre'; } from 'svelte-maplibre';
import { mapSettings } from '$lib/stores/preferences.store'; import { colorTheme, mapSettings } from '$lib/stores/preferences.store';
import { MapMarkerResponseDto, api } from '@api'; import { MapMarkerResponseDto, api } from '@api';
import type { GeoJSONSource, LngLatLike, StyleSpecification } from 'maplibre-gl'; import { LngLat, type GeoJSONSource, type LngLatLike, type StyleSpecification } from 'maplibre-gl';
import type { Feature, Geometry, GeoJsonProperties, Point } from 'geojson'; import type { Feature, Geometry, GeoJsonProperties, Point } from 'geojson';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import { mdiCog } from '@mdi/js'; import { mdiCog } from '@mdi/js';
@ -29,7 +29,9 @@
export let simplified = false; export let simplified = false;
$: style = (async () => { $: style = (async () => {
const { data } = await api.systemConfigApi.getMapStyle({ theme: $mapSettings.allowDarkMode ? 'dark' : 'light' }); const { data } = await api.systemConfigApi.getMapStyle({
theme: $mapSettings.allowDarkMode ? $colorTheme : 'light',
});
return data as StyleSpecification; return data as StyleSpecification;
})(); })();
@ -74,16 +76,17 @@
const asMarker = (feature: Feature<Geometry, GeoJsonProperties>): MapMarkerResponseDto => { const asMarker = (feature: Feature<Geometry, GeoJsonProperties>): MapMarkerResponseDto => {
const featurePoint = feature as FeaturePoint; const featurePoint = feature as FeaturePoint;
const coords = LngLat.convert(featurePoint.geometry.coordinates as [number, number]);
return { return {
lat: featurePoint.geometry.coordinates[0], lat: coords.lat,
lon: featurePoint.geometry.coordinates[1], lon: coords.lng,
id: featurePoint.properties.id, id: featurePoint.properties.id,
}; };
}; };
</script> </script>
{#await style then style} {#await style then style}
<MapLibre {style} class="h-full" {center} {zoom} attributionControl={false} let:map> <MapLibre {style} class="h-full" {center} {zoom} attributionControl={false} diffStyleUpdates={true} let:map>
<NavigationControl position="top-left" showCompass={!simplified} /> <NavigationControl position="top-left" showCompass={!simplified} />
{#if !simplified} {#if !simplified}
<GeolocateControl position="top-left" fitBoundsOptions={{ maxZoom: 12 }} /> <GeolocateControl position="top-left" fitBoundsOptions={{ maxZoom: 12 }} />