refactor(Location search): new LeafletMap component

src/components/LeafletMap.vue

@@ -0,0 +1,74 @@
+<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() {
+    if (this.locationList.length) {
+      if (this.locationList.length > 1) {
+        this.mapBounds = utils.getMapBounds(this.locationList)
+      } else {
+        this.mapCenter = utils.getMapCenter(this.locationList)
+        // 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/components/LocationSelectorDialog.vue

@@ -59,19 +59,8 @@
                 </v-card-text>
               </v-card>
             </v-col>
-            <v-col cols="12" sm="6" style="min-height:200px">
-              <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 results" :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>
+            <v-col cols="12" sm="6" style="min-height:400px">
+              <LeafletMap :locationList="results" />
             </v-col>
           </v-row>
         </v-sheet>
@@ -126,8 +115,6 @@
 </template>
 
 <script>
-import 'leaflet/dist/leaflet.css'
-import { LMap, LTileLayer, LMarker, LPopup } from '@vue-leaflet/vue-leaflet'
 import { defineAsyncComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useAppStore } from '../store'
@@ -136,12 +123,9 @@ import utils from '../utils.js'
 
 export default {
   components: {
-    LMap,
-    LTileLayer,
-    LMarker,
-    LPopup,
     LocationOSMTagChip: defineAsyncComponent(() => import('../components/LocationOSMTagChip.vue')),
     LocationOSMIDChip: defineAsyncComponent(() => import('../components/LocationOSMIDChip.vue')),
+    LeafletMap: defineAsyncComponent(() => import('../components/LeafletMap.vue')),
   },
   emits: ['location', 'close'],
   data() {
@@ -152,11 +136,6 @@ export default {
       },
       loading: false,
       results: null,
-      // map
-      map: null,
-      mapZoom: 5,
-      mapCenter: [45, 5],
-      mapBounds: null,
       // search
       searchProvider: 'photon',  // 'nominatim', 'photon'
     }
@@ -180,22 +159,6 @@ export default {
     fieldRequired(v) {
       return !!v
     },
-    initMap() {  // TODO: improve map setup
-      this.map = this.$refs.map.leafletObject
-      if (this.mapBounds) {
-        this.map.fitBounds(this.mapBounds)
-      }
-    },
-    processResults(data, source='nominatim') {
-      this.results = data
-      if (this.results.length > 1) {
-        this.mapBounds = utils.getMapBounds(this.results, source)
-      } else {
-        this.mapCenter = utils.getMapCenter(this.results, source)
-        this.mapZoom = 12
-        this.mapBounds = null
-      }
-    },
     search() {
       this.$refs.locationInput.blur()
       this.results = null
@@ -205,7 +168,7 @@ export default {
         .then((data) => {
           this.loading = false
           if (data.length) {
-            this.processResults(data, 'nominatim')
+            this.results = data
           } else {
             this.results = this.$t('LocationSelector.NoResult')
           }
@@ -215,7 +178,7 @@ export default {
         .then((data) => {
           this.loading = false
           if (data.length) {
-            this.processResults(data, this.searchProvider)
+            this.results = data
           } else {
             this.results = this.$t('LocationSelector.NoResult')
           }
@@ -228,12 +191,6 @@ export default {
     getLocationUniqueID(location) {
       return utils.getLocationUniqueID(location)
     },
-    getLocationTag(location) {
-      return utils.getLocationTag(location)
-    },
-    getLocationLatLng(location) {
-      return utils.getLocationLatLng(location)
-    },
     selectLocation(location) {
       this.$emit('location', location)
       this.close()

src/utils.js

@@ -269,20 +269,40 @@ function getLocationLatLng(locationObject) {
   else if (locationObject.geometry && locationObject.geometry.coordinates) {
     return [locationObject.geometry.coordinates[1], locationObject.geometry.coordinates[0]]
   }
+  // OP
   return [locationObject.osm_lat, locationObject.osm_lon]
 }
 
-function getMapBounds(results, source='nominatim') {
-  if (source === 'photon') {
-    return results.map(l => [l.geometry.coordinates[1], l.geometry.coordinates[0]])
+function getMapBounds(results) {
+  if (results.length > 0) {
+    // Nominatim
+    if (results[0].lat && results[0].lon) {
+      return results.map(l => [l.lat, l.lon])
+    }
+    // Photon
+    else if (results[0].geometry && results[0].geometry.coordinates) {
+      return results.map(l => [l.geometry.coordinates[1], l.geometry.coordinates[0]])
+    }
+    // OP
+    return results.map(l => [l.osm_lat, l.osm_lon])
   }
-  return results.map(l => [l.lat, l.lon])
+  return null
 }
-function getMapCenter(results, source='nominatim') {
-  if (source === 'photon') {
-    return [results[0].geometry.coordinates[1], results[0].geometry.coordinates[0]]
+
+function getMapCenter(results) {
+  if (results.length > 0) {
+    // Nominatim
+    if (results[0].lat && results[0].lon) {
+      return [results[0].lat, results[0].lon]
+    }
+    // Photon
+    else if (results[0].geometry && results[0].geometry.coordinates) {
+      return [results[0].geometry.coordinates[1], results[0].geometry.coordinates[0]]
+    }
+    // OP
+    return [results[0].osm_lat, results[0].osm_lon]
   }
-  return [results[0].lat, results[0].lon]
+  results [45, 5]
 }