Home

Openlayers-Karten für Hugo-Websites

 Kartografie/GIS/Navigation  376  2 min

Übersicht

Die Radreiseberichte auf diesem Blog enthalten für jeden Reisetag eine interaktive Karte, auf welcher die gefahrene Strecke angezeigt wird. Hugo bietet dafür keine Lösung an und ich habe auch kein Theme oder Plugin dafür gefunden. Im Zusammenhang mit der Migration dieses Blogs von Drupal nach Hugo habe ich mir daher eine eigene Lösung erstellt. Diese besteht aus

  • einem Javascript-Skript
  • einer CSS-Datei
  • drei Hugo-Shortcodes

Für die Anzeige der Karte werden die Javascript-Bibliotheken OpenLayers und ol-layerswitcher verwendet.

Das Design und Verhalten der Karten ist weitgehend hart für meine Bedürfnisse codiert.

Das Anwendungs-Skript, die Bibliotheken und die CSS-Dokumente wurden mit Hilfe des Build-Tools Vite gebundelt. Die Anwendung besteht daher aus folgenden Dateien:

  ├── static
  |   ├── css
  |   |   └── index.css
  |   └── js
  |       |── index.js
  |       └── index.js.map
  └── layouts
      └── shortcodes
          ├── addMap.html
          ├── addTrack.html
          └── addWaypoint.html

Shortcodes

addTrack

Mit diesem Shortcode wird eine GPX-Datei angegeben, deren Inhalt auf der Karte angezeigt werden soll. Optional kann die Farbe für die Anzeige von Tracks spezifiziert werden. In der GPX-Datei enthaltene Wegpunkte werden ebenfalls angezeigt. Der Shortcode kann mehrfach verwendet werden.

Beispiel:

{{< addTrack track="2020-06-30.gpx" color="#ff0000" index=0 >}}

Anstelle einer GPX-Datei kann eine GeoJson-Datei angegeben werden. Damit ist es möglich, Flächen (Multipolygone) auf der Karte darzustellen. Beispiel: Mit dem Fahrrad befahrene Departements in Frankreich.

addWaypoint

Dieser Shortcode fügt der Karte einen Marker an den angegeben Koordinaten und mit dem spezifizierten Label hinzu. Beispiel:

{{< addWaypoint lat=45.462641160098 lon=4.778709289074 title=" " description="Camping L’Île des Pêcheurs in Condrieu" >}}

Dieser Shortcode wurde im Zusammenhang mit der Migration von Drupal nach Hugo benötigt. Bei neuen Inhalten ist es einfacher, Wegpunkte in einer GPX-Datei zu übergeben.

addMap

Dieser Shortcode fügt das DIV-Element für die Anzeige der Karte, das Stylesheet und das Anwendungs-Skript in das HTML-/Markdown-Dokument ein:

{{< addMap >}}

Funktionsweise

Die Shortcodes addTrack und addWaypoint fügen Inline-Javascript-Code in das HTML-Dokument ein, mit dem die übergebenen Parameter in globalen JS-Variablen abgelegt werden. addMap sorgt dann dafür, dass das Skript index.js aufgerufen wird. Dieses Skript fügt die Karte in die Seite ein und zeigt die in den globalen Variablen übergebenen Objekte auf der Karte an.

Beispiel

HTML-/MD-Dokument:

    {{< addTrack track="2020-06-30.gpx" color="#ff0000" index=0 >}}"
    {{< addMap >}}

Von Hugo erzeugte HTML-Seite:

<script>
   trackName[0]="2020-06-30.gpx";
   trackColor[0]="#ff0000"
</script>
<link rel=stylesheet href=../../../css/index.css>
<div id=map>
</div>
<script type=module crossorigin src=../../../js/index.js></script>

Siehe auch: