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 '@w3geo/vue-place-search/dist/style.css';
  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, it is recommended to set up a test app according to the instructions below, and use npm link. When that is setup properly, use

npm run watch

to automatically update the linked package in the test application.