Jekyll: Darstellung von GPX Information mit Leaflet

An dieser Stelle hatte ich mal beschrieben wie man GPX Daten mit der Javascriptbibliothek Leaflet in einer HTML Seite darstellen kann.

Mit dem Wechsel auf Jekyll hat die alte Implementierung eh nicht mehr funktioniert und ich wollte es auch erreichen das ich die Karten innerhalb der Jekyll Strukturen darstellen kann. Das ist im Prinzip auch kein Problem, die einzige Frage die sich stellt ist wie man die notwendigen Javascriptaufrufe in der richtigen Reihenfolge einbinden kann ohne sie in allen anderen Seiten, die keine Karten darstellen sollen, mit einzubinden.

Dies habe ich nach dieser Anleitung wie folgt gelöst. Der Header bekommt folgende zusätzliche Abfrage:

{% if page.custom_js %}
  {% for js_file in page.custom_js %}
    <script src='{{ js_file }}' type="text/javascript"></script>
  {% endfor %}
{% endif %}

In den Seiten oder Posts in denen ich weiteres Javascript einbinden möchte kommt die Variable custom-js dazu und dann sind wir eigentlich schon fertig.

---
layout: page
title: Vogesen 2014
permalink: /wanderungen/vogesen-2014.html
date: ' 2015-05-21 14:42:40'
custom_js:
- /assets/leaflet/leaflet.js
- /assets/leaflet/gpx.js
- /assets/leaflet/leaflet-map.js
- /assets/leaflet/leaflet-map-vogesen-2014.js
---
<link rel="stylesheet" href="/assets/leaflet/leaflet.css"/>
<div id="map" style="width: 700px; height: 600px"></div>

So sieht das dann aus wenn es fertig ist. Irgendwann werde ich das auch noch responsive machen.