Vue Place Search

Vue3 place search for Austria, using the BEV Kataster API.

Usage

npm install @w3geo/vue-place-search

result event

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

<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