forked from StephSaephan/leaflet-map-example
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
226 lines (180 loc) · 9.32 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
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load Leaflet: http://leafletjs.com/ -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<!-- Esri Leaflet Plugin: https://esri.github.io/esri-leaflet/ -->
<script src="https://unpkg.com/esri-leaflet@2.1.3/dist/esri-leaflet.js" integrity="sha512-pijLQd2FbV/7+Jwa86Mk3ACxnasfIMzJRrIlVQsuPKPCfUBCDMDUoLiBQRg7dAQY6D1rkmCcR8286hVTn/wlIg==" crossorigin=""></script>
<!-- ESRI Renderer Plugin: https://github.com/Esri/esri-leaflet-renderers -->
<!-- Renders feature layer using default symbology as defined by ArcGIS REST service -->
<!-- Currently doesn't work with ESRI cluster plugin -->
<script src="https://unpkg.com/esri-leaflet-renderers@2.0.6/dist/esri-leaflet-renderers.js" integrity="sha512-mhpdD3igvv7A/84hueuHzV0NIKFHmp2IvWnY5tIdtAHkHF36yySdstEVI11JZCmSY4TCvOkgEoW+zcV/rUfo0A==" crossorigin=""></script>
<!-- Load Leaflet Basemap Providers: https://github.com/leaflet-extras/leaflet-providers -->
<!-- Modified to include USGS TNM web services -->
<script src="JS/leaflet-providers.js"></script>
<!-- 2.5D OSM Buildings Classic: https://github.com/kekscom/osmbuildings -->
<script src="https://cdn.osmbuildings.org/OSMBuildings-Leaflet.js"></script>
<!-- Load Font Awesome icons -->
<script src="https://use.fontawesome.com/a64989e3a8.js"></script>
<!-- Grouped Layer Plugin: https://github.com/ismyrnow/leaflet-groupedlayercontrol -->
<link rel="stylesheet" href="CSS/leaflet.groupedlayercontrol.min.css">
<script src="JS/leaflet.groupedlayercontrol.min.js" type="text/javascript"></script>
<!-- Overview mini map Plugin: https://github.com/Norkart/Leaflet-MiniMap -->
<link rel="stylesheet" href="CSS/Control.MiniMap.css">
<script src="JS/Control.MiniMap.min.js" type="text/javascript"></script>
<!-- Leaflet Drawing Plugin: https://github.com/codeofsumit/leaflet.pm -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.pm@latest/dist/leaflet.pm.css">
<script src="https://unpkg.com/leaflet.pm@latest/dist/leaflet.pm.min.js"></script>
<!-- Leaflet WMS Plugin: https://github.com/heigeo/leaflet.wms -->
<script src="JS/leaflet.wms.js"></script>
<!-- Logo Credit Plugin: https://github.com/gregallensworth/L.Control.Credits -->
<link rel="stylesheet" href="CSS/leaflet-control-credits.css" />
<script type="text/javascript" src="JS/leaflet-control-credits.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', {
center: [21.3069, -157.8583], // Honolulu, HI
zoom: 16
});
var defaultBase = L.tileLayer.provider('Stamen.TonerLite').addTo(map);
var baseLayers = {
'Stamen Toner': defaultBase,
'USGS TNM': L.tileLayer.provider('USGSTNM'),
'ESRI Imagery': L.tileLayer.provider('Esri.WorldImagery'),
'ESRI Ocean Basemap': L.tileLayer.provider('Esri.OceanBasemap'),
'OSM Topo': L.tileLayer.provider('OpenTopoMap')
};
//ESRI ArcGIS layers from Hawaii GIS Program; dynamic layer example
//Using a relative url to call layer instead of http
var WaterQualSites = L.esri.dynamicMapLayer({
url: '//geodata.hawaii.gov/arcgis/rest/services/HumanHealthSafety/MapServer',
layers: [2],
useCors: false
});
//add popup to Water quality sites dynamic map layer
WaterQualSites.bindPopup(function(error, featureCollection) {
if (error || featureCollection.features.length === 0) {
return false;
} else {
return 'Name: ' + featureCollection.features[0].properties.name + '<br>' + 'ID: ' + featureCollection.features[0].properties.identifier;
}
});
//ESRI ArcGIS layers from Hawaii GIS Program; polygon feature layer example
//Using a relative url to call layer instead of http
var AgBaseline = L.esri.featureLayer({
url: '//geodata.hawaii.gov/arcgis/rest/services/LandUseLandCover/MapServer/4',
style: function(feature) {
return {
fillOpacity: 0.5
}
}
});
//add popup to AgBaseline feature layer
AgBaseline.bindPopup(function(evt) {
return L.Util.template('<p>{cropcatego}<br>{island}</p>', evt.feature.properties);
});
//ESRI ArcGIS layers from Hawaii GIS Program; line feature layer example; can override the styling
//Using a relative url to call layer
var Trails = L.esri.featureLayer({
url: '//geodata.hawaii.gov/arcgis/rest/services/Terrestrial/MapServer/34',
style: function(feature) {
return {
color: '#328000',
weight: 2
}
}
});
//PacIOOS GeoServer Example; adding a single layer with properties
//Using a relative url to call layer instead of http
var EconSeaLevRise = L.tileLayer.wms('http://geo.pacioos.hawaii.edu/geoserver/wms?', {
layers: 'PACIOOS:hi_tt_all_slrxa_econ_2030',
format: 'image/png',
opacity: 0.5,
tiled: 'true'
});
//Another example using PacIOOS GeoServer examples; setting properties first then add layers
var options = {
transparent: 'true',
format: 'image/png',
opacity: 0.5,
tiled: 'true'
//info_format: 'text/html'
};
//Using a relative url to call layer instead of http
var source = L.WMS.source('http://geo.pacioos.hawaii.edu/geoserver/wms?', options);
var CREDREASites = source.getLayer('PACIOOS:hi_cred_all_rea_sites');
var VegShoreline = source.getLayer('PACIOOS:hi_hcgg_all_shore_veg');
//Load OSM Buildings then disable it on first load; can only be viewed at certain scales
var osmb = new OSMBuildings(map).load();
map.removeLayer(osmb);
//Overlay grouped layers
var groupOverLays = {
"Hawaii State GIS": {
"Water Quality Monitoring Sites": WaterQualSites,
"Na Ala Hele Trails": Trails,
"Agricultural Baseline": AgBaseline
},
"PacIOOS Layers": {
"Economic Loss from Sea Level Rise (0.5ft) ": EconSeaLevRise,
"CRED REA Sites": CREDREASites,
"Vegetation Shoreline": VegShoreline
},
"OSM Bldg Classic": {
"2.5D Buildings": osmb
}
};
//add layer switch control
L.control.groupedLayers(baseLayers, groupOverLays).addTo(map);
//add scale bar to map
L.control.scale({
position: 'bottomleft'
}).addTo(map);
// Overview mini map
var Esri_WorldTopoMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: '© Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
});
var miniMap = new L.Control.MiniMap(Esri_WorldTopoMap, {
toggleDisplay: true,
minimized: false,
position: 'bottomleft'
}).addTo(map);
//define Drawing toolbar options
var options = {
position: 'topleft', // toolbar position, options are 'topleft', 'topright', 'bottomleft', 'bottomright'
drawMarker: true, // adds button to draw markers
drawPolyline: true, // adds button to draw a polyline
drawRectangle: true, // adds button to draw a rectangle
drawPolygon: true, // adds button to draw a polygon
drawCircle: true, // adds button to draw a cricle
cutPolygon: true, // adds button to cut a hole in a polygon
editMode: true, // adds button to toggle edit mode for all layers
removalMode: true, // adds a button to remove layers
};
// add leaflet.pm controls to the map
map.pm.addControls(options);
//Logo position: bottomright
var credctrl = L.controlCredits({
image: "Images/opengislab_106x23.png",
link: "https://www.opengislab.com/",
text: "Leaflet map example by Stephanie @ <u>opengislab.com<u/>"
}).addTo(map);
</script>
</body>
</html>