Geojson auf einer Karte darstellen mit AMP
Jul 6, 2017 TWEET LINK

Einführung

Google Accelerated Mobile Pages bietet viele Komponenten um zusätzliche Inhalte einzubinden, Karten kann man aber nur schwer einbinden. In diesem Post erkläre ich, wie man einfach GeoJson-Dateien mit einer Karte anzeigen kann.

Möglichkeit eins: Gist

Man kann einfach einen Gist mit einer GeoJson-Datei bei Github erstellen, so wie diesen.
Gists kann man dann mit dem AMP-Modul amp-gist einbinden.

Möglichkeit zwei: der schwierigere Weg mit amp-iframe & leaflet.js

1. amp-iframe-Komponente laden

Hier beschrieben.

2. Die folgende Datei in den iframe laden:

Wenn man die Datei nicht selbst auf seinen Server packen möchte, kann man sie von hier aus einbinden: https://lukas-h.github.io/assets/map.html

3. Parameter angeben

Damit etwas auf der Karte angezeigt werden kann, muss man mehrere Parameter spezifizieren.

Benötigt:

Name Wert
src URL der GeoJson-Datei

Optional:

Name Wert
lat Breitengrad (Zahl)
long Längengrad (Zahl)
zoom Zahl von 1-20

4. Fertig

Beispiel-Karte:

github html open-source jekyll amp