Karten-Demo

Klick irgendwo auf die Karte — die geoAPI liefert dir die nächste Stadt, deren Zeitzone, Einwohnerzahl und Koordinaten zurück. Drei Tabs zum Stöbern.

Klick auf die Karte. Die rechte Sidebar wird automatisch mit den Daten des nächsten Ortes gefüllt.

Hier siehst du zusätzlich, was im Hintergrund passiert: welche URL der Map-Widget aufruft und was die API zurückliefert.

Anfrage

URL erscheint hier nach dem ersten Klick.

Antwort (rohe JSON)

JSON-Antwort erscheint hier.
Was du gerade beobachtest: Bei jedem Klick auf die Karte ruft das Widget https://geoapi.world/api/lookup.php?lat=…&lon=…&mode=… auf. Die JSON-Antwort enthält das Treffer-Objekt unter hit. Die Sidebar wird daraus aufgebaut, der Marker bekommt ein Popup, und im double-Modus wird ein zweiter Marker am gefundenen Ort plus eine gestrichelte Linie gezeichnet.

Der komplette Quelltext der Karten-Demo

Genau dieser Code erzeugt die Karte oben. Du kannst ihn 1:1 als Vorlage nehmen.

<!DOCTYPE html>
<html lang="de">
<head><meta charset="utf-8"><title>Meine Karte</title></head>
<body>

  <div data-geoapi-map
       data-geoapi-mode="city"
       data-geoapi-center="50.1,10.0"
       data-geoapi-zoom="5"
       data-geoapi-marker="double"
       style="height: 500px"></div>

  <script src="https://geoapi.world/dist/geoapi-map.js"></script>

</body>
</html>

Das war alles. Leaflet (die Karten-Bibliothek) wird automatisch nachgeladen — du musst nichts installieren.

Vier Bausteine, mit denen du die Karte an deine Anwendung anpassen kannst — alle live ausprobierbar.

AStartansicht: Zentrum & Zoom

Mit data-geoapi-center="lat,lon" bestimmst du, wo die Karte initial steht; mit data-geoapi-zoom den Zoomlevel (0 = Welt, 19 = Hausnummer).

<div data-geoapi-map
     data-geoapi-center="40.7128,-74.0060"
     data-geoapi-zoom="11"
     data-geoapi-mode="city"
     style="height: 280px"></div>

BMarker-Modus: Klick + Treffer + Linie

Im Modus double setzt die Karte zwei Marker — einen an deiner Klickposition und einen am gefundenen Ort — und verbindet sie mit einer Linie. Praktisch, um die Distanz zu sehen. Default ist single.

<div data-geoapi-map
     data-geoapi-marker="double"
     data-geoapi-mode="city"
     data-geoapi-center="48.5,9.5"
     data-geoapi-zoom="8"
     style="height: 280px"></div>

CAuto-Fill: Daten in eigene Felder schreiben

Genau wie beim Eingabefeld: setze data-geoapi-fill="key" auf beliebige Elemente. Klick auf die Karte, der Ort wird in die Felder eingetragen.

Gewählter Ort: —

Land: —

Zeitzone: —

Einwohner: —

Koordinaten: —, — 

<div data-geoapi-map data-geoapi-name="picked"
     style="height: 280px"></div>

<p>Gewählter Ort:
  <strong data-geoapi-fill="name"
          data-geoapi-fill-from="picked"></strong></p>
<p>Zeitzone:  <strong data-geoapi-fill="timezone"
                       data-geoapi-fill-from="picked"></strong></p>
<p>Einwohner: <strong data-geoapi-fill="population"
                       data-geoapi-fill-from="picked"></strong></p>
Hidden-Felder fürs Form? Mit data-geoapi-name="prefix" werden automatisch {prefix}_geonameid, {prefix}_timezone, {prefix}_lat, {prefix}_lon, {prefix}_cc als Hidden-Inputs angelegt — direkt nutzbar im Form-POST.

DAnderer Karten-Stil (Tile-Server)

Standardmäßig kommen die Karten-Kacheln von OpenStreetMap. Mit data-geoapi-tiles kannst du jeden anderen Tile-Server angeben. Wähle einen Stil aus — die Karte wechselt sofort:

HTML-Code für den aktuell gewählten Stil:

<div data-geoapi-map style="height: 280px"></div>
Lizenz beachten: jeder Tile-Server hat eigene Nutzungsbedingungen. Für Demos und private Nutzung sind die hier gezeigten Anbieter alle frei. Bei produktiv-hohem Traffic eigenen Server (z. B. via switch2osm) oder kostenpflichtigen Anbieter (Mapbox, MapTiler) erwägen.

Wie geht es weiter?