Skip to content

Instantly share code, notes, and snippets.

@7596ff 7596ff/2019-05-30.md.txt
Last active May 30, 2019

Embed
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 e.fire (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(e.target.getBounds());
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="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js"></script>
<script type="text/javascript">
if (typeof map == "undefined") {
map = {};
}
map["{{id}}"] = L.map("{{id}}");
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "Map data &copy; <a href=\"http://www.osm.org\">OpenStreetMap</a>"
}).addTo(map["{{id}}"]);
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) {
map["{{id}}"].fitBounds(e.target.getBounds());
}).addTo(map["{{id}}"]);
</script>
</div>
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.