-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtiles.html
35 lines (32 loc) · 1.22 KB
/
tiles.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<title>Tiles!</title>
<style>
body{ font: 20px/24px "PT Sans", sans-serif; }
img { margin: 5px; display: inline-block; border: 1px solid #ccc; }
a{ color: #669; text-decoration: none; }
a:hover{text-decoration: underline; }
</style>
</head>
<body>
<p>Getting tile numbers from latitude/longitude is easy.<br/>View source on this page and see <a href='http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames'>http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames</a>.</p>
<script>
var lat = 42.363061,
lon = -71.08956;
// http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29
function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); }
function lat2tile(lat,zoom) { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); }
function addTile(zoom){
var x = long2tile(lon,zoom),
y = lat2tile(lat,zoom);
var im = document.createElement("img");
im.src = "http://tile.stamen.com/toner/" + zoom + "/" + x + "/" + y + ".png";
document.body.appendChild(im);
}
for ( var i=0; i<21; i++ ){
addTile(i);
}
</script>
</body>
</html>