AddressSearch

Scope

The AddressSearch plugin allows users to search for an address. If multiple addresses are returned by services, the user is prompted to select a result.

The plugin saves the chosen information as GeoJSON to the store so that following procedures may grab it or so that other plugins may use it.

Currently supported services:

• BKG
• WFS
• Hamburg WFS-G (mpapi), may fit some WFS-G outside HH, test advised

Configuration

addressSearch

The configuration allows defining and grouping services. Grouped services can be requested in a search at the same time, and one group of searches can be active at a time. When multiple searches are in a group, they may be extended with category information to make the results easier to browse.

It is advised to either use one-search-per-group or all services in a singular group to avoid an overly complex UI. Mixed configurations may be required for more complex search requirements.

In categoryProperties and groupProperties, id strings called groupId and categoryId are used. These are arbitrary strings you can introduce and reuse to group or categorize elements together. Regarding what groups and categories are, see further below.

For details on the displayComponent attribute, refer to the Global Plugin Parameters section of @polar/core.

import Component from './component.vue'

addressSearch: {
  searchMethods: [
    {
      queryParameters: {
        searchAddress: true,
        searchStreets: true,
        searchHouseNumbers: true,
      },
      type: 'mpapi',
      url: 'example-url.com',
    },
    {
      queryParameters: {
        filter: {
          bundesland: 'Schleswig-Holstein',
        },
      },
      type: 'bkg',
      url: 'other-example-url.com',
    },
    {
      type: 'wfs'
      queryParameters: {
        srsName: 'EPSG:25832',
        typeName: 'address_shp',
        fieldName: 'objektid',
        featurePrefix: 'app',
        xmlns: 'http://www.deegree.org/app',
        useRightHandWildcard: true,
      },
    }
  ],
  afterResultComponent: Component,
  groupProperties: {
    defaultGroup: {
      limitResults: 5,
    },
  },
  focusAfterSearch: true,
  minLength: 3,
  waitMs: 300,
  addLoading: 'plugin/loadingIndicator/addLoadingKey',
  removeLoading: 'plugin/loadingIndicator/removeLoadingKey',
},

addressSearch.searchMethodsObject

Example configuration:

 searchMethods: [
  {
    groupId: 'groupAdressSearch',
    categoryId: 'categoryAddressSearch',
    type: 'bkg',
    url: 'example.com',
    hint: 'Input of e.g. street or address',
    label: 'Street search',
    placeholder: 'Street name',
    queryParameters: {
      filter: {
        bundesland: 'Schleswig-Holstein',
      },
    },
  },
],

#### addressSearch.customSearchMethod

This is a function with the following signature:

```ts
(
  // should be used to actually abort request
  signal: AbortSignal,
  // base url as configured
  url: string,
  // input value from address search input
  inputValue: string,
  // whatever was configured
  queryParameters: any
) => Promise<FeatureCollection> | never

With this, arbitrary services can be supported.

addressSearch.customSelectFunction

This is a function with the following signature:

({
  // VueX context object
  context,
  payload: {
    feature, // GeoJSON feature
    categoryId // if configured on searchService, else ''
  }
}) => void

With this, arbitrary click results can be supported. Please mind that undocumented mutations and actions fired in such a function are subject to change without further notice.

addressSearch.groupProperties

Example configuration:

groupProperties: {
  groupAdressSearch: {
    label: 'Street search',
    hint: 'Please enter a street name',
    resultDisplayMode: 'categorized',
    limitResults: 3,
  },
  defaultGroup: {
    limitResults: 5,
  },
}

addressSearch.categoryProperties

Example configuration:

categoryProperties: {
  categoryAddressSearchAutocomplete: {
    label: 'Address search hits',
  },
}

addressSearch.searchMethodsObject.queryParameters (type:common)

These fields are interpreted by all implemented services.

Example configuration:

queryParameters: {
  maxFeatures: 120,
},

addressSearch.searchMethodsObject.queryParameters (type:wfs)

Since inputs may overlap with multiple patterns, multiple queries are fired and executed on the WFS until the maxFeatures requirement is met, beginning with the pattern that 'looks like the user input the most'. The best-fitting pattern on the returned features will be used to generate a display string. When two patterns fit best, the first one is used.

Configuration examples for the likeFilterAttributes parameter:

• WFS 2.0.0 {wildCard: "%", singleChar: "*", escapeChar: "\"}
• WFS 1.0.0 {wildCard: "*", singleChar: "*", escape: "\"}

Example configurations:

type: 'wfs'
queryParameters: {
  srsName: 'EPSG:25832',
  typeName: 'address_shp',
  fieldName: 'objektid',
  featurePrefix: 'app',
  xmlns: 'http://www.deegree.org/app',
  useRightHandWildcard: true,
}

type: 'wfs'
queryParameters: {
  srsName: 'EPSG:25832',
  typeName: 'address_shp',
  featurePrefix: 'app',
  xmlns: 'http://www.deegree.org/app',
  patternKeys: {
    streetName: '([A-Za-z]+)'
    houseNumber: '([0-9]+)'
    postalCode: '([0-9]+)'
    city: '([A-Za-z]+)'
  },
  patterns: [
    '{{streetName}} {{houseNumber}} {{postalCode}} {{city}}' 
  ]
}

addressSearch.searchMethodsObject.queryParameters (type:mpapi)

Please mind that this requires a configured backend. A WFS's Stored Query is requested with predefined parameters using the masterportalapi. This implementation is meant for e.g. https://geodienste.hamburg.de/HH_WFS_GAGES, but works with other WFS configured in the same manner.

While all fields are optional, configuring none of them will yield undefined behaviour. At least one search instruction should be set to true.

type: 'mpapi'
queryParameters: {
  searchAddress: true,
  searchStreets: true,
  searchHouseNumbers: true,
},

addressSearch.searchMethodsObject.queryParameters (type:bkg)

In BKG mode, queryParameter's key-value pairs are used in the service query. E.g. {filter: { bundesland: 'Bremen' }} results in the GET request URL having &filter=bundesland:Bremen as suffix.

For more options, please check the official documentation regarding what query parameters are interpreted.

Additionally, it is possible to configure the parameters accesstoken (Authorization) or apiKey (custom header X-Api-Key) to send the described headers to the search service for authentication purposes. Note that this changes the request to be non-simple. To be able to use the parameters, the request has to be sent in cors mode and has to support preflight request OPTIONS.

type: 'bkg'
queryParameters: {
  filter: {
    bundesland: 'Schleswig-Holstein',
  },
},

Store

Mutations

setSelectedGroupName

This can be used to change the selected search group by name.

map.$store.commit(
  'plugin/addressSearch/setSelectedGroupName',
  'Parcel search'
)

Please mind that programmatically changing the search group will not trigger a search, unlike a search group change by the user. If you need a search after change, consider the search action.

Actions

search

This is a purely programmatical search method. It is not used by user input.

map.$store.dispatch('plugin/addressSearch/search', {
  input: 'Station Road 12',
  autoselect: 'first',
})

The payload object supports the following fields:

State

map.subscribe('plugin/addressSearch/chosenAddress', (chosenAddress) => {
  /* Your code. */
})

Address object as returned by search service. The result and its fields differ depending on the used backend. The callback is used whenever the user clicks on a search result or started a one-result search, which results in an auto-select of the singular result.