forked from mapbox/weekend-picks-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
60 lines (53 loc) · 1.94 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
<!DOCTYPE html>
<html>
<head>
<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:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='lri.AdressesStaff'></div>
<script>
// GeoJSON input features
// The image and url properties of the features will be used in
// the tooltips
var features = [{
"geometry": { "type": "Point", "coordinates": [35.650944, 34.087103]},
"properties": {
"image": "http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/DCmontage4.jpg/250px-DCmontage4.jpg",
"url": "http://en.wikipedia.org/wiki/Washington,_D.C.",
"city": "Washington, D.C."
}
},];
// Create map
var map = mapbox.map('StaffLocations');
map.addLayer(mapbox.layer().id('lri.AdressesStaff'));
// Create and add marker layer
var markerLayer = mapbox.markers.layer().features(features);
var interaction = mapbox.markers.interaction(markerLayer);
map.addLayer(markerLayer);
// get the geographical location of the top-left corner of the map
var top_left = map.pointLocation({ x: 0, y: 0});
// Set a custom formatter for tooltips
// Provide a function that returns html to be used in tooltip
interaction.formatter(function(feature) {
var o = '<a target="_blank" href="' + feature.properties.url + '">' +
'<img src="' + feature.properties.image + '">' +
'<h2>' + feature.properties.city + '</h2>' +
'</a>';
return o;
});
// Set iniital center and zoom
map.centerzoom({
lat: 34.087103,
lon: 35.650944
}, 5);
// Attribute map
map.ui.attribution.add()
.content('<a href="http://mapbox.com/about/maps">Terms & Feedback</a>');
</script>
</body>
</html>