diff --git a/server/assets/style-dark.json b/server/assets/style-dark.json index 43ddb8c1c3..9c4d39c6fd 100644 --- a/server/assets/style-dark.json +++ b/server/assets/style-dark.json @@ -1,7 +1,6 @@ { "version": 8, "name": "Immich Map", - "metadata": { "maputnik:renderer": "mbgljs" }, "sources": { "immich-map": { "type": "vector", diff --git a/server/assets/style-light.json b/server/assets/style-light.json index ac372d4cac..7d4124f229 100644 --- a/server/assets/style-light.json +++ b/server/assets/style-light.json @@ -1,7 +1,6 @@ { "version": 8, "name": "Immich Map", - "metadata": { "maputnik:renderer": "mbgljs" }, "sources": { "immich-map": { "type": "vector", diff --git a/web/package-lock.json b/web/package-lock.json index 408cf85636..a381627d87 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -19,11 +19,11 @@ "justified-layout": "^4.1.0", "lodash-es": "^4.17.21", "luxon": "^3.2.1", - "maplibre-gl": "^3.5.2", + "maplibre-gl": "^3.6.0", "socket.io-client": "^4.6.1", "svelte-loading-spinners": "^0.3.4", "svelte-local-storage-store": "^0.5.0", - "svelte-maplibre": "^0.6.0", + "svelte-maplibre": "^0.7.0", "thumbhash": "^0.1.1" }, "devDependencies": { @@ -3490,9 +3490,9 @@ "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==" }, "node_modules/@types/geojson": { - "version": "7946.0.12", - "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.12.tgz", - "integrity": "sha512-uK2z1ZHJyC0nQRbuovXFt4mzXDwf27vQeUWNhfKGwRcWW429GOhP8HxUHlM6TLH4bzmlv/HlEjpvJh3JfmGsAA==" + "version": "7946.0.13", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.13.tgz", + "integrity": "sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ==" }, "node_modules/@types/graceful-fs": { "version": "4.1.7", @@ -3614,14 +3614,14 @@ "dev": true }, "node_modules/@types/mapbox__point-geometry": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.3.tgz", - "integrity": "sha512-2W46IOXlu7vC8m3+M5rDqSnuY22GFxxx3xhkoyqyPWrD+eP2iAwNst0A1+umLYjCTJMJTSpiofphn9h9k+Kw+w==" + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz", + "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==" }, "node_modules/@types/mapbox__vector-tile": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.3.tgz", - "integrity": "sha512-d263B3KCQtXKVZMHpMJrEW5EeLBsQ8jvAS9nhpUKC5hHIlQaACG9PWkW8qxEeNuceo9120AwPjeS91uNa4ltqA==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz", + "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==", "dependencies": { "@types/geojson": "*", "@types/mapbox__point-geometry": "*", @@ -3635,9 +3635,9 @@ "dev": true }, "node_modules/@types/pbf": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.4.tgz", - "integrity": "sha512-SOFlLGZkLbEXJRwcWCqeP/Koyaf/uAqLXHUsdo/nMfjLsNd8kqauwHe9GBOljSmpcHp/LC6kOjo3SidGjNirVA==" + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz", + "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==" }, "node_modules/@types/pug": { "version": "2.0.7", @@ -3664,9 +3664,9 @@ "dev": true }, "node_modules/@types/supercluster": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.2.tgz", - "integrity": "sha512-qMhofL945Z4njQUuntadexAgPtpiBC014WvVqU70Prj42LC77Xgmz04us7hSMmwjs7KbgAwGBmje+FSOvDbP0Q==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz", + "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==", "dependencies": { "@types/geojson": "*" } @@ -9587,9 +9587,9 @@ } }, "node_modules/maplibre-gl": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.5.2.tgz", - "integrity": "sha512-deqYA/RiEyXMGroZMDbOWNQTLnFsxREC+mDkQnuyCUNdBWm1KHafsXJYZP7rlLa5RLQNq05IAUAizY9aHTpIUw==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.6.0.tgz", + "integrity": "sha512-l+jBu+bMy96FOV4em7FgjMH77ewlOtLPXLAem/Q44y4+0vTGsJvPksJSoLoedmikcSff2QN20VZFo3+Zg0UJPQ==", "dependencies": { "@mapbox/geojson-rewind": "^0.5.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2", @@ -11480,14 +11480,14 @@ } }, "node_modules/svelte-maplibre": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/svelte-maplibre/-/svelte-maplibre-0.6.0.tgz", - "integrity": "sha512-/iTUkJtJpAH22aXAkEysDhWQa6d8J+WpvxenU1k6r5CASVGc4TyYLe7kQt3CkhlNSIP05EpkADvJJMeUMcnbvw==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/svelte-maplibre/-/svelte-maplibre-0.7.0.tgz", + "integrity": "sha512-8Mm3MEr0mCq4en5ZmuemCxnv82ljd4mNzTt/pC+X3CTKEcfoVyJgr2PaDu8Znu3DOxUR378XBlG1z5Dw3amnvA==", "dependencies": { "d3-geo": "^3.1.0", "just-compare": "^2.3.0", "just-flush": "^2.3.0", - "maplibre-gl": "^3.0.0", + "maplibre-gl": "^3.5.0", "pmtiles": "^2.10.0" }, "peerDependencies": { diff --git a/web/package.json b/web/package.json index 1a4c6521a3..fe618948c0 100644 --- a/web/package.json +++ b/web/package.json @@ -70,11 +70,11 @@ "justified-layout": "^4.1.0", "lodash-es": "^4.17.21", "luxon": "^3.2.1", - "maplibre-gl": "^3.5.2", + "maplibre-gl": "^3.6.0", "socket.io-client": "^4.6.1", "svelte-loading-spinners": "^0.3.4", "svelte-local-storage-store": "^0.5.0", - "svelte-maplibre": "^0.6.0", + "svelte-maplibre": "^0.7.0", "thumbhash": "^0.1.1" } } diff --git a/web/src/lib/components/shared-components/map/map.svelte b/web/src/lib/components/shared-components/map/map.svelte index 6501e89ead..b806c60ce4 100644 --- a/web/src/lib/components/shared-components/map/map.svelte +++ b/web/src/lib/components/shared-components/map/map.svelte @@ -14,9 +14,9 @@ ScaleControl, Popup, } from 'svelte-maplibre'; - import { mapSettings } from '$lib/stores/preferences.store'; + import { colorTheme, mapSettings } from '$lib/stores/preferences.store'; 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 Icon from '$lib/components/elements/icon.svelte'; import { mdiCog } from '@mdi/js'; @@ -29,7 +29,9 @@ export let simplified = false; $: 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; })(); @@ -74,16 +76,17 @@ const asMarker = (feature: Feature): MapMarkerResponseDto => { const featurePoint = feature as FeaturePoint; + const coords = LngLat.convert(featurePoint.geometry.coordinates as [number, number]); return { - lat: featurePoint.geometry.coordinates[0], - lon: featurePoint.geometry.coordinates[1], + lat: coords.lat, + lon: coords.lng, id: featurePoint.properties.id, }; }; {#await style then style} - + {#if !simplified}