CODEWITHSUNDEEP
javascriptd3.jsleafletcartodbstamen-maps
James
James

Reputation: 367

How to use Leaflet.js plugin with Stamen maps?

I am trying to add the following Leaflet.js slider to my map: https://github.com/Eclipse1979/leaflet-slider

I originally just installed leaflet when installing Carto

<!-- cartodb.js comes with Leaflet @0.7 and jQuery -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />

However when I try to install a later version of Leaflet to user the Slider, the following type error is raised:

TypeError: L.StamenTileLayer is not a constructor

I have tried installing Leaflet using the quick start guide:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
   
<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>

and by installing the filed directly from the plugin master

<link rel="stylesheet" href="leaflet.css">
<link rel="stylesheet" href="example.css">
<link rel="stylesheet" href="leaflet-slider.css">

<script src="leaflet.js"></script>
<script src="leaflet-slider.js"></script>

Both cases result in the same error. I used the following to load my Stamen layer: 

var map = L.map('map').setView([51.47, 0.25], 10);
    map.on('click', onMapClick);
    //create a tile layer for our toner basemap
    var tonerLayer = new L.StamenTileLayer("toner");
    map.addLayer(tonerLayer);

I used the following code to add the spinner:

slider = L.control.slider(function(value) {
            console.log(value);
        }, {
        min: 1000,
        max: 5000,
        value: 1000,
        step:100,
        size: '250px',
        orientation:'horizontal',
        id: 'slider'
    }).addTo(map);

Upvotes: 2

Views: 4244

Answers (2)

Markus
Markus

Reputation: 528

You tried to use a Stamen function, L.StamenTileLayer, without first loading the Stamen library. Install it by adding this in your head tag (as well as the Leaflet.js library):

<script src="http://maps.stamen.com/js/tile.stamen.js"></script>

Or the secure version:

<script src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js"></script>

This code should now work:

var tonerLayer = new L.StamenTileLayer("toner");
map.addLayer(tonerLayer);

Upvotes: 2

eslivinski
eslivinski

Reputation: 136

Have you tried defining your basemap as a TileLayer? The syntax is different when adding layers to native leaflet maps because they the various basemaps are not built-in to Leaflet.

var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   subdomains: 'abcd',
   minZoom: 0,
   maxZoom: 20,
   ext: 'png'
});
map.addLayer(Stamen_Toner);

checkout the Leaflet Providers Demo for other samples and basemaps

Upvotes: 10

Related Questions