I'm trying to use Leaflet to generate an interactive map. However I'm having some trouble rendering the tilelayer. I'm using dustjs to render the HTML, which is only giving me a blank map, like so:
I initially tried to complete this using MapBox as per the Quick Start guide. I believe I've got the correct access token,
var mymap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=XYZ', {
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>',
maxZoom: 18,
id: 'USERNAME.STYLEID',
accessToken: 'XYZ'
}).addTo(mymap);
I got my style id from the URL like this:
I also tried using OSM in order to bypass any issues with getting the access token and project id, so I took this code from a tutorial I found:
var map = L.map('map', {
center: [43.64701, -79.39425],
zoom: 15
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
But that also renders a blank map.
Here is the full code dump using OSM:
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="/styles/leaflet.css" />
<script src="../js/leaflet.js"></script>
</head>
<body onload="onload()">
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
var map = L.map('map', {
center: [43.64701, -79.39425],
zoom: 15
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
</body>
Thanks in advance for any help. If you need more info let me know.
It looks like the the parenthesis in the tilelayer
are not working as they should. As the templates are compiled, therefore the dust compiler is likely ignoring the parameters in {}
Include a *.js
file rather than inline-ing would work.