address selection: fix leaflet icon url + others fix (WIP)

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js

@@ -6,9 +6,9 @@ import { getDataPromise } from './store'
 
 import App from './App.vue';
 
-getDataPromise.then(store => {
 
-   console.log('store address', store.state.referenceAddresses);
+
+getDataPromise.then(store => {
 
    const i18n = _createI18n(addressMessages);
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/map.js

@@ -1,38 +0,0 @@
-import L from 'leaflet';
-
-export const initMap = () => {
-
-
-    let map = L.map('address_map').setView([48.8589, 2.3469], 12);
-
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    }).addTo(map);
-
-    L.marker([48.8589, 2.3469]).addTo(map)
-       .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
-       .openPopup();
-
-    console.log(map);
-    return map;
-};
-
-
-
-export const updateMap = (state) => {
-
-    // console.log(state.map.center);
-
-    // let map = L.map('address_map').setView(state.map.center, state.map.zoom);
-
-    // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    //    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    // }).addTo(map);
-
-    // L.marker(state.map.center).addTo(map)
-    //    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
-    //    .openPopup();
-
-    // console.log(map);
-};
-

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js

@@ -1,6 +1,7 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
 import { getReferenceAddress } from '../api';
+import { app } from '../index';
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -20,11 +21,11 @@ const getDataPromise = getReferenceAddress()
                {id: 2, name: 'Aisne', code: '85045', country: 'FR'},
                {id: 3, name: 'Saint-Gervais', code: '85230', country: 'FR'}
             ], //TODO fetch postal codes from CHILL API
-            selectedCountry: {id: 1, name: 'France', countryCode: 'FR'}, // TODO is it ok to specify a default value here?
+            selectedCountry: {id: 1, name: 'France', countryCode: 'FR'},
             selectedCity: null,
             selectedAddress: null,
             addressMap: {
-               center : [48.8589, 2.3469],
+               center : [48.8589, 2.3469], // Note: LeafletJs demands [lat, lon] cfr https://macwright.com/lonlat/
                zoom: 12
             },
             form: {
@@ -41,6 +42,7 @@ const getDataPromise = getReferenceAddress()
                state.cities :
                state.cities.filter(c => c.country == state.selectedCountry.countryCode),
             getReferenceAddresses: state => state.referenceAddresses, //TODO filter as a function of city
+            getMapCenter: state => state.addressMap.center,
          },
          mutations: {
             setSelectedCountry(state, value) {
@@ -50,10 +52,9 @@ const getDataPromise = getReferenceAddress()
                state.selectedCity = value;
             },
             setSelectedAddress(state, value) {
-               console.log(value)
                state.selectedAddress = value;
-               state.addressMap.center = value.point.coordinates; //TODO is it OK to put this here? //call setMapCenter
+               state.addressMap.center = value.point.coordinates.reverse();
-               updateMap(state); //TODO where to listen to map center change? -> action avec dispatch
+               //app.$refs.addressMap.updateMap(); //TODO how to update the map view? -> action avec dispatch
             },
             setMapCenter(state, value) {
                state.addressMap.center = value;
@@ -63,6 +64,9 @@ const getDataPromise = getReferenceAddress()
             }
          },
          actions: {
+            updateMapCenter({ commit }, payload) {
+               commit('updateMapCenter', payload);
+            },
          }
       });
       resolve(store);

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue

@@ -31,7 +31,7 @@
 
             </div>
             <div class="address_form__map">
-               <address-map>
+               <address-map ref="addressMap">
                </address-map>
             </div>
 
@@ -88,7 +88,7 @@ export default {
             this.$store.commit('setIsNoAddress', v);
          },
          get() {
-            return this.$store.state.form.isNoAddress; //this.add_address.form.isNoAddress
+            return this.$store.state.form.isNoAddress; //TODO could be this.add_address.form.isNoAddress
          }
       },
    },

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressMap.vue

@@ -1,12 +1,13 @@
 <template>
    <div class="container">
-      <div id='address_map' v-bind='init' style='height:400px; width:400px;'></div>
+      <div id='address_map' style='height:400px; width:400px;'></div>
    </div>
 </template>
 
 <script>
 
 import L from 'leaflet';
+import markerIconPng from 'leaflet/dist/images/marker-icon.png'
 import 'leaflet/dist/leaflet.css';
 
 let map;
@@ -25,11 +26,6 @@ export default {
          }
       },
    },
-   // watch: {
-   //    center: get() {
-   //        console.log()
-   //    }
-   // },
    methods:{
       init() {
          map = L.map('address_map').setView([48.8589, 2.3469], 12);
@@ -38,16 +34,16 @@ export default {
             attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          }).addTo(map);
 
-         L.marker([48.8589, 2.3469]).addTo(map)
+         const markerIcon = L.icon({
-            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
+            iconUrl: markerIconPng,
-            .openPopup();
+         });
+
+         L.marker([48.8589, 2.3469], {icon: markerIcon}).addTo(map);
 
-         console.log(map);
       },
       update() {
-         console.log('update map', this.$store.state.addressMap.center)
+         console.log('update map with : ', this.$store.getMapCenter())
-         map.setView(this.$store.state.addressMap.center, 12);
+         map.setView(this.$store.getMapCenter(), 12);
-         //TODO update map view based on the store map centerS
       }
    },
    mounted(){