Add leaflet map

This commit is contained in:
pyrog 2020-12-19 21:59:34 +01:00
parent 2f818d63d1
commit 670f3354b7
3 changed files with 122 additions and 288 deletions

View File

@ -1,173 +1,116 @@
<template> <template>
<main> <main>
<section> <section>
Résultats possibles: {{ data.length }} <!-- <p class="content"><b>Selected:</b> {{ selected }}</p>
<div v-if="select && select.properties" class="selected"> <p class="content"><b>Coord:</b> {{ coord }}</p>
<p class="content"> --> <b-field label="Trouver mon Commerce par nom ou par SIREN">
<b>Selected:</b> <b-autocomplete
<strong> :data="data"
{{ select.properties.name }} placeholder="ex: Chambre du commerce d'Evry"
</strong> field="title"
{{ select.properties.citycode }} :loading="isFetching"
{{ select.properties.context }} icon="magnify"
<br /> @typing="getAsyncData"
<a :href="select.properties.id">{{ select.properties.id }}</a>
</p> @select="fetchOSM"
</div>
<b-field label="Trouver mon Commerce par nom ou par SIREN"> >
<b-autocomplete <template slot-scope="props">
v-model="searchQuery" {{ props.option.properties.name }} {{ props.option.properties.context }} : {{ props.option.geometry.type }} {{ props.option.geometry.coordinates }}
: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> </template>
</b-autocomplete> </b-autocomplete>
</b-field> </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> </section>
<br />
<section class="map"> <section class="map">
<br /> <div id="map-wrap" style="height: 75vh">
( ici une carte ) <client-only>
<!-- <img src="~assets/carte_demo.png" alt="logo osm" />--> <l-map ref="myMap" :zoom=18 :center=coord>
</section> <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>
<h2>Sélection:</h2> <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>
<fieldset class="has-background-info"> <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>
<section v-if="select && select.properties" class="result"> <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>
<div class="card-content"> <l-marker ref="myMarker" :lat-lng=coord ></l-marker> <!-- rajouter draggable pour le déplacer-->
<div class="media"> <l-control-layers/>
<div class="media-left"> </l-map>
<figure class="image is-48x48"> </client-only>
<img </div>
src="https://bulma.io/images/placeholders/96x96.png" </section>
alt="Placeholder image"
/> <section v-if="mockAddok" class="result">
</figure> <div class="card-content">
</div> <div class="media">
<div class="media-content"> <div class="media-left">
<p class="title is-4"> <figure class="image is-48x48">
{{ select.properties.label }} <img
{{ select.properties.denominationunitelegale }} src="https://bulma.io/images/placeholders/96x96.png"
| {{ select.properties.enseigne1etablissement }} alt="Placeholder image"
</p> />
<p class="subtitle is-6"> </figure>
{{ select.properties.context }}
</p>
<p class="title is-6">
{{ select.properties.city }} ,
{{ select.properties.longitude }} ,
{{ select.properties.latitude }}
</p>
</div>
</div> </div>
<div class="media-content">
<div class="content"> <p class="title is-4">
NAF: {{ mockAddok.features[0].properties.denominationunitelegale }}
{{ select.properties.nomenclatureactiviteprincipaleunitelegale }} | {{ mockAddok.features[0].properties.enseigne1etablissement }}
siret : {{ select.properties.siret }} </p>
<br /> <p class="subtitle is-6">
{{ mockAddok.features[0].properties.context }}
activité principale </p>
{{ select.properties.activiteprincipaleetablissement }}, source <p class="title is-6">
{{ select.properties.source }}, {{ mockAddok.features[0].properties.longitude }} ,
<time datetime="2016-1-1"> {{ mockAddok.features[0].properties.latitude }}
enregistré le </p>
{{ select.properties.anneeeffectifsetablissement }}, entreprise
créé le {{ select.properties.datedebut }}, dernirèe mise à jour
{{ select.properties.updated_at }}
</time>
</div> </div>
</div> </div>
</section>
</fieldset> <div class="content">
<h2>Tags de data.elements[0]</h2> NAF:
<section v-if="data && data.elements" class="edit"> {{
elements: {{ data.elements.length }} 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-field label="Nom">
<b-input <b-input
v-model="data.elements[0].tags.name" v-model="xml.tags.name"
placeholder="le nom de votre commerce" placeholder="le nom de votre commerce"
icon="pencil" icon="pencil"
></b-input> ></b-input>
</b-field> </b-field>
<b-field label="Site web"> <b-field label="Site web">
<b-input <b-input
v-model="data.elements[0].tags.website" v-model="xml.tags.website"
placeholder="www.monsite.com" placeholder="www.monsite.com"
icon="planet" icon="planet"
></b-input> ></b-input>
</b-field> </b-field>
<b-field label="email officiel"> <b-field label="email officiel">
<b-input <b-input
v-model="data.elements[0].tags.mail" v-model="xml.tags.email"
placeholder="contact@monsite.com" placeholder="contact@monsite.com"
icon="enveloppe" icon="enveloppe"
></b-input> ></b-input>
</b-field> </b-field>
<b-field label="Tel"> <b-field label="Tel">
<b-input <b-input
v-model="data.elements[0].tags.phone" v-model="xml.tags.phone"
placeholder="012345" placeholder="012345"
icon="planet" icon="planet"
type="tel" type="tel"
@ -175,92 +118,31 @@
</b-field> </b-field>
<b-field label="Description de votre activité"> <b-field label="Description de votre activité">
<b-input <b-input
v-model="data.elements[0].tags.description" v-model="xml.tags.description"
placeholder="description de votre activité" placeholder="description de votre activité"
icon="planet" icon="planet"
type="tel" type="tel"
></b-input> ></b-input>
</b-field> </b-field>
<b-field> <b-field>
<b-switch v-model="data.elements[0].tags.takeaway"> <b-switch v-model="xml.tags.takeaway"> Vente à emporter</b-switch>
Vente à emporter <b-switch v-model="xml.tags['parking:velo']"> Parking vélo</b-switch>
</b-switch> <b-switch v-model="xml.tags['webaccess']"> Accès Internet</b-switch>
<b-switch v-model="data.elements[0].tags['parking:velo']"> <b-switch v-model="xml.tags['elecborne']">
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']">
borne de recharge électrique sur parking borne de recharge électrique sur parking
</b-switch> </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 Accès autorisé au public
</b-switch> </b-switch>
</b-field> </b-field>
<h2 class="title is-2">Horaires d'ouverture</h2> <h2 class="title is-2">Horaires d'ouverture</h2>
<div class="padded"> <div class="padded">
{{ data.elements[0].tags.opening_hours }} {{ xml.tags.opening_hours }}
</div> </div>
<button class="btn button has-background-success">Enregistrer</button> <button class="btn button has-background-success">Enregistrer</button>
</section> </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> </main>
</template> </template>
@ -272,20 +154,20 @@ import * as nodeInfo from '../mocks/osm_larome'
export default { export default {
data() { data() {
return { return {
data: [], data: [],
osm_data: [], //xml: null,
all_tags: [], xml: nodeInfo.default.elements[1],
xml: nodeInfo.default.elements[0], mockEntreprise: null, //resultsEntreprise.default,
mockEntreprise: resultsEntreprise.default, mockAddok: null, //resultsAddok.default,
mockAddok: resultsAddok.default, selected: null,
select: {},
searchQuery: 'librairie interlignes',
isFetching: false, isFetching: false,
coord: [45.902023,6.1207122], // Annecy ! repositionne la carte à chaque changement d'onglet
} }
}, },
mounted() { mounted() {
this.getAsyncData(this.searchQuery) //this.getAsyncData('larome')
}, },
methods: { methods: {
// You have to install and import debounce to use it, // You have to install and import debounce to use it,
@ -296,12 +178,11 @@ export default {
} }
this.isFetching = true this.isFetching = true
this.$axios 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 }) => { .then(({ data }) => {
console.log('data', data) console.log('data', data)
this.data = [] this.data = []
this.selectChoice(data.features[0])
data.features.forEach((item) => this.data.push(item)) data.features.forEach((item) => this.data.push(item))
}) })
.catch((error) => { .catch((error) => {
@ -312,78 +193,28 @@ export default {
this.isFetching = false this.isFetching = false
}) })
}, 500), }, 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() { fetchOSM: function (event) {
if (this.osm_data && this.osm_data.elements[0]) { console.log(event)
for (const [key, value] of Object.entries( this.selected = event
this.osm_data.elements[0].tags this.coord[0] = event.geometry.coordinates[1]
)) { this.coord[1] = event.geometry.coordinates[0]
if (!this.all_tags[key]) {
this.createMissingKeyForMix(key) // On déplace la carte
} const map = this.$refs.myMap
this.all_tags[key].osm_data = value //map.setCenter(this.coord)
}
} map.mapObject.setView(this.coord,18) // fonctionne
if (this.select && this.osm_data.elements[0]) { // map.mapObject.panTo([10,10]) fonctionne aussi
for (const [key, value] of Object.entries(this.select)) {
if (!this.all_tags[key]) { const marker = this.$refs.myMarker
this.createMissingKeyForMix(key) marker.setLatLng(this.coord)
}
this.all_tags[key].osm_data = value // 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
createMissingKeyForMix(key) { }
this.all_tags[key] = {
osm_data: '',
addok_data: '',
}
},
}, },
} }
</script> </script>
<style>
.clickable {
cursor: pointer;
}
.clickable:hover {
background: #d8e9ba;
}
</style>

View File

@ -49,6 +49,8 @@ export default {
// }, // },
// }, // },
// ], // ],
//https://github.com/schlunsen/nuxt-leaflet
'nuxt-leaflet',
], ],
// Axios module configuration (https://go.nuxtjs.dev/config-axios) // Axios module configuration (https://go.nuxtjs.dev/config-axios)

View File

@ -29,6 +29,7 @@
"nuxt": "^2.14.6", "nuxt": "^2.14.6",
"nuxt-buefy": "^0.4.3", "nuxt-buefy": "^0.4.3",
"nuxt-i18n": "^6.16.0", "nuxt-i18n": "^6.16.0",
"nuxt-leaflet": "schlunsen/nuxt-leaflet",
"vue-i18n": "^9.0.0-beta.12", "vue-i18n": "^9.0.0-beta.12",
"xml-parser": "^1.2.1", "xml-parser": "^1.2.1",
"xml2js": "^0.4.23" "xml2js": "^0.4.23"