forked from cutting-room-floor/tutorial-sherlock
-
Notifications
You must be signed in to change notification settings - Fork 0
/
step3-markers.html
84 lines (79 loc) · 2.7 KB
/
step3-markers.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
76
77
78
79
80
81
82
83
84
<!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%;
}
.spot {
width:120px;
height:120px;
margin:-60px 0px 0px -60px;
background:url(sprite.png) 120px 120px no-repeat;
position:absolute;
}
.spot-baker { background-position:-130px 0px; }
.spot-aldgate { background-position:-260px 0px; }
.spot-london-bridge { background-position:-390px 0px; }
.spot-woolwich { background-position:-520px 0px; }
.spot-gloucester { background-position:-650px 0px; }
.spot-caulfield-gardens { background-position:-780px 0px; }
.spot-telegraph { background-position:-910px 0px; }
.spot-charing-cross { background-position:-1040px 0px; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var geojson = [
{ "geometry": { "type": "Point", "coordinates": [-0.15591514, 51.51830379] },
"properties": { "id": "baker" } },
{ "geometry": { "type": "Point", "coordinates": [-0.07571203, 51.51424049] },
"properties": { "id": "aldgate" } },
{ "geometry": { "type": "Point", "coordinates": [-0.08533793, 51.50438536] },
"properties": { "id": "london-bridge" } },
{ "geometry": { "type": "Point", "coordinates": [0.05991101, 51.48752939] },
"properties": { "id": "woolwich" } },
{ "geometry": { "type": "Point", "coordinates": [-0.18335806, 51.49439521] },
"properties": { "id": "gloucester" } },
{ "geometry": { "type": "Point", "coordinates": [-0.19684993, 51.5033856] },
"properties": { "id": "caulfield-gardens" } },
{ "geometry": { "type": "Point", "coordinates": [-0.10669358, 51.51433123] },
"properties": { "id": "telegraph" } },
{ "geometry": { "type": "Point", "coordinates": [-0.12416858, 51.50779757] },
"properties": { "id": "charing-cross" } }
];
var tiles = mapbox.layer().tilejson({
tiles: [ "http://a.tiles.mapbox.com/v3/examples.map-liczq28b/{z}/{x}/{y}.png" ]
});
var spots = mapbox.markers.layer()
// Load up markers from geojson data.
.features(geojson)
// Define a new factory function. Takes geojson input and returns a
// DOM element that represents the point.
.factory(function(f) {
var el = document.createElement('div');
el.className = 'spot spot-' + f.properties.id;
return el;
});
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);
</script>
</body>
</html>