Fix Leaflet bug (with Vue) that not including the marker icon in prod…

…uction build
massijay · Sep 12, 2022 · cc7b543 · cc7b543
1 parent bf9f633
commit cc7b543
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/TripRecorder-vue/src/composables/tripMap.js b/TripRecorder-vue/src/composables/tripMap.js
@@ -3,6 +3,9 @@ import {ref} from "vue";
 import {DateTime} from "luxon";
 import {useRoute} from "vue-router/dist/vue-router";
 import router from "../router";
+import markerX2Icon from 'leaflet/dist/images/marker-icon-2x.png'
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
 
 export function useTripMap() {
 
@@ -21,6 +24,16 @@ export function useTripMap() {
     });
 
     function initMap(enableMapClick = false) {
+        // Fix leaflet bug with Vue not displaying marker icon in production build
+        // https://stackoverflow.com/a/58254190/11583146
+        // https://vitejs.dev/guide/features.html#static-assets
+        delete L.Icon.Default.prototype._getIconUrl;
+        L.Icon.Default.mergeOptions({
+            iconRetinaUrl: markerX2Icon,
+            iconUrl: markerIcon,
+            shadowUrl: markerShadow
+        });
+
         map = L.map('map').setView([45.659695, 13.794748], 13);
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,

diff --git a/TripRecorder-vue/src/views/TripsView.vue b/TripRecorder-vue/src/views/TripsView.vue
@@ -36,7 +36,7 @@
         <p class="mb-1 text-center text-muted">Caricamento...</p>
       </a>
     </div>
-    <p class="mb-1 text-center text-muted mt-3" v-if="!isLoading && !dateFilter.value && trips.length">
+    <p class="mb-1 text-center text-muted mt-3" v-if="!isLoading && !dateFilter && trips.length">
       <InformationCircleIcon style="width: 1rem;" class="me-1 mb-1"></InformationCircleIcon>
       Stai visualizzando gli utlimi 10 viaggi, seleziona una data per filtrarli
     </p>