-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·112 lines (95 loc) · 3.52 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<title>Spooner Unit photos</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:image" content="route.png" />
<link rel="stylesheet" href="lib/leaflet/leaflet.css" />
<link rel="stylesheet" href="lib/cluster/MarkerCluster.css" />
<link rel="stylesheet" href="Leaflet.Photo.css" />
<link rel="stylesheet" href="css/map.css" />
</head>
<body>
<div id="map"></div>
<script src="lib/reqwest.min.js"></script>
<script src="lib/leaflet/leaflet.js"></script>
<script src="lib/cluster/leaflet.markercluster.js"></script>
<script src="Leaflet.Photo.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
var outdoors = L.tileLayer('http://api.tiles.mapbox.com/v4/slugis.25db57b7/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2x1Z2lzIiwiYSI6IlB5TlZENVUifQ.Z597Ia0qffZlYcGpbJtzTA'),
afternoon = L.tileLayer('http://api.tiles.mapbox.com/v4/slugis.da0a550c/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2x1Z2lzIiwiYSI6IlB5TlZENVUifQ.Z597Ia0qffZlYcGpbJtzTA'),
contrast = L.tileLayer('http://api.tiles.mapbox.com/v4/slugis.6a32585c/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2x1Z2lzIiwiYSI6IlB5TlZENVUifQ.Z597Ia0qffZlYcGpbJtzTA');
var map = L.map('map', {
zoomControl: false,
maxZoom: 18,
attributionControl: false,
layers: [outdoors]
});
var baseMaps = {
"Outdoors": outdoors,
"Satellite": afternoon,
"High Contrast" : contrast
};
L.control.layers(baseMaps, null).addTo(map);
var album = L.control.attribution().addTo(map);
album.addAttribution('<a href="https://plus.google.com/photos/100743205449794348841/albums/6107409309843920897">Original photo album</a>');
album.addAttribution('<a href="https://github.com/SLUGIS/Spooner">Code</a>');
album.setPrefix("");
album.setPosition('bottomleft');
L.control.zoom({
position:'bottomright'
}).addTo(map);
var photoLayer = L.photo.cluster().on('click', function (evt) {
var photo = evt.layer.photo,
template = '<img src="{url}"/></a><p>{caption}</p>';
if (photo.video && (!!document.createElement('video').canPlayType('video/mp4; codecs=avc1.42E01E,mp4a.40.2'))) {
template = '<video autoplay controls poster="{url}"><source src="{video}" type="video/mp4"/></video>';
};
evt.layer.bindPopup(L.Util.template(template, photo), {
className: 'leaflet-popup-photo',
minWidth: 400
}).openPopup();
});
var spooner = L.geoJson(null, {
style: function (feature) {
return {
color: "red",
fill: false,
opacity: 0.6,
clickable: false
};
}
});
$.getJSON("spooner.geojson", function (data) {
spooner.addData(data);
map.addLayer(spooner);
});
reqwest({
url: 'https://picasaweb.google.com/data/feed/api/user/100743205449794348841/albumid/6107409309843920897?alt=json-in-script',
type: 'jsonp',
success: function (data) {
var photos = [];
data = data.feed.entry;
for (var i = 0; i < data.length; i++) {
var photo = data[i];
if (photo['georss$where']) {
var pos = photo['georss$where']['gml$Point']['gml$pos']['$t'].split(' ');
photos.push({
lat: pos[0],
lng: pos[1],
url: photo['media$group']['media$content'][0].url,
caption: photo['media$group']['media$description']['$t'],
thumbnail: photo['media$group']['media$thumbnail'][0].url,
video: (photo['media$group']['media$content'][1] ? photo['media$group']['media$content'][1].url : null)
});
};
}
photoLayer.add(photos).addTo(map);
map.fitBounds(photoLayer.getBounds());
}
});
</script>
</body>
</html>