Free map tiles – SKIPPERKONGEN

Map Tile Sources

Here is a list of free sources for map tiles. I'll expand this list as I find more free tiles. Notice that some websites require an attribution. I'll perhaps update this post with the attribution line for each.

Stamen "Toner"

World-wide, clean B/W theme

var theTiles = 'http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png';
var theSubdomains = ['a', 'b', 'c', 'd'];

Stamen "Terrain"

US-only, hill-shade map

var theTiles = 'http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.jpg';
var theSubdomains = ['a', 'b', 'c', 'd'];

Stamen Watercolor

World-wide, Semi-silly watercolor style

var theTiles = 'http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg';
var theSubdomains = ['a', 'b', 'c', 'd'];

OpenCycleMap

World-wide
Bicycle trails

var theTiles = 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png';
var theSubdomains = ['a', 'b', 'c', 'd'];

OpenStreetMap tiles

World-wide
The well-known OSM tiles

var theTiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var theSubdomains = ['a', 'b', 'c'];

MapQuest OSM tiles

World-wide
OSM tiles from MapQuest

var theTiles = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png';
var theSubdomains = ['otile1', 'otile2', 'otile3', 'otile4'];

MapBox street tiles

World-wide

var theTiles = 'http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.jpg';
var theSubdomains = ['a', 'b', 'c', 'd'];

MapBox terrain tiles

World-wide

var theTiles = 'http://{s}.tiles.mapbox.com/v3/examples.map-4l7djmvo/{z}/{x}/{y}.jpg';
var theSubdomains = ['a', 'b', 'c', 'd'];

MapQuest Open Aerial tiles

World-wide 0-11, US-only 12+
Aerial photos from MapQuest

var theTiles = 'http://{s}.mqcdn.com/naip/{z}/{x}/{y}.jpg';
var theSubdomains = ['oatile1', 'oatile2', 'oatile3', 'oatile4'];

I'll add more sources for tiles as I discover them (or create them). There are many on cloudmade for instance: http://maps.cloudmade.com/

Leaflet template to use with tiles

Here is a HTML template that shows a map on your webpage (depends on Leaflet and jQuery). This example uses tiles from maps.stamen.com. See below for more tile sources.

<html>
<head>
    <title>Leaflet template</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css"/>
    <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
        </script>
    <style> 
        html, body, #map {
            height: 100%;
        }
    </style>
    <script>
        $(document).ready(function() {
            var map = new L.Map('map');
 
            var theAttribution = 'Map tiles by [INSERT VENDOR]';
 
            // Change this url to use different set of map tiles
            var theTiles = 'http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png';
            var theSubdomains = ['a', 'b', 'c', 'd'];
 
            map.setView(new L.LatLng(56, 11), 7).addLayer(
            new L.TileLayer(theTiles, {
                maxZoom: 18,
                attribution: theAttribution,
                subdomains: theSubdomains
            }));
        });
 
    </script>
 
</head>
 
<body>
    <div id="map"></div>
</body>
</html>