-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
175 lines (138 loc) · 5.51 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet Maps with Open Data APIs</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet, use newest version at http://leafletjs.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
<!-- load jQuery, use newest version at https://code.jquery.com -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Load Esri Leaflet, use newest version at http://esri.github.io/esri-leaflet -->
<script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
<!-- style the map -->
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
}
</style>
</head>
<body>
<!-- Create div element to house the map -->
<div id="map"></div>
<script>
// Initialize the map with specified center coordinates and zoom level
// for target area (North Dakota)
var map = L.map('map', {
center: [47.55, -100.34],
zoom: 7,
})
// Add Carto baselayer
var baselayer = new L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map)
// Add scale
L.control.scale().addTo(map);
/*
Add a legend (checkboxes) to the upper-right corner.
At first, baselayers and overlays are set to `null` (empty legend).
We will be adding items to the legend as we load layers.
*/
var legend = L.control.layers( null, null, {
position: "topright",
collapsed: false // false = open by default
}).addTo(map)
/*
Add county boundaries for North Dakota from an Esri server
located at https://ndgishub.nd.gov/arcgis/rest/services/All_GovtBoundaries/MapServer
Since each feature also contains population density, turn boundaries
into a choropleth by filling in features with shades of pink using a function
*/
var getDensityColor = function(d) {
return d > 100 ? '#7a0177' :
d > 50 ? '#c51b8a' :
d > 20 ? '#f768a1' :
d > 5 ? '#fbb4b9' :
'#feebe2'
}
var counties = L.esri.featureLayer({
url: 'https://ndgishub.nd.gov/arcgis/rest/services/All_GovtBoundaries/MapServer/20',
style: function(feature) {
return {
fillOpacity: 0.5,
weight: 0.5,
color: 'silver',
fillColor: getDensityColor(feature.properties.POP10_SQMI)
}
}
}).addTo(map)
legend.addOverlay(counties, 'Population density')
/*
Add EMS Stations as small blue points. To each point, attach tooltips with
the name of the station.
Data by Homeland Infrastructure Foundation-Level Data (Esri server), queries for North Dakota (ND),
available at https://hifld-geoplatform.opendata.arcgis.com/datasets/emergency-medical-service-ems-stations/geoservice
*/
var ems = L.esri.featureLayer({
url: 'https://services1.arcgis.com/Hp6G80Pky0om7QvQ/arcgis/rest/services/Emergency_Medical_Service_(EMS)_Stations_gdb/FeatureServer/0/',
where: "STATE = 'ND'",
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius: 4,
fillColor: 'blue',
color: 'blue',
weight: 0.1,
opacity: 1,
fillOpacity: 0.5,
pane: 'markerPane'
}).bindTooltip(feature.properties.NAME)
}
}).addTo(map)
legend.addOverlay(ems, 'EMS Stations <span style="color: blue; opacity: 0.8">●</span>')
/*
From AmeriCorps Socrata database, add projects in North Dakota
using simple filtering on the `stabbr` column, and a JSON endpoint.
Each point is a custom .png icon with a tooltip containing AmeriCorps
sponsor name, and project description.
*/
$.getJSON("https://data.americorps.gov/resource/yie5-ur4v.json?stabbr=ND", function(data) {
// Array of markers
var markers = [];
// For each row in Socrata, create a marker
for (var i = 0; i < data.length; i++) {
var item = data[i];
// Extract coordinates, convert strings to floats
var coordinates = [
parseFloat(item.geocoded_column.latitude),
parseFloat(item.geocoded_column.longitude)
]
// Create a marker with a custom icon
var marker = L.marker(coordinates, {
icon: L.icon({
iconUrl: 'images/americorps.png',
iconSize: [24, 24],
iconAnchor: [12, 12],
opacity: 0.5
})
}).bindTooltip(item.sponsor + '<br>' + item.project_description);
// Add marker to the array of markers
markers.push(marker);
}
// Create a Leaflet layer group from array of markers
var layer = L.layerGroup(markers);
layer.addTo(map); // add layer to the map
// Add layer to the legend, together with the little icon
legend.addOverlay(layer, 'AmeriCorps NCCC <img src="images/americorps.png" height="11" alt="AmeriCorps NCCC">')
})
</script>
</body>
</html>