forked from tykayn/osm_my_commerce
Add leaflet map
This commit is contained in:
pyrog
parent
2f818d63d1
commit
670f3354b7
@ -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>
|
|
||||||
|
|||||||
@ -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)
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user