From 670f3354b7f4fccf46e2a80046306df8c9c303ea Mon Sep 17 00:00:00 2001
From: pyrog <pyrog@laposte.net>
Date: Sat, 19 Dec 2020 21:59:34 +0100
Subject: [PATCH] Add leaflet map

---
 components/SearchInput.vue | 407 +++++++++++--------------------------
 nuxt.config.js             |   2 +
 package.json               |   1 +
 3 files changed, 122 insertions(+), 288 deletions(-)

diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index fbe2bad..58bbaa8 100644
--- a/components/SearchInput.vue
+++ b/components/SearchInput.vue
@@ -1,173 +1,116 @@
 <template>
   <main>
     <section>
-      Résultats possibles: {{ data.length }}
-      <div v-if="select && select.properties" class="selected">
-        <p class="content">
-          <b>Selected:</b>
-          <strong>
-            {{ select.properties.name }}
-          </strong>
-          {{ select.properties.citycode }}
-          {{ select.properties.context }}
-          <br />
-          <a :href="select.properties.id">{{ select.properties.id }}</a>
-        </p>
-      </div>
+<!--       <p class="content"><b>Selected:</b> {{ selected }}</p>
+      <p class="content"><b>Coord:</b> {{ coord }}</p>
+ -->      <b-field label="Trouver mon Commerce par nom ou par SIREN">
+          <b-autocomplete
+            :data="data"
+            placeholder="ex: Chambre du commerce d'Evry"
+            field="title"
+            :loading="isFetching"
+            icon="magnify"
+            @typing="getAsyncData"
+            
+            @select="fetchOSM"
 
-      <b-field label="Trouver mon Commerce par nom ou par SIREN">
-        <b-autocomplete
-          v-model="searchQuery"
-          :data="data"
-          placeholder="ex: Chambre du commerce d'Evry"
-          field="title"
-          :loading="isFetching"
-          icon="magnify"
-          autofocus="autofocus"
-          @typing="getAsyncData"
-          @select="
-            (option) => {
-              selectChoice(option)
-            }
-          "
-        >
-          <template slot-scope="props">
-            <div class="media">
-              <div class="media-left"></div>
-              <div class="media-content">
-                <h2>
-                  {{ props.option.properties.name }}
-                </h2>
-                <div class="columns">
-                  <div class="column">
-                    <strong v-if="props.option.properties.poi">
-                      {{ props.option.properties.poi }}
-                    </strong>
-                  </div>
-                  <div class="column">
-                    {{ props.option.properties.context }}
-                  </div>
-                  <div class="column">
-                    {{ props.option.properties.type }}
-                  </div>
-                </div>
-              </div>
-            </div>
+          >
+            <template slot-scope="props">
+              {{ props.option.properties.name }} — {{ props.option.properties.context }} : {{ props.option.geometry.type }} {{ props.option.geometry.coordinates }}
           </template>
         </b-autocomplete>
       </b-field>
-
-      <div v-if="data.length">
-        <!--        <ul>-->
-        <!--          <li-->
-        <!--            v-for="item in data"-->
-        <!--            :key="item.properties.id"-->
-        <!--            class="clickable"-->
-        <!--            @click="-->
-        <!--              (event) => {-->
-        <!--                select = item-->
-        <!--                selectChoice(item)-->
-        <!--              }-->
-        <!--            "-->
-        <!--          >-->
-        <!--            <div class="columns">-->
-        <!--              <div class="column">-->
-        <!--                <strong>-->
-        <!--                  {{ item.properties.name }}-->
-        <!--                </strong>-->
-        <!--              </div>-->
-        <!--              <div class="column">-->
-        <!--                {{ item.properties.context }}-->
-        <!--              </div>-->
-        <!--              <div class="column">-->
-        <!--                {{ item.properties.type }}-->
-        <!--              </div>-->
-        <!--            </div>-->
-        <!--          </li>-->
-        <!--        </ul>-->
-      </div>
     </section>
+    <br />
     <section class="map">
-      <br />
-      ( ici une carte )
-      <!--      <img src="~assets/carte_demo.png" alt="logo osm" />-->
-    </section>
-    <h2>Sélection:</h2>
-    <fieldset class="has-background-info">
-      <section v-if="select && select.properties" class="result">
-        <div class="card-content">
-          <div class="media">
-            <div class="media-left">
-              <figure class="image is-48x48">
-                <img
-                  src="https://bulma.io/images/placeholders/96x96.png"
-                  alt="Placeholder image"
-                />
-              </figure>
-            </div>
-            <div class="media-content">
-              <p class="title is-4">
-                {{ select.properties.label }}
-                {{ select.properties.denominationunitelegale }}
-                | {{ select.properties.enseigne1etablissement }}
-              </p>
-              <p class="subtitle is-6">
-                {{ select.properties.context }}
-              </p>
-              <p class="title is-6">
-                {{ select.properties.city }} ,
-                {{ select.properties.longitude }} ,
-                {{ select.properties.latitude }}
-              </p>
-            </div>
+     <div id="map-wrap" style="height: 75vh">
+        <client-only>
+          <l-map ref="myMap" :zoom=18 :center=coord>
+            <l-tile-layer url="https://proxy-ign.openstreetmap.fr/94GjiyqD/bdortho/{z}/{x}/{y}.jpg" name="BDOrtho IGN" attribution="© <a href='https://www.openstreetmap.org/copyright'>BDOrtho IGN</a>" layer-type="base"></l-tile-layer>
+            <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" name="OSM" attribution="© <a href='https://www.openstreetmap.org/copyright'>contributeurs OSM</a>" layer-type="base"></l-tile-layer>
+            <l-tile-layer url="https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm-lite/{z}/{x}/{y}.png" name="CyclOSM" attribution="© <a href='https://www.openstreetmap.org/copyright'>CyclOSM</a>" layer-type="overlay"></l-tile-layer>
+            <l-tile-layer url="https://{s}.layers.openstreetmap.fr/bano/{z}/{x}/{y}.png" name="BANO" attribution="© <a href='https://www.openstreetmap.org/copyright'>BANO</a>" layer-type="overlay"></l-tile-layer>
+            <l-marker ref="myMarker" :lat-lng=coord ></l-marker> <!-- rajouter draggable pour le déplacer-->
+            <l-control-layers/>
+          </l-map>
+        </client-only>
+      </div>
+     </section>
+
+    <section v-if="mockAddok" class="result">
+      <div class="card-content">
+        <div class="media">
+          <div class="media-left">
+            <figure class="image is-48x48">
+              <img
+                src="https://bulma.io/images/placeholders/96x96.png"
+                alt="Placeholder image"
+              />
+            </figure>
           </div>
-
-          <div class="content">
-            NAF:
-            {{ select.properties.nomenclatureactiviteprincipaleunitelegale }}
-            siret : {{ select.properties.siret }}
-            <br />
-
-            activité principale
-            {{ select.properties.activiteprincipaleetablissement }}, source
-            {{ select.properties.source }},
-            <time datetime="2016-1-1">
-              enregistré le
-              {{ select.properties.anneeeffectifsetablissement }}, entreprise
-              créé le {{ select.properties.datedebut }}, dernirèe mise à jour
-              {{ select.properties.updated_at }}
-            </time>
+          <div class="media-content">
+            <p class="title is-4">
+              {{ mockAddok.features[0].properties.denominationunitelegale }}
+              | {{ mockAddok.features[0].properties.enseigne1etablissement }}
+            </p>
+            <p class="subtitle is-6">
+              {{ mockAddok.features[0].properties.context }}
+            </p>
+            <p class="title is-6">
+              {{ mockAddok.features[0].properties.longitude }} ,
+              {{ mockAddok.features[0].properties.latitude }}
+            </p>
           </div>
         </div>
-      </section>
-    </fieldset>
-    <h2>Tags de data.elements[0]</h2>
-    <section v-if="data && data.elements" class="edit">
-      elements: {{ data.elements.length }}
+
+        <div class="content">
+          NAF:
+          {{
+            mockAddok.features[0].properties
+              .nomenclatureactiviteprincipaleunitelegale
+          }}
+          siret : {{ mockAddok.features[0].properties.siret }}
+          <br />
+
+          activité principale
+          {{
+            mockAddok.features[0].properties.activiteprincipaleetablissement
+          }}, source {{ mockAddok.features[0].properties.source }},
+          <time datetime="2016-1-1">
+            enregistré le
+            {{ mockAddok.features[0].properties.anneeeffectifsetablissement }},
+            entreprise créé le {{ mockAddok.features[0].properties.datedebut }},
+            dernirèe mise à jour
+            {{ mockAddok.features[0].properties.updated_at }}
+          </time>
+        </div>
+      </div>
+    </section>
+    <section v-if="xml" class="edit">
       <b-field label="Nom">
         <b-input
-          v-model="data.elements[0].tags.name"
+          v-model="xml.tags.name"
           placeholder="le nom de votre commerce"
           icon="pencil"
         ></b-input>
       </b-field>
       <b-field label="Site web">
         <b-input
-          v-model="data.elements[0].tags.website"
+          v-model="xml.tags.website"
           placeholder="www.monsite.com"
           icon="planet"
         ></b-input>
       </b-field>
       <b-field label="email officiel">
         <b-input
-          v-model="data.elements[0].tags.mail"
+          v-model="xml.tags.email"
           placeholder="contact@monsite.com"
           icon="enveloppe"
         ></b-input>
       </b-field>
       <b-field label="Tel">
         <b-input
-          v-model="data.elements[0].tags.phone"
+          v-model="xml.tags.phone"
           placeholder="012345"
           icon="planet"
           type="tel"
@@ -175,92 +118,31 @@
       </b-field>
       <b-field label="Description de votre activité">
         <b-input
-          v-model="data.elements[0].tags.description"
+          v-model="xml.tags.description"
           placeholder="description de votre activité"
           icon="planet"
           type="tel"
         ></b-input>
       </b-field>
       <b-field>
-        <b-switch v-model="data.elements[0].tags.takeaway">
-          Vente à emporter
-        </b-switch>
-        <b-switch v-model="data.elements[0].tags['parking:velo']">
-          Parking vélo
-        </b-switch>
-        <b-switch v-model="data.elements[0].tags['webaccess']">
-          Accès Internet
-        </b-switch>
-        <b-switch v-model="data.elements[0].tags['elecborne']">
+        <b-switch v-model="xml.tags.takeaway"> Vente à emporter</b-switch>
+        <b-switch v-model="xml.tags['parking:velo']"> Parking vélo</b-switch>
+        <b-switch v-model="xml.tags['webaccess']"> Accès Internet</b-switch>
+        <b-switch v-model="xml.tags['elecborne']">
           borne de recharge électrique sur parking
         </b-switch>
-        <b-switch v-model="data.elements[0].tags['access:public']">
+        <b-switch v-model="xml.tags['access:public']">
           Accès autorisé au public
         </b-switch>
       </b-field>
 
       <h2 class="title is-2">Horaires d'ouverture</h2>
       <div class="padded">
-        {{ data.elements[0].tags.opening_hours }}
+        {{ xml.tags.opening_hours }}
       </div>
 
       <button class="btn button has-background-success">Enregistrer</button>
     </section>
-
-    <section>
-      <section class="comparaison">
-        <h2>Comparaison des tags</h2>
-        <table>
-          <thead>
-            <tr>
-              <td>API OSM</td>
-              <td>API addok</td>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <!--                <div v-for="(value, name) in data[0].properties.tags" :key="name">-->
-                <!--                  <div class="columns">-->
-                <!--                    <div class="column">-->
-                <!--                      <strong> {{ name }} </strong>-->
-                <!--                    </div>-->
-                <!--                    <div class="column">-->
-                <!--                      {{ value }}-->
-                <!--                    </div>-->
-                <!--                  </div>-->
-                <!--                </div>-->
-              </td>
-              <td v-if="osm_data && osm_data.elements">
-                <div
-                  v-for="(value, name) in osm_data.elements[0].tags"
-                  :key="name"
-                >
-                  <div class="columns">
-                    <div class="column">
-                      <strong> {{ name }}</strong>
-                    </div>
-                    <div class="column">{{ value }}</div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-    </section>
-    <pre v-if="select">
-      select.properties:
-      {{ select }}
-    </pre>
-    <pre v-if="data">
-      data:
-      {{ data }}
-    </pre>
-    <pre v-if="osm_data">
-      osm_data:
-      {{ osm_data }}
-    </pre>
   </main>
 </template>
 
@@ -272,20 +154,20 @@ import * as nodeInfo from '../mocks/osm_larome'
 
 export default {
   data() {
+    
     return {
       data: [],
-      osm_data: [],
-      all_tags: [],
-      xml: nodeInfo.default.elements[0],
-      mockEntreprise: resultsEntreprise.default,
-      mockAddok: resultsAddok.default,
-      select: {},
-      searchQuery: 'librairie interlignes',
+      //xml: null, 
+      xml: nodeInfo.default.elements[1],
+      mockEntreprise: null, //resultsEntreprise.default,
+      mockAddok: null, //resultsAddok.default,
+      selected: null,
       isFetching: false,
+      coord: [45.902023,6.1207122], // Annecy ! repositionne la carte à chaque changement d'onglet
     }
   },
   mounted() {
-    this.getAsyncData(this.searchQuery)
+    //this.getAsyncData('larome')
   },
   methods: {
     // You have to install and import debounce to use it,
@@ -296,12 +178,11 @@ export default {
       }
       this.isFetching = true
       this.$axios
-        .get(`https://demo.addok.xyz/search?&type=poi&q=${name}`)
+        //.get(`https://demo.addok.xyz/search?&type=poi&q=${name}`) // on filtre les POI ?!
+        .get(`https://demo.addok.xyz/search?q=${name}`) // on filtre les POI ?!
         .then(({ data }) => {
           console.log('data', data)
           this.data = []
-          this.selectChoice(data.features[0])
-
           data.features.forEach((item) => this.data.push(item))
         })
         .catch((error) => {
@@ -312,78 +193,28 @@ export default {
           this.isFetching = false
         })
     }, 500),
-    selectChoice(option) {
-      console.log('option', option)
-      this.select = option
-      if (option && option.properties.id) {
-        this.getOSMNodeData(option.properties.id)
-      }
-    },
-    getOSMNodeData(url) {
-      if (!url.length) {
-        this.osm_data = []
-      }
-      console.log('url', url)
-      if (url.includes('node')) {
-        const boom = url.split('/')
-        const objectNumber = boom[boom.length - 1]
-        this.isFetching = true
-        this.$axios
-          .get(
-            `https://api.openstreetmap.org/api/0.6/node/${objectNumber}.json`
-          )
-          .then(({ data }) => {
-            console.log('OSM data', data)
-            this.osm_data = data
-            this.mixTags()
-          })
-          .catch((error) => {
-            this.osm_data = []
-            throw error
-          })
-          .finally(() => {
-            this.isFetching = false
-          })
-      } else {
-        console.log('l url donnée n a pas de node ', url)
-      }
-    },
 
-    mixTags() {
-      if (this.osm_data && this.osm_data.elements[0]) {
-        for (const [key, value] of Object.entries(
-          this.osm_data.elements[0].tags
-        )) {
-          if (!this.all_tags[key]) {
-            this.createMissingKeyForMix(key)
-          }
-          this.all_tags[key].osm_data = value
-        }
-      }
-      if (this.select && this.osm_data.elements[0]) {
-        for (const [key, value] of Object.entries(this.select)) {
-          if (!this.all_tags[key]) {
-            this.createMissingKeyForMix(key)
-          }
-          this.all_tags[key].osm_data = value
-        }
-      }
-    },
-    createMissingKeyForMix(key) {
-      this.all_tags[key] = {
-        osm_data: '',
-        addok_data: '',
-      }
-    },
+    fetchOSM: function (event) {
+      console.log(event)
+      this.selected = event
+      this.coord[0] = event.geometry.coordinates[1]
+      this.coord[1] = event.geometry.coordinates[0]
+  
+      // On déplace la carte
+      const map = this.$refs.myMap
+      //map.setCenter(this.coord)
+      
+      map.mapObject.setView(this.coord,18) // fonctionne
+      // map.mapObject.panTo([10,10]) fonctionne aussi
+
+      const marker = this.$refs.myMarker
+      marker.setLatLng(this.coord)
+
+      // test : change le nom
+      this.xml.tags.name = event.properties.name
+      this.xml.tags.website = event.properties.id.replace("https://osm.org/","")
+      this.xml.tags.email = event.properties.type
+    }
   },
 }
 </script>
-<style>
-.clickable {
-  cursor: pointer;
-}
-
-.clickable:hover {
-  background: #d8e9ba;
-}
-</style>
diff --git a/nuxt.config.js b/nuxt.config.js
index 83a2a1b..b4fd716 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -49,6 +49,8 @@ export default {
     //     },
     //   },
     // ],
+    //https://github.com/schlunsen/nuxt-leaflet
+    'nuxt-leaflet',
   ],
 
   // Axios module configuration (https://go.nuxtjs.dev/config-axios)
diff --git a/package.json b/package.json
index ef5aeac..8954c07 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "nuxt": "^2.14.6",
     "nuxt-buefy": "^0.4.3",
     "nuxt-i18n": "^6.16.0",
+    "nuxt-leaflet": "schlunsen/nuxt-leaflet",
     "vue-i18n": "^9.0.0-beta.12",
     "xml-parser": "^1.2.1",
     "xml2js": "^0.4.23"