Skip to content

Instantly share code, notes, and snippets.

@7596ff 7596ff/
Last active May 30, 2019

What would you like to do?
leaflet shortcode
title = "Going Home"
date = 2019-05-30
{{ leaflet(id="place1-to-home", gpx="/gpx/2019-05-30-place1-to-home-2019-05-21.gpx") }}
{{ leaflet(id="place2-to-home", gpx="/gpx/2019-05-30-place2-to-home-2019-05-24.gpx") }}
Uncaught Error: Bounds are not valid.
at e.fitBounds (leaflet.js:5)
at e.<anonymous> ((index):43)
at (leaflet.js:5)
at o (gpx.min.js:1)
at XMLHttpRequest.o.onreadystatechange (gpx.min.js:1)
index:43 points to map["place1-to-home"].fitBounds(;
and this is the only error I experience. I think it has something to do with
the anonymous function, but I am not sure. I haven't written enough js
lately to fix this on my own.
<div class="leaflet" id="{{id}}">
<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
<script type="text/javascript">
if (typeof map == "undefined") {
map = {};
map["{{id}}"] ="{{id}}");
L.tileLayer("http://{s}{z}/{x}/{y}.png", {
attribution: "Map data &copy; <a href=\"\">OpenStreetMap</a>"
map["{{id}}"].gpx = "{{gpx | safe }}";
map["{{id}}"].gpx_display = new L.GPX(map["{{id}}"].gpx, {
async: true,
marker_options: {
startIconUrl: "/leaflet/pin-icon-start.png",
endIconUrl: "/leaflet/pin-icon-end.png",
shadowUrl: "/leaflet/pin-shadow.png",
}).on("loaded", function(e) {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.