Hello i hope i am posting in the right forum here i tried the leaflet forum but go no answers...
I am trying to get a .gpx to show on my map but with no luck. I was wondering if someone could take a look at what i have an give me a pointer as to why it might not be showing. Thanks...
<html>
<head>
<title>Leaflet</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://tiles.primarysolutions.org/leaflet-plugins-master/layer/vector/GPX.js"></script>
</head>
<body>
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width:100%; height:100%" id="map"></div>
<script type='text/javascript'>
var map = L.map('map').setView([38.738853, 0.039328], 13);
bounds = new L.LatLngBounds(new L.LatLng(38.589932205137842, -0.24943472068649825), new L.LatLng(38.834130125688162, 0.250210265053367));
L.tileLayer('http://tiles.primarysolutions.org/tiles/{z}/{x}/{y}.png', {
minZoom: 12,
maxZoom: 15,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
}).addTo(map);
var track = new L.GPX("http://tiles.primarysolutions.org/gpx/demo.GPX", {async: true})
.on("loaded", function(e) { map.fitBounds(e.target.getBounds()); });
map.addLayer(track);
map.addControl(new L.Control.Layers({}, {'GPX':track}));
</script>
</body>
</html>