I followed the introduction on the home page of Proj4Leaflet to create a basic slippy-map with their example projection (code below). This is working without issue, but is using the tile servers of the company that maintains Proj4Leafet, specifically: http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png
When I try to use an alternative tile server, such as Mapbox's https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken} (where I use my own token), CartoDB's http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png or OSM's http://a.tile.openstreetmap.org/{z}/{x}/{y}.png the map simply doesn't render and I get a blank grey map.
Is it possible to use other tile servers with Proj4Leaflet, or is there something in my configuration that is incompatible with them?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leaflet GeoJSON</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="map"></div>
<script src="js/require.js"></script>
<script>
requirejs.config({
baseUrl: 'js',
paths: {
"leaflet": "http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet"
}
});
requirejs(['leaflet', 'proj4', 'proj4leaflet'],
function (L, proj4, proj4leaflet) {
// SWEREF99 TM (EPSG:3006) with map's pixel origin at SWEREF99 TM coordinate (0, 0)
var crs = new L.Proj.CRS(
'EPSG:3006',
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [8192, 4096, 2048, 1024, 512, 256, 128,
64, 32, 16, 8, 4, 2, 1, 0.5],
origin: [0, 0]
});
var map = new L.map('map',
{
center: [59.35, 18.066667],
zoom: 10,
maxZoom: 14,
minZoom: 0,
crs: crs
});
L.tileLayer('http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png', {
maxZoom: crs.options.resolutions.length,
minZoom: 0,
continuousWorld: true,
attribution: 'Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>, Imagery © 2013 <a href="http://www.kartena.se/">Kartena</a>'
}).addTo(map);
});
</script>
</body>
</html>
Proj4Leaflet is a Leaflet plugin meant for when you need to use a Coordinate Reference System (CRS) that's not supported by Leaflet out of the box. Almost every tileprovider out there uses EPSG3857 which is Leaflet's default CRS:
The most common CRS for online maps, used by almost all free and commercial tile providers. Uses Spherical Mercator projection. Set in by default in Map's crs option.
Mapbox, CartoDB and OSM all serve EPSG3857 tilesets. From the Mapbox's help page:
Mapbox supports the popular Web Mercator projection, and currently does not support any other projections as output. Web Mercator is a nearly conformal projection that is adopted by the vast majority of web maps and its use allows you to combine Mapbox’s maps with other layers in the same projection. Commonly this projection is referred to as EPSG:900913 or EPSG:3857.
https://www.mapbox.com/help/projection-support/
Without looking i'm betting you'll find the same answer over at CartoDB and OSM. If you need to use EPSG3006 you'll need to stick with providers that serve tiles in that projection. Here's one: http://maps.omniscale.com/en/openstreetmap/epsg-3006