Fixed: Fix map center on opening or editing address

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue

@@ -310,8 +310,8 @@ export default {
                // Note: LeafletJs demands [lat, lon]
                // cfr https://macwright.com/lonlat/
                center : [
-                  this.context.defaults.map_center.x,
-                  this.context.defaults.map_center.y
+                 this.context.defaults.map_center.x,
+                 this.context.defaults.map_center.y,
                ],
                zoom: this.context.defaults.map_center.z
             },

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue

@@ -8,8 +8,12 @@ import L from 'leaflet';
 import markerIconPng from 'leaflet/dist/images/marker-icon.png'
 import 'leaflet/dist/leaflet.css';
 
+const lonLatForLeaflet = (coordinates) => {
+  return [coordinates[1], coordinates[0]];
+}
+
 export default {
-   name: 'AddressMap',
+  name: 'AddressMap',
    props: ['entity'],
    data() {
       return {
@@ -21,10 +25,47 @@ export default {
       center() {
          return this.entity.addressMap.center;
       },
+      hasAddressPoint() {
+        if (Object.keys(this.entity.address).length === 0) {
+          return false;
+        }
+        if (null !== this.entity.address.addressReference) {
+          return true;
+        }
+        if (null !== this.entity.address.postcode && null !== this.entity.address.postcode.center) {
+          return true;
+        }
+        return false;
+      },
+     /**
+      *
+      * @returns {coordinates: [float, float], type: "Point"}
+      */
+      addressPoint() {
+        if (Object.keys(this.entity.address).length === 0) {
+          return null;
+        }
+
+        if (null !== this.entity.address.addressReference) {
+          return this.entity.address.addressReference.point;
+        }
+
+        if (null !== this.entity.address.postcode && null !== this.entity.address.postcode.center) {
+          return this.entity.address.postcode.center;
+        }
+
+        return null;
+      },
    },
    methods:{
       init() {
-         this.map = L.map('address_map').setView([46.67059, -1.42683], 12);
+        this.map = L.map('address_map');
+
+        if (!this.hasAddressPoint) {
+          this.map.setView(lonLatForLeaflet(this.entity.addressMap.center), this.entity.addressMap.zoom);
+        } else {
+          this.map.setView(lonLatForLeaflet(this.addressPoint.coordinates), 15);
+        }
 
          this.map.scrollWheelZoom.disable();
 
@@ -37,27 +78,22 @@ export default {
             iconAnchor: [12, 41],
          });
 
-         this.marker = L.marker([48.8589, 2.3469], {icon: markerIcon});
+         if (!this.hasAddressPoint) {
+           this.marker = L.marker(lonLatForLeaflet(this.entity.addressMap.center), {icon: markerIcon});
+         } else {
+           this.marker = L.marker(lonLatForLeaflet(this.addressPoint.coordinates), {icon: markerIcon});
+         }
          this.marker.addTo(this.map);
       },
       update() {
-/*<<<<<<< HEAD
-         //console.log('update map with : ', this.entity.addressMap.center)
          if (this.marker && this.entity.addressMap.center) {
-            this.marker.setLatLng(this.entity.addressMap.center);
-            this.map.setView(this.entity.addressMap.center, this.entity.addressMap.zoom);
-=======*/
-         console.log('update map with : ', this.center)
-         if (this.marker && this.center) {
-            this.marker.setLatLng(this.center);
-            this.map.setView(this.center, 15);
-//>>>>>>> 52512e45f (Fixed: [vue][add-address] fix map center when editing existing address)
+           this.marker.setLatLng(lonLatForLeaflet(this.entity.addressMap.center));
+           this.map.panTo(lonLatForLeaflet(this.entity.addressMap.center));
          }
       }
    },
-   mounted(){
+   mounted() {
       this.init();
-      this.update();
-   }
+   },
 }
 </script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue

@@ -98,11 +98,6 @@ export default {
          }
       },
    },
-   mounted() {
-      if (typeof this.value.point !== 'undefined') {
-         this.updateMapCenter(this.value.point);
-      }
-   },
    methods: {
       transName(value) {
          return value.streetNumber === undefined ? value.street : `${value.streetNumber}, ${value.street}`

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue

@@ -45,14 +45,12 @@ export default {
       },
    },
    mounted() {
-      this.init();
+     console.log('country selection mounted', this.value);
+     if (this.value !== undefined) {
+       this.selectCountry(this.value);
+     }
    },
-   methods: {
-      init() {
-         if (this.value !== undefined) {
-            this.selectCountry(this.value);
-         }
-      },
+  methods: {
       selectCountryByCode(countryCode) {
          return this.entity.loaded.countries.filter(c => c.countryCode === countryCode)[0];
       },

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue

@@ -174,8 +174,8 @@ export default {
       },
       updateMapCenter(point) {
          console.log('point', point);
-         this.addressMap.center[0] = point.coordinates[1];  // TODO use reverse()
-         this.addressMap.center[1] = point.coordinates[0];
+         this.addressMap.center[0] = point.coordinates[0];
+         this.addressMap.center[1] = point.coordinates[1];
          this.$refs.addressMap.update(); // cast child methods
       }
    }