javascript - How to use Leaflet.js plugin with Stamen maps? - Stack Overflow

admin管理员组

文章数量:1295888

I am trying to add the following Leaflet.js slider to my map:

I originally just installed leaflet when installing Carto

<!-- cartodb.js es with Leaflet @0.7 and jQuery -->
<link rel="stylesheet" href=".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="/[email protected]/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
   
<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="/[email protected]/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>

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

I originally just installed leaflet when installing Carto

<!-- cartodb.js es with Leaflet @0.7 and jQuery -->
<link rel="stylesheet" href="http://libs.cartocdn./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./[email protected]/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
   
<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg./[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);

• javascript
• d3.js
• leaflet
• cartodb
• stamen-maps

Share Follow edited Feb 19, 2018 at 23:55 James asked Feb 19, 2018 at 21:20 James James 36788 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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/toner/{z}/{x}/{y}.{ext}', {
    attribution: 'Map tiles by <a href="http://stamen.">Stamen Design</a>, <a href="http://creativemons/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap/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

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./js/tile.stamen.js"></script>

Or the secure version:

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

This code should now work:

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

本文标签： javascriptHow to use Leafletjs plugin with Stamen mapsStack Overflow