Skip to content

Instantly share code, notes, and snippets.

@davewalk
Last active June 15, 2018 18:58
Show Gist options
  • Save davewalk/5893611 to your computer and use it in GitHub Desktop.
Save davewalk/5893611 to your computer and use it in GitHub Desktop.
Using Stamen map tiles in Leaflet without loading the tile.stamen.js file
var tonerUrl = "http://{S}tile.stamen.com/toner/{Z}/{X}/{Y}.png";
var url = tonerUrl.replace(/({[A-Z]})/g, function(s) {
return s.toLowerCase();
});
var basemap = L.tileLayer(url, {
subdomains: ['','a.','b.','c.','d.'],
minZoom: 0,
maxZoom: 20,
type: 'png',
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
});
basemap.addTo(map);
// Check out the tile.stamen.js file for which options you have to pass depending on the style and mapping library
@shawnbot
Copy link

shawnbot commented Jul 1, 2013

Nice! Don't forget the attribution, though:

var basemap = L.tileLayer(url, {
    subdomains: ['','a.','b.','c.','d.'],
    minZoom: 0,
    maxZoom: 20,
    type: 'png',
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
});

(You also don't have to use new with the lowercase Leaflet generators like L.tileLayer).

@adarshsosale
Copy link

I am more into GFX design than web. I purchased this HTML theme recently from themeforest and want to implement stamen maps into it. Can anyone give me a detailed noob-friendly tutorial on how to go about implementing stamen maps?
(I can see a tile.stamen.js on my Dw toolbar.
I want a live tile of Bangalore to fit the whole browser screen)
Thanks!

@micahstubbs
Copy link

this is incredibly helpful. here's a small example of it in use: http://bl.ocks.org/micahstubbs/c8a068042c204c7676a0a5d8e80bd8ec

@niahoo
Copy link

niahoo commented Mar 17, 2018

I don't understand why you replace all '{S}', '{X}', etc. with lowercase instead of directly write them in lowercase in tonerUrl ?

Thank you very much for the code, very useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment