Map features

Search

Search for places and addresses with suggestions as you type. Choose Photon, Nominatim or a custom geocoder in the config.

Try it: enter stephansplatz, a district or a mountain. Use the arrow keys to select a result and Enter to open it. Try 47.2692, 11.4041 for a coordinate search.

What this demo shows

Search requests wait for a pause in typing; outdated responses are discarded
The current map view helps prioritise nearby results where the provider supports it
Keyboard operation throughout: arrows, Enter, Escape; the list is a proper combobox/listbox
Picking a hit flies to it and marks it with the same highlight the map uses for selected features
Coordinate input (lat, lon) short-circuits the service entirely

Choose a search provider. Photon is the default provider. Configure the service URL to use your own instance or another supported geocoder. Check the operator’s usage terms before using a public instance.

Configuration

search.map0.json

{
  "$schema": "https://map0.net/schema/v1.json",
  "version": 1,
  "meta": { "title": "Place and address search" },
  "map": { "center": [13.35, 47.6], "zoom": 6.5 },
  "search": {
    "provider": "photon",
    "country": "AT",
    "bias": true,
    "limit": 8,
    "coordinates": true
  },
  "basemaps": [
    {
      "id": "bmapv",
      "title": "basemap.at",
      "type": "style",
      "url": "https://mapsneu.wien.gv.at/basemapv/bmapv/3857/resources/styles/root.json",
      "default": true
    },
    {
      "id": "ortho",
      "title": "Aerial",
      "type": "raster",
      "url": "https://mapsneu.wien.gv.at/basemap/bmaporthofoto30cm/normal/google3857/{z}/{y}/{x}.jpeg",
      "maxZoom": 19,
      "attribution": "© basemap.at"
    }
  ],
  "controls": { "layerSwitcher": false, "legend": false }
}

Your own gazetteer

A custom provider is a URL template plus the shape of the answer. Placeholders: {query}, {limit}, {lang}, {lng}, {lat}.

excerpt

"search": {
  "provider": {
    "url": "https://gazetteer.example.gv.at/search?q={query}&rows={limit}",
    "format": "geojson",
    "labelField": "ortsname"
  },
  "placeholder": "Ort, Adresse oder Grundstück…"
}

format: "geojson" expects a FeatureCollection of points. "nominatim" expects an array with lat, lon and display_name. The service must allow direct browser access through CORS.

From the host page

host-page.js

const viewer = document.querySelector('map0-viewer');

viewer.addEventListener('map0:search', (event) => {
  const { label, center } = event.detail.result;
  console.log('user picked', label, 'at', center);
});