get osm node data in object
This commit is contained in:
parent
99df39d89a
commit
3bd3883d2e
Binary file not shown.
@ -9,12 +9,6 @@
|
||||
Renseignez votre commerce sur OSM
|
||||
</h2>
|
||||
<SearchLand />
|
||||
|
||||
<img class="mt-10" src="/img/OSM-FR.svg" alt="OSM fr" width="3em" height="3em"/>
|
||||
<img class="rounded-2xl" src="/img/carte_demo.png" alt="carte"/>
|
||||
|
||||
<PoiForm />
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-5xl">
|
||||
Formulaire de POi
|
||||
</h1>
|
||||
<form @submit="submitForm">
|
||||
<input type="text" v-model="machin">
|
||||
<button type="submit" value="envoyer" />
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const data = {
|
||||
name: 'machin'
|
||||
}
|
||||
const methods = {
|
||||
submitForm(event:Event){
|
||||
event.preventDefault()
|
||||
console.log('submit')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -1,22 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
|
||||
const queryString = ref("la tour eiffel")
|
||||
let selectedPoi = {}
|
||||
import {Ref} from "#imports";
|
||||
|
||||
const queryString: Ref<String> = ref("la tour eiffel")
|
||||
let selectedPoi: any = ref({})
|
||||
|
||||
const {data, pending, refresh} = await useAsyncData(() => {
|
||||
if (queryString.value.length > 3) {
|
||||
return $fetch(`https://demo.addok.xyz/search?&type=poi&q=${queryString.value}`)
|
||||
}
|
||||
},
|
||||
let osmNodeData = {};
|
||||
|
||||
const {data, refresh, pending} = await useAsyncData('/api/hello',
|
||||
() => $fetch(`https://demo.addok.xyz/search?&type=poi&q=${queryString.value}`),
|
||||
{watch: [queryString] })
|
||||
|
||||
function selectPoi(poi) {
|
||||
selectedPoi = poi;
|
||||
function setPoi(newPoi){
|
||||
selectedPoi = newPoi
|
||||
}
|
||||
function submitForm(){
|
||||
console.log('envoi du form')
|
||||
}
|
||||
|
||||
computed : {
|
||||
poi_list : data.features
|
||||
async function getOSMNodeData(url:string) {
|
||||
if (!url.length) {
|
||||
this.fetchedData.osm_data = []
|
||||
}
|
||||
console.log('url', url)
|
||||
if (url.includes('node')) {
|
||||
const boom = url.split('/')
|
||||
const objectNumber = boom[boom.length - 1]
|
||||
let response = await useAsyncData('/api/hello',
|
||||
() => $fetch(`https://api.openstreetmap.org/api/0.6/node/${objectNumber}.json`))
|
||||
osmNodeData = response.data._rawValue.elements[0]
|
||||
console.log('osmNodeData', osmNodeData )
|
||||
|
||||
|
||||
} else {
|
||||
console.log('l url donnée n a pas de node ', url)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -24,14 +42,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="card mt-10">
|
||||
|
||||
|
||||
<div class="selectedPoi" v-if="selectedPoi">
|
||||
sélectionné: {{selectedPoi.label}}
|
||||
<input type="text" v-model="selectedPoi.name">
|
||||
</div>
|
||||
<div class="search-form">
|
||||
|
||||
<label for="search_poi" class="text-4xl font-bold">
|
||||
<!-- Effectuer une recherche-->
|
||||
🔍
|
||||
@ -42,43 +53,106 @@
|
||||
placeholder="tour eiffel"
|
||||
autofocus="autofocus"
|
||||
v-model="queryString">
|
||||
<button :disabled="pending" class="h-10 px-6 rounded-md bg-black text-white"
|
||||
type="submit"
|
||||
@click="useAsyncData()">
|
||||
Rechercher
|
||||
</button>
|
||||
</div>
|
||||
<div class="states">
|
||||
<div v-if="pending"> Loading ...</div>
|
||||
<span class="mx-2" v-if="data?.features.length"> {{data.features.length}} résultats </span>
|
||||
<span class="mx-2" v-if="data">
|
||||
{{data?.features?.length}} résultats
|
||||
</span>
|
||||
</div>
|
||||
<div class="my-2" >
|
||||
|
||||
|
||||
<div v-for="elem in data.features" :key="elem.properties.id">
|
||||
<div v-for="poiFeatures in data?.features" :key="poiFeatures.id" >
|
||||
|
||||
<button
|
||||
class="bg-slate-900 hover:bg-slate-700 text-slate-100 rounded-md font-medium leading-6 py-1 mb-1 ring-1 ring-inset ring-slate-900/5 mx-auto p-2 px-4 w-1/2"
|
||||
@click="selectPoi(elem)">
|
||||
class="bg-slate-600 hover:bg-slate-700
|
||||
text-slate-100 rounded-md
|
||||
font-medium py-1 mb-1 ring-1
|
||||
ring-inset ring-slate-900/5
|
||||
text-left p-2 px-4 w-1/2"
|
||||
:class="{'bg-slate-900': poiFeatures.id === selectedPoi?.id}"
|
||||
@click="selectedPoi = poiFeatures">
|
||||
<span class="text-md">
|
||||
|
||||
{{elem.properties.name}}
|
||||
✏️ {{poiFeatures.properties.name}}
|
||||
</span>
|
||||
<br>
|
||||
<span class="text-sm">
|
||||
{{elem.properties.poi}}
|
||||
{{elem.properties.city}}
|
||||
{{elem.properties.citycode}}
|
||||
{{elem.properties.context}}
|
||||
{{poiFeatures.properties.poi}}
|
||||
{{poiFeatures.properties.city}}
|
||||
{{poiFeatures.properties.citycode}}
|
||||
{{poiFeatures.properties.context}}
|
||||
</span>
|
||||
</button>
|
||||
<!-- {{elem.properties.label}}-->
|
||||
|
||||
</div>
|
||||
<!-- <pre class="text-left"><code>{{ data }}</code></pre>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="selectedPoi bg-slate-400 p-4" v-if="selectedPoi.properties">
|
||||
<!-- <PoiForm :currentPoi="selectedPoi"/>-->
|
||||
<h1 class="text-5xl">
|
||||
|
||||
Point d'intérêt sélectionné
|
||||
</h1>
|
||||
|
||||
<form @submit="submitForm" v-if="selectedPoi.properties?.name">
|
||||
<label for="prop_name" class="font-medium">Nom</label>
|
||||
<input
|
||||
class="p-4 rounded w-full h-10 mb-10"
|
||||
id="prop_name"
|
||||
type="text" v-model="selectedPoi.properties.name">
|
||||
|
||||
|
||||
<input class="bg-slate-800 text-white rounded my-4 p-4 w-full" type="submit" value="modifier"/>
|
||||
</form>
|
||||
<div>
|
||||
|
||||
<a class="bg-slate-800 text-white rounded mt-10 p-4 w-auto" :href="selectedPoi.properties?.id">
|
||||
🗺️ voir ce point sur OpenStreetMap</a>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
|
||||
<p>
|
||||
Lat , Lon:
|
||||
{{selectedPoi?.geometry?.coordinates[0]}},
|
||||
{{selectedPoi?.geometry?.coordinates[1]}}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<!-- <div class="debug">-->
|
||||
|
||||
<!-- sélectionné:-->
|
||||
<!-- <pre>-->
|
||||
<!-- {{selectedPoi}}-->
|
||||
<!-- </pre>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<!-- debug:-->
|
||||
|
||||
<!-- <pre>-->
|
||||
<!-- {{data}}-->
|
||||
<!-- </pre>-->
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<button class="bg-slate-800 text-white rounded mt-10 p-4 w-auto"
|
||||
@click="getOSMNodeData('https://osm.org/node/330414112')">
|
||||
|
||||
Get OSM data example
|
||||
</button>
|
||||
|
||||
<div class="node-data" v-if="osmNodeData">
|
||||
<pre>
|
||||
{{osmNodeData}}
|
||||
</pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/tailwindcss": "^6.4.1",
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"nuxt": "^3.2.3",
|
||||
"postcss": "^8.4.21",
|
||||
|
||||
@ -1544,6 +1544,20 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@tailwindcss/typography@npm:^0.5.9":
|
||||
version: 0.5.9
|
||||
resolution: "@tailwindcss/typography@npm:0.5.9"
|
||||
dependencies:
|
||||
lodash.castarray: ^4.4.0
|
||||
lodash.isplainobject: ^4.0.6
|
||||
lodash.merge: ^4.6.2
|
||||
postcss-selector-parser: 6.0.10
|
||||
peerDependencies:
|
||||
tailwindcss: "*"
|
||||
checksum: b98e21bdd1798d7e4683499893c5c20ad43fcc8955d5d6eefbe1d30e98e9b6c28949ae8f276d39be9a66fafe843597717196bc5a0a2ac0f87ef86aa051ab9611
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@tootallnate/once@npm:2":
|
||||
version: 2.0.0
|
||||
resolution: "@tootallnate/once@npm:2.0.0"
|
||||
@ -4829,6 +4843,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lodash.castarray@npm:^4.4.0":
|
||||
version: 4.4.0
|
||||
resolution: "lodash.castarray@npm:4.4.0"
|
||||
checksum: fca8c7047e0ae2738b0b2503fb00157ae0ff6d8a1b716f87ed715b22560e09de438c75b65e01a7e44ceb41c5b31dce2eb576e46db04beb9c699c498e03cbd00f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lodash.debounce@npm:^4.0.8":
|
||||
version: 4.0.8
|
||||
resolution: "lodash.debounce@npm:4.0.8"
|
||||
@ -4878,6 +4899,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lodash.merge@npm:^4.6.2":
|
||||
version: 4.6.2
|
||||
resolution: "lodash.merge@npm:4.6.2"
|
||||
checksum: ad580b4bdbb7ca1f7abf7e1bce63a9a0b98e370cf40194b03380a46b4ed799c9573029599caebc1b14e3f24b111aef72b96674a56cfa105e0f5ac70546cdc005
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lodash.pick@npm:^4.4.0":
|
||||
version: 4.4.0
|
||||
resolution: "lodash.pick@npm:4.4.0"
|
||||
@ -6375,6 +6403,16 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"postcss-selector-parser@npm:6.0.10":
|
||||
version: 6.0.10
|
||||
resolution: "postcss-selector-parser@npm:6.0.10"
|
||||
dependencies:
|
||||
cssesc: ^3.0.0
|
||||
util-deprecate: ^1.0.2
|
||||
checksum: 46afaa60e3d1998bd7adf6caa374baf857cc58d3ff944e29459c9a9e4680a7fe41597bd5b755fc81d7c388357e9bf67c0251d047c640a09f148e13606b8a8608
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9":
|
||||
version: 6.0.11
|
||||
resolution: "postcss-selector-parser@npm:6.0.11"
|
||||
@ -6787,6 +6825,7 @@ __metadata:
|
||||
resolution: "root-workspace-0b6124@workspace:."
|
||||
dependencies:
|
||||
"@nuxtjs/tailwindcss": ^6.4.1
|
||||
"@tailwindcss/typography": ^0.5.9
|
||||
autoprefixer: ^10.4.13
|
||||
nuxt: ^3.2.3
|
||||
postcss: ^8.4.21
|
||||
|
||||
Loading…
Reference in New Issue
Block a user