Last active
August 29, 2015 14:22
-
-
Save oscarfonts/8183524ccdf5bb399d17 to your computer and use it in GitHub Desktop.
Tilesets-in-the-cloud Tiny Viewer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Tilesets in the cloud - Leaflet example</title> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" /> | |
<style type="text/css"> | |
html, body, #map { | |
margin: 0; | |
height: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> | |
<script> | |
var layers = { | |
"S3 TMB Carto": "http://tmb-tiles.s3-website.eu-central-1.amazonaws.com/carto_tmb/{z}/{x}/{y}.png", | |
"S3 TMB Carto Soft": "http://tmb-tiles.s3-website.eu-central-1.amazonaws.com/carto_soft/{z}/{x}/{y}.png", | |
"S3 TMB Tècnica": "http://tmb-tiles.s3-website.eu-central-1.amazonaws.com/tecnica_tmb/{z}/{x}/{y}.png", | |
"Linode Tessera MBTiles": "http://demo.geomati.co:8081/{z}/{x}/{y}.png", | |
"Linode Apache Static": "http://demo.geomati.co/tmb/file-tiles/{z}/{x}/{y}.png", | |
"EC2 Tessera MBTiles": "http://ec2-tmb.geomati.co:8081/{z}/{x}/{y}.png", | |
"EC2 NGINX Static": "http://ec2-tmb.geomati.co/file-tiles/{z}/{x}/{y}.png", | |
"CloudFront Single Domain": "http://d2ktiw6ry1yddw.cloudfront.net/{z}/{x}/{y}.png", | |
"CloudFront Multiple Subdomains": "http://cf{s}-tmb.geomati.co/{z}/{x}/{y}.png" | |
}; | |
for(name in layers) { | |
layers[name] = L.tileLayer(layers[name], { | |
maxZoom: 16, | |
bounds: [ | |
[41.24712051859019, 1.8959314626397201], | |
[41.53442029978945, 2.3140591893595457] | |
], | |
subdomains: ['1', '2', '3', '4'], // Only used in cloudfront multi | |
attribution: name + ": " + layers[name], | |
errorTileUrl: "http://placehold.it/256?text=🐉" | |
}); | |
} | |
var map = L.map('map', { | |
center: [41.4, 2.1], | |
zoom: 12 | |
}); | |
for (var first in layers) { | |
layers[first].addTo(map); | |
break; | |
} | |
L.control.layers(layers).addTo(map); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment