28 lines
1,008 B
HTML
28 lines
1,008 B
HTML
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="mymap" class="mymap" style="min-height: 500px;"></div>
|
||
|
|
<style type="text/css">
|
||
|
|
.mymap img {
|
||
|
|
border: 0px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
var map = L.map('mymap');
|
||
|
|
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
|
|
attribution: 'Map data © <a href="http://www.osm.org">OpenStreetMap</a>'
|
||
|
|
}).addTo(map);
|
||
|
|
var gpx = '{{ .Get "gpx" }}'; // URL to your GPX file or the GPX itself
|
||
|
|
new L.GPX(gpx, {
|
||
|
|
marker_options: {
|
||
|
|
startIconUrl: '/img/general/pin-icon-start.png',
|
||
|
|
endIconUrl: '/img/general/pin-icon-end.png',
|
||
|
|
shadowUrl: '/img/general/pin-shadow.png'
|
||
|
|
},
|
||
|
|
async: true
|
||
|
|
}).on('loaded', function(e) {
|
||
|
|
map.fitBounds(e.target.getBounds());
|
||
|
|
}).addTo(map);
|
||
|
|
</script>
|