Skip to content

Embed GPX traces directly in Jekyll/Octopress posts and pages

License

Notifications You must be signed in to change notification settings

mathbruyen/jekyll-gpx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Jekyll-GPX

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.rb in the (_)plugins directory
  • copy leaflet-custom.css in the source/stylesheets directory
  • copy leaflet.html in the source/_includes directory
  • append {% if page.enable_gpx_traces %}{% include leaflet.html %}{% endif %} to source/_includes/custom/head.html which loads Leaflet on pages that require it
  • set leaflet_tile_url and leaflet_tile_attrib properties in _config.yml to 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 object
  • helper: 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 source directory
  • the path to the template file, relative to the source directory

License

MIT License

About

Embed GPX traces directly in Jekyll/Octopress posts and pages

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages