-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
66 lines (64 loc) · 2 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Where be the Chickens?</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiY3J1emluNzN2dyIsImEiOiI3RDdhUi1NIn0.jaEqREZw7QQMRafKPNBdmA';
var map = L.mapbox.map('map', 'cruzin73vw.MaptimeBearHome')
.setView([0.026, 0.02097], 16);
var myLayer = L.mapbox.featureLayer().addTo(map);
var geoJson = [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0.0343, 0.0131]
},
"properties": {
"title": "It's Vectoria, the Maptime Bear!",
"icon": {
"iconUrl": "data/marker_icons/bear.png",
"iconSize": [150, 150], // size of the icon
"iconAnchor": [75, 75], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -75], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0.048, 0.027]
},
"properties": {
"title": "Jon's Fancy Chicken",
"icon": {
"iconUrl": "data/marker_icons/chicken.png",
"iconSize": [150, 150],
"iconAnchor": [75, 75],
"popupAnchor": [0, -75],
"className": "dot"
}
}
}];
// Set a custom icon on each marker based on feature properties.
myLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
marker.setIcon(L.icon(feature.properties.icon));
});
// Add features to the map.
myLayer.setGeoJSON(geoJson);
</script>
</body>
</html>