diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue index b47ae520d..30a240938 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue +++ b/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 }, diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue index cbb8cb0c7..d3c04260f 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue +++ b/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(); - } + }, } diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue index f1cac5254..2c8e17687 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue +++ b/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}` diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue index e82599c77..1b220ff00 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue +++ b/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]; }, diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue index 9636a173f..4ab117395 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue +++ b/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 } }