-
Notifications
You must be signed in to change notification settings - Fork 0
/
openstreetmap_tiles.html
58 lines (45 loc) · 1.25 KB
/
openstreetmap_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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Map Browser</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
table{
border-collapse: collapse;
border-spacing:0;
}
td{
padding:0;
}
td img{
display:block;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var mapTable = d3.select("#map").append("table").property("border",0);
var layout = [[[-1,-1],[0,-1],[1,-1]], [[-1,0],[0,0],[1,0]], [[-1,1],[0,1],[1,1]]];
var scale = 17;
var url = "http://b.tile.openstreetmap.org/";
var center = [38893, 47656]
var rows = mapTable.selectAll("tr")
.data(layout)
.enter()
.append("tr");
var cells = rows.selectAll("td")
.data(function(d){return d;})
.enter()
.append("td")
.append("img")
.attr("src", function(d){return url+"/"+scale+"/"+(center[0]+d[0])+"/"+(center[1]+d[1])+".png"})
.on("click", function(p){
center[0] += p[0];
center[1] += p[1];
cells.attr("src", function(d){return url+"/"+scale+"/"+(center[0]+d[0])+"/"+(center[1]+d[1])+".png"})
});
</script>
</body>
</html>