Skip to content

Vue3 place search for Austria, using the BEV Kataster API

Notifications You must be signed in to change notification settings

w3geo/vue-place-search

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b99f74f · Feb 12, 2025

History

66 Commits
Oct 31, 2024
Feb 9, 2025
Feb 11, 2025
Feb 11, 2025
Jul 16, 2024
Oct 31, 2024
Feb 11, 2025
Feb 10, 2025
Feb 11, 2025
Feb 12, 2025
Feb 11, 2025
Jul 16, 2024
Jul 16, 2024
Feb 11, 2025

Repository files navigation

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