get osm node data in object

This commit is contained in:
Tykayn 2023-03-02 16:22:14 +01:00 committed by tykayn
parent 99df39d89a
commit 3bd3883d2e
6 changed files with 155 additions and 71 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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",

View File

@ -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