UNPKG

@w3geo/vue-place-search

Version:

Vue3 place search for Austria, using the [BEV Kataster](https://kataster.bev.gv.at/) API.

51 lines (34 loc) 1.34 kB
# Vue Place Search Vue3 place search for Austria, using the [BEV Kataster](https://kataster.bev.gv.at/) API. ## Usage npm install @w3geo/vue-place-search ### `result` event ```html <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> ``` ### `usePlaceSearch` composable for OpenLayers 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. ```html <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. ## Developing To develop this plugin, an example has been set up in `example/`. To run the example with dynamically built plugin, run npm run dev