2

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/leaflet@1.3.1/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
   
<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.3.1/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);
James
  • 307
  • 8
  • 22

2 Answers2

9

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

eslivinski
  • 126
  • 1
  • 2
  • This successfully added the stamen layer. However it now covers my cartodb layer. Do you know why this may be the case and how to bring my cartodb layer to the front? – James Feb 20 '18 at 21:30
  • Both layers are tiled resources, if the base layer is added to the map after the carto layer, it will be stacked on top. To fix this you can either switch the order that the layers are added or simply call `Stamen_Toner.bringToBack();` – eslivinski Feb 27 '18 at 14:01
  • `Stamen_Toner.on('add', function() { this.bringToBack(); });` `map.addLayer(Stamen_Toner);` will move the basemap to the back as soon as it is added – eslivinski Feb 27 '18 at 14:05
  • You can also add a `zIndex` property to the layer definition of tile layers (layers with lower zIndexes are drawn below layers with higher zIndexes). https://gis.stackexchange.com/a/167871/81951 – eslivinski Feb 27 '18 at 14:18
2

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);
Markus
  • 479
  • 4
  • 17