New LeafletMap component

src/components/LeafletMap.vue

@@ -0,0 +1,75 @@
+<template>
+  <l-map ref="map" v-model:zoom="mapZoom" :center="mapCenter" :use-global-leaflet="false" @ready="initMap">
+    <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap" />
+    <l-marker v-for="location in locationList" :key="getLocationUniqueID(location)" :lat-lng="getLocationLatLng(location)">
+      <l-popup>
+        <h4>{{ getLocationTitle(location, true, false, false) }}</h4>
+        {{ getLocationTitle(location, false, true, true) }}<br>
+        <v-chip label size="small" density="comfortable">
+          {{ getLocationTag(location) }}
+        </v-chip>
+      </l-popup>
+    </l-marker>
+  </l-map>
+</template>
+
+<script>
+import 'leaflet/dist/leaflet.css'
+import { LMap, LTileLayer, LMarker, LPopup } from '@vue-leaflet/vue-leaflet'
+import utils from '../utils.js'
+
+export default {
+  components: {
+    LMap,
+    LTileLayer,
+    LMarker,
+    LPopup,
+  },
+  props: {
+    locationList: {
+      type: Array,
+      required: true
+    },
+  },
+  data() {
+    return {
+      map: null,
+      mapZoom: 5,
+      mapCenter: [45, 5],
+      mapBounds: null,
+    }
+  },
+  mounted() {
+    console.log(this.locationList)
+    if (this.locationList.length) {
+      if (this.locationList.length > 1) {
+        this.mapBounds = utils.getMapBounds(this.locationList, 'nominatim')
+      } else {
+        this.mapCenter = utils.getMapCenter(this.locationList, 'nominatim')
+        this.mapZoom = 12
+        this.mapBounds = null
+      }
+    }
+  },
+  methods: {
+    initMap() {  // TODO: improve map setup
+      this.map = this.$refs.map.leafletObject
+      if (this.mapBounds) {
+        this.map.fitBounds(this.mapBounds)
+      }
+    },
+    getLocationTitle(location, withName=true, withRoad=false, withCity=true) {
+      return utils.getLocationTitle(location, withName, withRoad, withCity)
+    },
+    getLocationUniqueID(location) {
+      return utils.getLocationUniqueID(location)
+    },
+    getLocationTag(location) {
+      return utils.getLocationTag(location)
+    },
+    getLocationLatLng(location) {
+      return utils.getLocationLatLng(location)
+    },
+  }
+}
+</script>

src/views/ProductDetail.vue

@@ -74,7 +74,15 @@
         </v-row>
       </v-container>
     </v-window-item>
-    <v-window-item key="tab-map" value="tab-map" />
+    <v-window-item key="tab-map" value="tab-map">
+      <v-container>
+        <v-row>
+          <v-col style="min-height:400px">
+            <LeafletMap :locationList="locationList" />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-window-item>
   </v-window>
 </template>
 
@@ -94,6 +102,7 @@ export default {
     FilterMenu: defineAsyncComponent(() => import('../components/FilterMenu.vue')),
     OrderMenu: defineAsyncComponent(() => import('../components/OrderMenu.vue')),
     PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
+    LeafletMap: defineAsyncComponent(() => import('../components/LeafletMap.vue')),
     OpenFoodFactsLink: defineAsyncComponent(() => import('../components/OpenFoodFactsLink.vue')),
     OpenFoodFactsAddMenu: defineAsyncComponent(() => import('../components/OpenFoodFactsAddMenu.vue')),
     ShareButton: defineAsyncComponent(() => import('../components/ShareButton.vue'))
@@ -115,6 +124,8 @@ export default {
       // filter & order
       currentFilter: '',
       currentOrder: constants.PRICE_ORDER_LIST[1].key,
+      // map
+      locationList: []
     }
   },
   computed: {
@@ -159,6 +170,7 @@ export default {
       this.productPriceList = []
       this.productPriceTotal = 0
       this.productPricePage = 0
+      this.locationList = []
       this.getProductPrices()
     },
     getProduct() {
@@ -185,6 +197,12 @@ export default {
           this.productPriceList.push(...data.items)
           this.productPriceTotal = data.total
           this.loading = false
+          // update locationList
+          data.items.forEach((price) => {
+            if (price.location) {
+              utils.addObjectToArray(this.locationList, price.location)
+            }
+          })
         })
     },
     togglePriceFilter(filterKey) {
@@ -198,7 +216,7 @@ export default {
         this.$router.push({ query: { ...this.$route.query, [constants.ORDER_PARAM]: this.currentOrder } })
         // this.initProductPrices() will be called in watch $route
       }
-    }
+    },
   }
 }
 </script>