leaflet shortcode

2019-05-30.md.txt

+++
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") }}

console.log.txt

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.

leaflet.html

<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>