-
Notifications
You must be signed in to change notification settings - Fork 1
/
test.html
46 lines (45 loc) · 1.92 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
<html>
<head>
<!-- NOTE: Do not use these URLs in production. If they ever change your site will break.
Instead, download the files to your web server and host them there. -->
<script src='https://raw.github.com/mapbox/wax/v3.0.8/ext/modestmaps.min.js' type='text/javascript'></script>
<script src='https://raw.github.com/mapbox/wax/v3.0.8/dist/wax.mm.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-1.6.4.min.js' type='text/javascript'></script>
</head>
<body>
<h3>Choose a layer</h3>
<ul>
<li><a href='#' rel='http://api.tiles.mapbox.com/v2/mapbox.geography-class.jsonp' class='first'>Geography Class</a></li>
<li><a href='#' rel='http://api.tiles.mapbox.com/v2/mapbox.dc-nightvision.jsonp'>DC</a></li>
<li><a href='#' rel='http://api.tiles.mapbox.com/v2/mapbox.world-blank-light,devseed.usa-unemployment-vs-stimulus.jsonp'>Employment</a></li>
</ul>
<div id='demo-map'></div>
<script>
var mm = com.modestmaps;
var map;
// Each time a layer is clicked, we request the TileJSON from
// MapBox Hosting and use that to configure the map with `map.setProvider()`.
$('li a').click(function() {
// This fetches TileJSON from the URL in the `rel` attribute of the clicked link.
wax.tilejson($(this).attr('rel'), function(tilejson) {
if (!map) {
// Set up the map. Only runs once.
map = new mm.Map('demo-map',
new wax.mm.connector(tilejson),
new mm.Point(700,400));
} else {
// We used the TileJSON to configure the map.
map.setProvider(new wax.mm.connector(tilejson));
}
// Each time we change the layer, we use the TileJSON to set the
// center of the map.
map.setCenterZoom(new mm.Location(tilejson.center[1],
tilejson.center[0]),
tilejson.center[2] - 3);
});
});
// Fire the first click.
$('li a.first').click();
</script>
</body>
</html>