Kartenfunktionen

Suche

Orte und Adressen mit Vorschlägen während der Eingabe suchen. In der Konfiguration stehen Photon, Nominatim oder ein eigener Geocoder zur Auswahl.

Ausprobieren: stephansplatz, einen Bezirk oder einen Berg eingeben. Mit den Pfeiltasten ein Ergebnis auswählen und mit Enter öffnen. 47.2692, 11.4041 wird als Koordinateneingabe erkannt.

Was diese Demo zeigt

Suchanfragen werden nach einer kurzen Eingabepause gesendet; veraltete Antworten werden verworfen
Der aktuelle Kartenausschnitt hilft, nahe Treffer zu bevorzugen, sofern der Anbieter dies unterstützt
Durchgehende Tastaturbedienung: Pfeiltasten, Enter, Escape; die Liste ist eine echte combobox/listbox
Bei Auswahl eines Treffers fliegt die Karte dorthin und markiert ihn mit demselben Highlight, das sie für ausgewählte Features verwendet
Koordinateneingabe (lat, lon) umgeht den Dienst vollständig

Suchanbieter auswählen. Photon ist voreingestellt. Über die Dienst-URL lässt sich eine eigene Instanz oder ein anderer unterstützter Geocoder einbinden. Für öffentliche Instanzen gelten die Nutzungsbedingungen des jeweiligen Betreibers.

Konfiguration

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 }
}

Der eigene Gazetteer

Ein eigener Provider besteht aus einem URL-Template und der Angabe, wie die Antwort aufgebaut ist. Platzhalter: {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" erwartet eine FeatureCollection mit Punkten. "nominatim" erwartet ein Array mit lat, lon und display_name. Der Dienst muss direkten Browserzugriff über CORS erlauben.

Von der Host-Seite aus

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);
});