-
Notifications
You must be signed in to change notification settings - Fork 4
/
willimantic2016.html
168 lines (149 loc) · 7.15 KB
/
willimantic2016.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bikemapcode</title>
<link rel="shortcut icon" href="favicon.ico">
<!-- load Bootstrap CSS for mobile devices -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Load Leaflet from a https CDN, not http. Look for updates at http://leafletjs.com/download.html -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- load jQuery -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<!-- Load Esri Leaflet -->
<script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.2/esri-leaflet.js"></script>
<!-- load Font-Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- load Leaflet.locatecontrol -->
<script src="https://cdn.jsdelivr.net/leaflet.locatecontrol/0.52.0/L.Control.Locate.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet.locatecontrol/0.52.0/L.Control.Locate.min.css"/>
<!-- load Leaflet-plugins to read GPX and KML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-plugins/1.9.0/layer/vector/GPX.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-plugins/1.9.0/layer/vector/KML.min.js"></script>
<!-- Load leaflet-geocoder to search locations-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.6.3/leaflet-geocoder-mapzen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.6.3/leaflet-geocoder-mapzen.js"></script>
<!-- load distance markers with geometry from local directory; see also style.css -->
<!-- <script src="src/leaflet.geometryutil.js" type="text/javascript"></script>
<script src="src/leaflet-distance-marker.js" type="text/javascript"></script> -->
<!-- load leaflet-sidebar from local directory -->
<link rel="stylesheet" href="src/L.Control.Sidebar.css" />
<script src="src/L.Control.Sidebar.js"></script>
<!-- load custom css -->
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', {
center: [41.712, -72.235],
zoom: 14,
zoomControl: false, // add later to reposition
scrollWheelZoom: false
});
map.attributionControl
.setPrefix("View <a href='http://github.com/jackdougherty/bikemapcode'>code on GitHub</a>, made with <a href='http://leafletjs.com' title='A JS library for interactive maps'>Leaflet</a>");
var controlLayers = L.control.layers( null, null, {
position: "topleft",
collapsed: false
}).addTo(map);
new L.control.zoom({position: "topleft",}).addTo(map);
L.control.scale().addTo(map);
var lightAll = new L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
/* OVERLAYS */
function getColor(d) {
return d == "trail" ? 'green' :
d == "road" ? 'blue' :
'white';
}
function style(feature) {
return {
color: getColor(feature.properties.type),
weight: 3,
};
}
function onEachFeature(feature, layer) {
var popupText = "Route: " + feature.properties.name
+ "<br>Mileage: " + feature.properties.mileage;
layer.bindPopup(popupText);
}
$.getJSON("routes/ECG-HopRiver-trail.geojson", function (data){
var geoJsonLayer = L.geoJson(data, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
controlLayers.addOverlay(geoJsonLayer, 'ECG 2016 Hop River');
});
$.getJSON("routes/ECG-Willimantic-west-road.geojson", function (data){
var geoJsonLayer = L.geoJson(data, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
controlLayers.addOverlay(geoJsonLayer, 'ECG Willimantic west');
});
$.getJSON("routes/ECG-Willimantic-trail.geojson", function (data){
var geoJsonLayer = L.geoJson(data, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
controlLayers.addOverlay(geoJsonLayer, 'ECG Willimantic trail');
});
$.getJSON("routes/ECG-Willimantic-downtown-road.geojson", function (data){
var geoJsonLayer = L.geoJson(data, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
controlLayers.addOverlay(geoJsonLayer, 'ECG Willimantic downtown');
});
$.getJSON("routes/ECG-Willimantic-Airline-north-trail.geojson", function (data){
var geoJsonLayer = L.geoJson(data, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
controlLayers.addOverlay(geoJsonLayer, 'ECG Air Line north');
});
$.getJSON("routes/Airline-south-trail.geojson", function (data){
var geoJsonLayer = L.geoJson(data, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
controlLayers.addOverlay(geoJsonLayer, 'Air Line south');
});
// Define flickrURL endpoint with API explorer: insert your key, and tags= or text= to filter results
var flickrURL = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=25dcc9a8c7410551dcb0af48c778bde5&user_id=56513965%40N06&tags=Willimantic2016&extras=geo%2Curl_t%2Curl_s%2Curl_m%2Ctitle&format=json&nojsoncallback=1";
// Define the flickr popup display
var popupHTML = function(photo){
var result = "";
result = '<strong>'+photo.title+'</strong><br>';
result += '<a href="'+photo.url_m+'" target="_blank">';
result += '<img src="'+photo.url_s+'"></a>'; //was url_t; want url_s; can change to url_m if desired, but frame needs work
result += '<br><small>click image to enlarge in new tab</small>';
return result;
}
// Load photos from flickr JSON (insert your flickrURL above), display with clickable photo thumbnails
$.getJSON(flickrURL, function (data) {
// Create new layerGroup for the markers, with option to append ".addTo(map);" to display by default
var layerGroup = new L.LayerGroup().addTo(map);
// Add layerGroup to your layer control and insert your label to appear in legend
controlLayers.addOverlay(layerGroup, 'Flickr photo icons');
// Start a loop to insert flickr photo data into photoContent
for (var i = 0; i < data.photos.photo.length; i++) {
var photoContent = data.photos.photo[i];
var photoIcon = L.icon(
{iconUrl: photoContent.url_t,
iconSize: [photoContent.width_t * 0.5, photoContent.height_t * 0.5]} //reduces thumbnails 50%
);
var marker = new L.marker([photoContent.latitude, photoContent.longitude], {icon: photoIcon});
marker.bindPopup(popupHTML(photoContent));
// Add the marker to the layerGroup
marker.addTo(layerGroup);
}
});
</script>
</body>
</html>