Search code examples
javascripthtmlleafletdust.js

Cannot render Leaflet tilelayer

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:

Blank map

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 &copy; <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:

Style id source

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: '&copy; <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: '&copy; <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.

Solution

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