/
test.html
75 lines (68 loc) · 2.1 KB
/
test.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
<head>
<title>GeoFF Tests</title>
<script type="text/javascript" src="src/geoff.js"></script>
<script type="text/javascript" src="lib/polymaps.min.js"></script>
<style type="text/css" media="screen">
@import url(style/screen.css);
</style>
</head>
<body>
<h1>Geoff tests</h1>
<h2>Making points & enclosing them in extents</h2>
<div class="map" id="points">
</div>
<script type="text/javascript">
var po = org.polymaps;
function map(id) {
return po.map()
.container(document.getElementById(id).appendChild(po.svg("svg")))
.center({lat: 37.765, lon: -122.419})
.zoom(11)
.add(po.interact())
.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/26490/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
}
var p1 = geoff.feature.Point([-122.531, 37.817], {name: "San Francisco"}),
p2 = geoff.feature.clone(p1, null, true);
p2.geometry.coordinates = [-122.345, 37.703];
var ext = geoff.extent();
ext.encloseFeature(p1);
ext.encloseFeature(p2);
var points = map("points");
points.add(po.geoJson()
.on("load", po.stylist()
.attr("fill", "#09f")
.attr("fill-opacity", .1)
.attr("stroke", "#000")
.attr("stroke-length", 1))
.features([ext.toFeature(), p1, p2]));
points.extent(ext.toArray());
points.zoom(Math.floor(points.zoom()));
</script>
<h2>Reading an extent from one map and drawing it as a feature on another</h2>
<div class="map float" id="extent1">
</div>
<div class="map float" id="extent2">
</div>
<script type="text/javascript">
var left = map("extent1"),
right = map("extent2");
var extent = geoff.extent(),
layer = po.geoJson()
.on("load", po.stylist()
.attr("fill", "#90f")
.attr("fill-opacity", .1)
.attr("stroke", "#000")
.attr("stroke-length", 1));
right.add(layer);
left.on("move", function(e) {
extent.reset().encloseLocations(left.extent());
layer.features([extent.toFeature()]);
});
left.zoomBy(1);
right.zoomBy(-2);
</script>
</body>
</html>