Vue3 place search for Austria, using the BEV Kataster API.
npm install @w3geo/vue-place-search
<template>
<PlaceSearch @result="showResult" />
</template>
<script setup>
import { PlaceSearch } from '@w3geo/vue-place-search';
function showResult(result) {
console.log(result); // Output will be a GeoJSON feature
}
</script>
Instead of the @result
event, the usePlaceSearch()
composable can be used to pass the search result location directly to the provided OpenLayers map instance, or to watch for new search results.
<script setup>
import { usePlaceSearch } from '@w3geo/vue-place-search';
// Your composable that provides an OpenLayers map:
import { useMap } from './composables/useMap.js';
const map = useMap();
const { result } = usePlaceSearch(map);
watch(result, value => {
console.log(value);
});
</script>
With this, the map view will automatically be centered on the result geometry, and the bounding box of the selected search result will be displayed on the map, if available.
To develop this plugin, an example has been set up in example/
. To run the example with dynamically built plugin, run
npm run dev