Fix icons missing on map (#2638)

LycheeOrg · Oct 31, 2024 · 8137557 · 8137557
1 parent 43b6a65
commit 8137557
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 21 deletions.
diff --git a/resources/js/components/gallery/photo/MapInclude.vue b/resources/js/components/gallery/photo/MapInclude.vue
@@ -1,11 +1,5 @@
 <template>
-	<div
-		:data-layer="map_provider?.layer"
-		:data-provider="map_provider?.attribution"
-		:data-asset="assets_url"
-		id="leaflet_map_single_photo"
-		:class="classVal"
-	></div>
+	<div :data-layer="map_provider?.layer" :data-provider="map_provider?.attribution" id="leaflet_map_single_photo" :class="classVal"></div>
 </template>
 <script setup lang="ts">
 import { useSidebarMap } from "@/services/sidebar-map";
@@ -15,7 +9,7 @@ const props = defineProps<{
 	latitude: number | null;
 	longitude: number | null;
 }>();
-const { latitude, longitude, assets_url, map_provider, load, onMount } = useSidebarMap(props.latitude, props.longitude);
+const { latitude, longitude, map_provider, load, onMount } = useSidebarMap(props.latitude, props.longitude);
 
 onMounted(() => {
 	onMount();

diff --git a/resources/js/components/gallery/thumbs/AlbumThumbImage.vue b/resources/js/components/gallery/thumbs/AlbumThumbImage.vue
@@ -27,7 +27,6 @@ const props = defineProps<{
 
 const src = ref("");
 const srcSet = ref("");
-const assets_url = ref(window.assets_url ?? "");
 const classList = computed(() => {
 	if (src.value === Constants.BASE_URL + "/img/no_images.svg" || src.value === Constants.BASE_URL + "/img/password.svg") {
 		return "invert brightness-25 dark:invert-0 dark:brightness-100";

diff --git a/resources/js/composables/photo/basePhoto.ts b/resources/js/composables/photo/basePhoto.ts
@@ -1,11 +1,12 @@
+import Constants from "@/services/constants";
 import { computed, Ref, ref } from "vue";
 
 export function usePhotoBaseFunction(photoId: Ref<string>) {
 	const photo = ref(undefined) as Ref<App.Http.Resources.Models.PhotoResource | undefined>;
 	const album = ref(null) as Ref<App.Http.Resources.Models.AbstractAlbumResource | null>;
 	const photos = ref([]) as Ref<App.Http.Resources.Models.PhotoResource[]>;
 
-	const placeholder = window.assets_url + "img/placeholder.png";
+	const placeholder = Constants.BASE_URL + "/img/placeholder.png";
 
 	function hasPrevious(): boolean {
 		return photo.value?.previous_photo_id !== null;

diff --git a/resources/js/services/sidebar-map.ts b/resources/js/services/sidebar-map.ts
@@ -6,32 +6,30 @@ import "leaflet/dist/leaflet.css";
 import "@lychee-org/leaflet.photo/Leaflet.Photo.css";
 import { Ref, ref } from "vue";
 import AlbumService from "./album-service";
+import Constants from "./constants";
 
 export default class SidebarMap {
 	layer: string;
 	attribution: string;
-	url_asset: string;
 
 	constructor() {
 		this.layer = "";
 		this.attribution = "";
-		this.url_asset = "";
 	}
 
 	displayOnMap(latitude: number, longitude: number) {
 		const mapData = document.getElementById("leaflet_map_single_photo");
 		this.layer = mapData?.dataset.layer ?? "";
-		this.url_asset = mapData?.dataset.asset ?? "";
 		this.attribution = mapData?.dataset.provider ?? "";
 
 		// Leaflet searches for icon in same directory as js file -> paths needs
 		// to be overwritten
 		// @ts-expect-error
 		delete L.Icon.Default.prototype._getIconUrl;
 		L.Icon.Default.mergeOptions({
-			iconRetinaUrl: this.url_asset + "img/marker-icon-2x.png",
-			iconUrl: this.url_asset + "img/marker-icon.png",
-			shadowUrl: this.url_asset + "img/marker-shadow.png",
+			iconRetinaUrl: Constants.BASE_URL + "/img/marker-icon-2x.png",
+			iconUrl: Constants.BASE_URL + "/img/marker-icon.png",
+			shadowUrl: Constants.BASE_URL + "/img/marker-shadow.png",
 		});
 
 		// kill the map if it exists
@@ -55,7 +53,6 @@ export function useSidebarMap(latitudeValue: number | null, longitudeValue: numb
 	const longitude = ref(longitudeValue);
 
 	const map = ref(undefined) as Ref<undefined | SidebarMap>;
-	const assets_url = ref(window.assets_url);
 	const map_provider = ref(undefined) as Ref<undefined | App.Http.Resources.GalleryConfigs.MapProviderData>;
 
 	function onMount() {
@@ -80,7 +77,6 @@ export function useSidebarMap(latitudeValue: number | null, longitudeValue: numb
 	return {
 		latitude,
 		longitude,
-		assets_url,
 		map,
 		map_provider,
 		load,

diff --git a/resources/js/views/gallery-panels/Map.vue b/resources/js/views/gallery-panels/Map.vue
@@ -37,6 +37,7 @@ import "leaflet-gpx/gpx.js";
 import { useToast } from "primevue/usetoast";
 import Toolbar from "primevue/toolbar";
 import { onKeyStroke } from "@vueuse/core";
+import Constants from "@/services/constants";
 
 type MapPhotoEntry = {
 	lat?: number | null;
@@ -89,9 +90,9 @@ function mapInit() {
 	// @ts-ignore
 	delete L.Icon.Default.prototype._getIconUrl;
 	L.Icon.Default.mergeOptions({
-		iconRetinaUrl: window.assets_url + "img/marker-icon-2x.png",
-		iconUrl: window.assets_url + "img/marker-icon.png",
-		shadowUrl: window.assets_url + "img/marker-shadow.png",
+		iconRetinaUrl: Constants.BASE_URL + "/img/marker-icon-2x.png",
+		iconUrl: Constants.BASE_URL + "/img/marker-icon.png",
+		shadowUrl: Constants.BASE_URL + "/img/marker-shadow.png",
 	});
 
 	if (map_provider.value !== undefined) {