-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
292 lines (241 loc) · 13.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
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!doctype html>
<!-- This is version 2 of the webmap -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>NECSC Project Map and Portal</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<!-- Loading Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<!-- Loading Leaflet library -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<!-- Loading ESRI Leaflet -->
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
integrity="sha512-pijLQd2FbV/7+Jwa86Mk3ACxnasfIMzJRrIlVQsuPKPCfUBCDMDUoLiBQRg7dAQY6D1rkmCcR8286hVTn/wlIg=="
crossorigin=""></script>
<!-- Load Esri Leaflet Geocoder from CDN -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/esri-leaflet-geocoder.css"
integrity="sha512-v5YmWLm8KqAAmg5808pETiccEohtt8rPVMGQ1jA6jqkWVydV5Cuz3nJ9fQ7ittSxvuqsvI9RSGfVoKPaAJZ/AQ=="
crossorigin="">
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet-geocoder.js"
integrity="sha512-/jzi62LjYIRhJ4Iv3gE5Trzdz0YrpLVDS5514JDeijbMd9P8uZqad4+4RlyYtpcebB/jnhLUfB0B6dOgMh21gg=="
crossorigin=""></script>
<!-- Loading Leaflet.zoomhome (stored locally) -->
<link rel="stylesheet" href="scripts/leaflet.zoomhome.css"/>
<script src="scripts/leaflet.zoomhome.min.js"></script>
<!-- Loading Leaflet-markercluster -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<!-- Loading Leaflet.MarkerCluster.LayerSupport -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.layersupport.js"></script>
<!-- Linking to custom CSS for this map -->
<link rel="stylesheet" href="NECSCmap.css">
</head>
<body>
<!-- Creating container for the map -->
<div id="panel">
<a href="http://necsc.umass.edu/"><image src="NECSC-logo.png" class="necsc-logo" ></a>
<div id="text">
<p>This interactive map shows the geographic distribution of the almost 100 projects funded by the <a href="http://necsc.umass.edu/">Northeast Climate Science Center</a> since 2012. Research projects from all seven science themes are spread across the region; some projects can be applied in all 22 states, others focused on sub-regional systems (montane forest systems, specific river basins, or coastal areas, for example). Topically, the research areas are also broad, including climate projections, sea level rise, coastal erosion and inundation, wildlife and fish response, freshwater resources and drought, forest health and distribution, and cultural assets and adaptation. Ultimately, all the projects aim to provide valuable information for local managers, decision makers, and communities to support their choices of the best strategies to prepare for, and adapt to, a changing world.</p>
<p>To explore the projects on this map, you can hover your mouse around regions of interest, or select for projects that address certain science themes using the drop-down filter menu. You can zoom in and pan the map, and by clicking on a project, get a summary of the project and find links for more information.</p>
</div>
<div id="query"> <!--class="leaflet-bar"-->
<label>
Filter projects by Science Theme:
<select id="Science_Themes">
<!-- make sure to encase string values in single quotes for valid sql -->
<option value='1=1'>All</option>
<option value="Science_Themes LIKE '%Climate impacts on Atlantic and Great Lakes coastal and nearshore environments%'">Climate impacts on Atlantic and Great Lakes coastal and nearshore environments</option>
<option value="Science_Themes LIKE '%Climate impacts on freshwater resources and ecosystems%'">Climate impacts on freshwater resources and ecosystems</option>
<option value="Science_Themes LIKE '%Climate impacts on land-use and land-cover change%'">Climate impacts on land-use and land-cover change</option>
<option value="Science_Themes LIKE '%Climate projections and assessments%'">Climate projections and assessments</option>
<option value="Science_Themes LIKE '%Ecological vulnerability and species response to climate variability and change%'">Ecological vulnerability and species response to climate variability and change</option>
<option value="Science_Themes LIKE '%Impacts of climate variability and change on cultural resources%'">Impacts of climate variability and change on cultural resources</option>
</select>
</label>
</div>
</div>
<div id="map-wrapper">
<div id="map"></div>
</div>
<!-- Creating the div for the query box and populating filters -->
<!-- Creating the map object / script -->
<script>
// This creates the map object itself
var map = L.map('map', {
// center: [43.726372, -79.405235],
center: [42.247753, -97.906211],
zoom: 3,
zoomControl: false,
});
// MAP CONTROLS
var zoomHome = L.Control.zoomHome({
position: 'topleft',
// homeCoordinates: [43.726372, -79.405235],
homeCoordinates: [42.247753, -97.906211],
homeZoom: 3,
});
zoomHome.addTo(map);
// INFORMATION CONTROL
// control that shows Project Data on click
// This control lifted from http://leafletjs.com/examples/choropleth/
// Still not sure precisely how it works- have to investigate
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = (props ?
// '<b>' + props.Title + '</b>' + '<br><br>' + props.Leader + '<br><br>' + props.summary + '<br><br><image src=:' + props.Image_URL + '"><br><br><a href="' + props.URL + '" target="_blank">More Information...</a><br><br><b>Science Themes:</b><br>' + props.Science_Themes
'<b>' + props.Title + '</b>' + '<br><br>' + props.Leader + '<br><br><a href="' + props.URL + '" target="_blank">More Information...</a><br><br><b>Science Themes:</b><br>' + props.Science_Themes
: 'Click on a circle to see information about that project');
};
info.addTo(map);
// ESRI FEATURE LAYER AND MAP SEARCH
// Setting up the control and its options
var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();
var searchControl = L.esri.Geocoding.geosearch({
expanded: true,
placeholder: 'Search NESC Projects',
zoomToResult: true,
collapseAfterResult: true,
allowMultipleResults: false,
providers: [
// arcgisOnline,
L.esri.Geocoding.featureLayerProvider({
// url: 'https://services.arcgis.com/2gdL2gxYNFY2TOUb/arcgis/rest/services/NECSC_Test_Data/FeatureServer/1',
url: 'https://services.arcgis.com/2gdL2gxYNFY2TOUb/arcgis/rest/services/NECSC_Provisional_Web_Map/FeatureServer/0',
searchFields: ['Title', 'Affiliations', 'Body', 'Partners', 'Investigators', 'Leader', 'Science_Themes', 'Geographic_Location', 'Specific_Geographic_Location', 'Broader_Impact', 'Project_Type'],
label: 'Search NESC Projects',
bufferRadius: 5000,
formatSuggestion: function(feature){
return feature.properties.Leader + ' - ' + feature.properties.Title;
}
})
]
}).addTo(map);
// Setting up map behavior for clicking on the search control results
var searchResultPolygons = L.layerGroup();
searchResultPolygons.addTo(map);
searchControl.on('results', function(data){
var searchResultData = data.results[0].properties
// Note to self: [0] after results is required to tell Leaflet which feature to get properties.etc...
// from. Else properties will be undefined. Here you're telling it to just pull .properties.Title from
// the first feature in the results object (an array) that is returned, designated 0.
// Forcing UX here to only return one result, but as of yet don't think users will want More
// than one result showing for a search - Choosing to keep things simple for now.
if (data.results.length > 0) {
info.update(searchResultData)
ProjectMap.eachActiveFeature(function(layer){
layer.setStyle({
fillOpacity: 0,
});
// Note: Throughout script using this for styling ProjectMap w/ each change as opposed to
// ProjectMap.setStyle, as it seems to over-ride any other setStyle functions in the entire
// script and basically brakes changes in styling invoked anywhere else in script.
});
searchResultPolygons.clearLayers();
searchResultPolygons.addLayer(L.geoJSON(data.results[0].geojson, {
weight: 0,
fillOpacity: 0.5,
}));
};
});
// Do not need to add listener here (I think), or L.control, to clear search results, as clicking
// on centerpoint of any other feature or changing filters clears them.
//MAP LAYERS
// BASEMAP
// Loading ESRI topo basemap from ArcOnline as baselayer
var esriTopo = L.esri.basemapLayer('Topographic').addTo(map);
// DATA
// Load the project layer as object with all of the projects but do not display it on the map
var ProjectMap = L.esri.featureLayer ({
url: 'https://services.arcgis.com/2gdL2gxYNFY2TOUb/arcgis/rest/services/NECSC_Provisional_Web_Map/FeatureServer/0',
// url: 'https://services.arcgis.com/2gdL2gxYNFY2TOUb/arcgis/rest/services/NECSC_Test_Data/FeatureServer/1',
//making the polygons invisible
// simplifyFactor: 0.35,
renderer: L.canvas(),
precision: 4,
fields: ['OBJECTID', 'Science_Themes', 'Title', 'Leader', 'Path', 'URL'],
weight: 0,
fillOpacity: 0,
fillColor: null,
}).addTo(map);
// ENABLING THE MAP FILTER
// Retrieves the selected filter from the query control above and creates JS object from it.
var sciencetheme = document.getElementById('Science_Themes');
// Creates a listener for when content of variable 'sciencetheme'changes
// and runs callback function to set the 'where' query for the esri.featureLayer to the
// contents of the sciencetheme variable.
sciencetheme.addEventListener('change', function(){
// This references a filter box set up in a separate div
ProjectMap.setWhere(sciencetheme.value, function(){
});
// for some reason ProjectMap.refresh() is necessary in order to get the centerpoints for the
// currently displayed layer to load properly. This creates a huge lag in the centerpoints loading.
// Otherwise centerpoints (see below) from previous setWhere
// are displayed. This is likely because ProjectMap.refresh() is what triggers the ProjectMap.on('load'
// event to fire below. Unless I'm missing something obvious, Unfortunately there's no straightforward
// "change in where" event in Leaflet / ESRI-Leaflet that I can set up a listener for.
ProjectMap.refresh();
ProjectMap.eachActiveFeature(function(layer){
layer.setStyle({
fillOpacity: 0,
});
});
searchResultPolygons.clearLayers();
});
// Populates the map with centerpoints for filtered features (and all features) above.
ProjectMap.on('load', function(){
centerpointlayer.clearLayers();
ProjectMap.eachActiveFeature(function(layer){
// console.log(layer.feature.properties.Science_Themes);
var bounds = layer.getBounds();
var center = bounds.getCenter();
var centerpoints = L.circleMarker(center, {
radius: 10,
fillOpacity: 0.75,
fillColor: '#76db58',
color: '#76db58',
opacity: 0.5,
});
centerpointlayer.addLayer(centerpoints);
map.addLayer(centerpointlayer);
centerpoints.on('click', function(e) {
info.update(layer.feature.properties);
map.fitBounds(bounds);
searchResultPolygons.clearLayers();
ProjectMap.eachActiveFeature(function(layer){
layer.setStyle({
fillOpacity: 0,
})
});
layer.setStyle({
fillOpacity: 0.5,
});
});
});
});
// CENTERPOINT LAYER
var centerpointlayer = L.layerGroup();
// Clustering of the centerpoints
var clusters = L.markerClusterGroup.layerSupport({
showCoverageOnHover: false,
disableClusteringAtZoom: 13,
spiderfyDistanceMultiplier: 2,
// zoomToBoundsOnClick: false,
});
clusters.addLayer(centerpointlayer);
map.addLayer(clusters);
</script>
</body>
</html>