forked from cutting-room-floor/tutorial-sherlock
-
Notifications
You must be signed in to change notification settings - Fork 0
/
step2-map.html
65 lines (59 loc) · 2.05 KB
/
step2-map.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
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
body {
margin:0px;
padding:0px;
font:normal 15px/20px Arial,sans-serif;
background:#fff;
}
#map {
position:absolute;
top:0px;
bottom:0px;
left:0px;
width:100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var geojson = [
{ "geometry": { "type": "Point", "coordinates": [-0.15591514, 51.51830379] },
"properties": { "title": "Baker St." } },
{ "geometry": { "type": "Point", "coordinates": [-0.07571203, 51.51424049] },
"properties": { "title": "Aldgate Station" } },
{ "geometry": { "type": "Point", "coordinates": [-0.08533793, 51.50438536] },
"properties": { "title": "London Bridge Station" } },
{ "geometry": { "type": "Point", "coordinates": [0.05991101, 51.48752939] },
"properties": { "title": "Woolwich Arsenal" } },
{ "geometry": { "type": "Point", "coordinates": [-0.18335806, 51.49439521] },
"properties": { "title": "Gloucester Station" } },
{ "geometry": { "type": "Point", "coordinates": [-0.19684993, 51.5033856] },
"properties": { "title": "Caulfield Gardens" } },
{ "geometry": { "type": "Point", "coordinates": [-0.10669358, 51.51433123] },
"properties": { "title": "The Daily Telegraph" } },
{ "geometry": { "type": "Point", "coordinates": [-0.12416858, 51.50779757] },
"properties": { "title": "Charing Cross Station" } },
];
var tiles = mapbox.layer().tilejson({
tiles: [ "http://a.tiles.mapbox.com/v3/examples.map-6m5zwq0h/{z}/{x}/{y}.png" ]
});
var spots = mapbox.markers.layer()
// Load up markers from geojson data.
.features(geojson);
var map = mapbox
// Creates the map with tile and spots layers.
.map('map', [tiles, spots])
// Sets the initial map view to 0.1296E, 51.5011N @ Z14.
.centerzoom({ lon:-0.1296, lat:51.5011 }, 14);
// Enable interaction events on spots layer.
mapbox.markers.interaction(spots);
</script>
</body>
</html>