Map features

Search

Type-ahead search for places and addresses. The service behind it is a config choice — two are built in, and an SDI can point the same box at its own gazetteer.

Try it: type stephansplatz, or a district, or a mountain. Arrow keys move through the list, Enter picks. Paste 47.2692, 11.4041 and it is recognised as a coordinate instead of a query.

What this demo shows

Debounced type-ahead — one request per pause, and a slow answer never overwrites a newer one
Results are biased toward the current view, so nearby matches come first
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

Photon is the default, not the commitment The built-in default is Photon (OSM data, made for type-ahead). Public instances come with fair-use expectations — for production, self-host it or point the config at the gazetteer your organisation is required to use.

Configuration

Your own gazetteer

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

          "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 — the same shape Photon and most OGC API Features endpoints return. "nominatim" handles the classic array with lat/lon/display_name. Either way the service must send CORS headers, because the browser calls it directly.

From the host page

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

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