Embed GPX traces directly in Jekyll/Octopress posts and pages. Uses Leaflet to display maps.
Disclaimer: minimalistic work from a ruby noob, definitely open to suggestions
## Installation
- copy
gpx_trace.rbin the(_)pluginsdirectory - copy
leaflet-custom.cssin thesource/stylesheetsdirectory - copy
leaflet.htmlin thesource/_includesdirectory - append
{% if page.enable_gpx_traces %}{% include leaflet.html %}{% endif %}tosource/_includes/custom/head.htmlwhich loads Leaflet on pages that require it - set
leaflet_tile_urlandleaflet_tile_attribproperties in_config.ymlto Leaflet tile URL template (directly embedding API key and style ID in the URL rather than using templating) and attribution. For low traffic OpenStreetMap tiles may be used, larger sites should use alternate services
## Usage
First define a template for the map, for example at _traces/my_template.tpl:
{% for track in gpx.tracks %}
{% assign id = helper.unique_id %}
<figure>
<div class="leaflet-custom bigmap" id="{{ id }}"></div>
<figcaption>{{ track.name }}</figcaption>
</figure>
<script>$(function() {
var bounds;
var map = L.map('{{ id }}');
var segment;
{% for segment in track.segments %}
segment = {{ segment.points_json }};
bounds = bounds ? bounds.extend(segment) : new L.LatLngBounds(segment);
L.polyline(segment, {color: 'red'}).addTo(map);
{% endfor %}
map.fitBounds(bounds);
L.tileLayer('{{ helper.tile_url }}', { attribution: '{{ helper.tile_attrib }}', maxZoom: 18 }).addTo(map);
})</script>
{% endfor %}
The template receives arguments:
gpx: the GPX trace as an objecthelper: a helper object containing tile configuration and ways to obtain unique map identifiers
Pages that include traces must declare it in Jekyll's front-matter:
---
enable_gpx_traces: true
---
and the custom tag can be used any number of times in the page:
{% gpx_trace _traces/track.gpx _traces/my_template.tpl %}
with arguments being:
- the path to the GPX file, relative to the
sourcedirectory - the path to the template file, relative to the
sourcedirectory