90 lines
2.8 KiB
Vue
90 lines
2.8 KiB
Vue
<template>
|
|
<div class="section">
|
|
<h1>Restos</h1>
|
|
|
|
une carte présentant des restaurants sur Leaflet. Demande sur overpass api
|
|
|
|
<p>
|
|
<a :href="requestData">
|
|
{{ requestData }}
|
|
</a>
|
|
</p>
|
|
<div v-if="RestosPoints.elements" style="height: 75vh; width: 50vw">
|
|
<!-- <l-map v-model="zoom" :zoom="zoom" :center="[BBOX.X, BBOX.Y]">-->
|
|
<!-- <l-tile-layer-->
|
|
<!-- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"-->
|
|
<!-- ></l-tile-layer>-->
|
|
|
|
<!-- </l-map>-->
|
|
</div>
|
|
<ul v-if="RestosPoints.elements">
|
|
<span v-for="elem in RestosPoints.elements" class="button is-info marged">
|
|
<div v-if="elem.tags">
|
|
{{ elem.tags.name }} -
|
|
<!-- <div v-if="elem.tags.cuisine">cuisine: {{ elem.tags.cuisine }}</div>-->
|
|
</div>
|
|
<!-- {{ elem.lat }}-->
|
|
<!-- {{ elem.lon }}-->
|
|
</span>
|
|
<div>
|
|
<h2>{{ RestosPoints.elements.length }} Restaurants dans le secteur</h2>
|
|
</div>
|
|
<li v-for="elem in RestosPoints.elements">
|
|
<div v-if="elem.tags">
|
|
nom: {{ elem.tags.name }}
|
|
<br />
|
|
ville: {{ elem.tags['addr:city'] }}
|
|
<div v-if="elem.tags.cuisine">cuisine: {{ elem.tags.cuisine }}</div>
|
|
</div>
|
|
|
|
<br />lat:
|
|
{{ elem.lat }}
|
|
<br />lon: {{ elem.lon }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
|
|
import 'leaflet/dist/leaflet.css'
|
|
import RestosPoints from '../mocks/restos_overpass.json'
|
|
|
|
const BBOX = {
|
|
X: 48.6605988,
|
|
Y: 2.2420476,
|
|
}
|
|
const baseApi = 'https://overpass-api.de/api/'
|
|
const requestData = `https://overpass-api.de/api/interpreter?data=%2F*%0AThis+has+been+generated+by+the+overpass-turbo+wizard.%0AThe+original+search+was%3A%0A%E2%80%9Crestaurant%E2%80%9D%0A*%2F%0A%5Bout%3Ajson%5D%5Btimeout%3A25%5D%3B%0A%2F%2F+gather+results%0A(%0A++%2F%2F+query+part+for%3A+%E2%80%9Crestaurant%E2%80%9D%0A++node%5B%22amenity%22%3D%22restaurant%22%5D(48.62088169353486%2C2.13134765625%2C48.6817808659474%2C2.312450408935547)%3B%0A++way%5B%22amenity%22%3D%22restaurant%22%5D(48.62088169353486%2C2.13134765625%2C48.6817808659474%2C2.312450408935547)%3B%0A++relation%5B%22amenity%22%3D%22restaurant%22%5D(48.62088169353486%2C2.13134765625%2C48.6817808659474%2C2.312450408935547)%3B%0A)%3B%0A%2F%2F+print+results%0Aout+body%3B%0A%3E%3B%0Aout+skel+qt%3B`
|
|
const url = baseApi + requestData
|
|
|
|
export default {
|
|
components: {
|
|
LMap,
|
|
LTileLayer,
|
|
LMarker,
|
|
},
|
|
data() {
|
|
return {
|
|
RestosPoints,
|
|
BBOX,
|
|
iconWidth: 25,
|
|
iconHeight: 40,
|
|
zoom: 14,
|
|
baseApi,
|
|
requestData,
|
|
requestUrl: url,
|
|
}
|
|
},
|
|
callOverpass() {},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.marged {
|
|
margin: 0.5em;
|
|
}
|
|
.button {
|
|
padding: 1em;
|
|
}
|
|
</style>
|