-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
179 lines (156 loc) · 9.43 KB
/
Copy pathindex.html
File metadata and controls
179 lines (156 loc) · 9.43 KB
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
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Web GIS Examples</title>
<link rel="icon" href="https://imgur.com/2tWGqen.png">
<link rel=stylesheet href="/css/index.css"/>
</head>
<body>
<br><br>
<div class="bigTitle">Arctic Seabed Web Mapping Guidebook</div>
<div class="mainpage">
<br>
The goal of this collection is to provide a set of instructive examples which introduce a variety of open source plug-ins that come in handy when displaying geospatial data within the browser. Not all of these plug-ins were created specifically for web mapping, but we will be adapting them to suit our needs.
<br><br>
These examples were developed for the purpose of updating the ArcticNet Basemaps Series - a web portal maintained by the Ocean Mapping Group at UNB for the purpose of hosting the seabed & subsurface data collected by the CCGS Amundsen in the Canadian Arctic.
<br><br>
Hosted at <a class="toc" href="https://github.com/mcvainio/mcvainio.github.com">GitHub</a>.
<br><br>
<hr color="black"> <center><b><u>2D Analysis Examples (Leaflet.js)</u></b><br>
• <a class="toc" href="#bascimap">Leaflet Basics</a>
• <a class="toc" href="#displaywms">Display WMS</a>
• <a class="toc" href="#singleiho">Query WMS (Generic Server)</a>
• <a class="toc" href="#singleemod">Query WMS (ESRI Server)</a>
• <a class="toc" href="#spatialquery">Query Spatial Selection</a>
• <a class="toc" href="#spatialquery2">Spatial Query - 2 Layers</a>
• <a class="toc" href="#spatialquery3">Spatial Query Extended</a>
<br><hr color="black">
• <a class="toc" href="#sidebar">Sidebar GUI with Inline Layer Control</a>
<br>
<hr color="black"><b><u>3D Modelling Examples (Three.js)</u></b><br>
• <a class="toc" href="#3dplane">Plain Plane</a>
• <a class="toc" href="#wcsplane">Modify Surface Elevations Using WCS</a>
• <a class="toc" href="#wmsplane">Map WMS Texture onto Surface</a>
• <a class="toc" href="#vertplane">Modify Surface Colours Using ASCII JS Array</a>
• <a class="toc" href="#3dseabed">3D Seabed (Topo and Subsurface)</a>
• <a class="toc" href="#2dto3d">Generate 3D Scene from 2D Map Selection</a></center>
<hr/>
<br><br><br>
<center><b><u>2D Examples (Leaflet.js)</u></b></center><hr color="black">
<div class="fancy">
<a name="basicmap"></a>
<a href="/examples/1-LeafletBasics.html" target="_blank">
<img src="https://i.imgur.com/rixZW6F.jpg" class="superImage" />
<br/>Leaflet Basics</a>
<p class ="superText"> Leaflet 101 example taken from their quickstart guide. Shows how to display a marker, a shape and a polygon.
</p>
</div>
<div class="fancy">
<a name="displaywms"></a>
<a href="/examples/2-DisplayWMSURL.html" target="_blank">
<img src="https://i.imgur.com/ueHX4a0.jpg" class="superImage" />
<br/>Display WMS</a>
<p class ="superText"> A Leaflet map with an inline HTML form that triggers an event handler to pass the user-inputted WMS URL into a variable. This variable is then called upon and displayed on the map.
</p>
</div>
<div class="fancy">
<a name="singleemod"></a>
<a href="/examples/3-QueryWMS.html" target="_blank">
<img src="https://i.imgur.com/iaUPvt2.jpg" class="superImage" />
<br/>Query WMS (generic server)</a>
<p class ="superText"> WMS used: EMOD bathymetry. <br> Uses a click listener on a Leaflet map to grab a user-selected co-ordinate. Then, fires a single GetFeatureInfo query at EMOD's geoserver using that co-ord. The result (the depth property of the WMS) is displayed in an inline window on the map.</p>
</div>
<div class="fancy">
<a name="singleiho"></a>
<a href="/examples/4-QueryWMS-esri.html" target="_blank">
<img src="https://i.imgur.com/JW3DApc.png" class="superImage" />
<br/>Query WMS (ESRI server)</a>
<p class ="superText"> WMS used: Bathymetry data from the IHO. <br> Same as above, but demonstrates the use of the leaflet-esri.js plugin to query an ESRI-specific geoserver. The previous example instead employed jQuery to manually create an XMLHttpRequest.</p>
</div>
<div class="fancy">
<a name="spatialquery"></a>
<a href="/examples/5-QueryArea.html" target="_blank">
<img src="https://i.imgur.com/1xUgzZG.jpg" class="superImage" />
<br/>Query Spatial Selection</a>
<p class ="superText"> Uses a rectangle on the map as the areal selection bounds (bbox) for performing multiple queries. The output results of those queries are stored in a JS array & assigned a variable. That array variable is then used as input to generate a histogram, which is displayed in a div to the side of the map using the Chart.JS plug-in. </p>
</div>
<div class="fancy">
<a name="spatialquery2"></a>
<a href="/examples/6-Query2WMSLayers" target="_blank">
<img src="https://imgur.com/cIb6JCB.jpg" class="superImage" />
<br/>Spatial Query - 2 Layers</a>
<p class ="superText">Uses the same method as the above example, but captures results from 2 bathymetric WMS layers (the IHO one and the EMOD one). The results from each areal query are used in a simple mathematical equation to start off (the difference between mean depth values). </p>
</div>
<div class="fancy">
<a name="spatialquery3"></a>
<a href="/examples/7-ArealStatsQCWindow.html" target="_blank">
<img src="https://imgur.com/dekzYx6.jpg" class="superImage" />
<br/>Spatial Query Extended - Statistical Analysis</a>
<p class ="superText">Expands on the above concept of using the results of our queries in statistical calculations. The results are now displayed as a histogram, among various other statistical qualities & graphs related to the data found within the shape. Two different data layers from the map are compared, generating a QA/QC diagnostic window. </p>
</div>
<div class="fancy">
<a name="sidebar"></a>
<a href="/examples/8-Sidebar.html" target="_blank">
<img src="https://i.imgur.com/bO34xse.jpg" class="superImage" />
<br/>Sidebar GUI with Inline Layer Control</a>
<p class ="superText">Illustrates how to modify the sidebar.js plugin in order to incorporate the layer control panel inline. The GUI of this particular example was developed for UNB's Ocean Mapping Group in order to display seabed data that was collected aboard the CCGS Amundsen in the Canadian Arctic. </p>
</div>
<hr color="black"> <br><br>
<center><b><u>3D Examples (ThreeJS)</u></b></center>
<div class="fancy">
<a name="3dplane"></a>
<a href="/examples/9-Plane.html" target="_blank">
<img src="https://i.imgur.com/bJivF2L.png" class="superImage" />
<br/>Plain Plane</a>
<p class ="superText"> Shows how to generate a wireframe mesh of a plane. Our subsequent examples will use this plane as a base, modifying it to model real-world terrain. </p>
</div>
<div class="fancy">
<a name="wcsplane"></a>
<a href="/examples/10-TopoMeshfromWCS.html" target="_blank">
<img src="https://i.imgur.com/Xe4Nqyx.jpg" class="superImage" />
<br/>Modify Surface Elevations Using WCS</a>
<p class ="superText"> Generates a plane like the above example, but then loops through each vertex. For every point on the plane, the z value (the elevation) is changed into the corresponding value taken from a WCS. </p>
</div>
<div class="fancy">
<a name="wmsplane"></a>
<a href="/examples/11-TopoWithWMSOverlay.html" target="_blank">
<img src="https://i.imgur.com/mXRkymN.jpg" class="superImage" />
<br/>Map WMS Texture onto Surface</a>
<p class ="superText"> Takes the wireframe from the above example & overlays an image texture. This texture is taken from a WMS that is clipped to the same geographic bounds as the plane & WCS data. Allow ~5s to load.</p>
</div>
<div class="fancy">
<a name="2dto3d"></a>
<a href="/examples/12-3DSceneFrom2D.html" target="_blank">
<img src="https://i.imgur.com/eLfFscd.jpg" class="superImage" />
<br/>Generate 3D Scene from 2D Map Selection</a>
<p class ="superText"> Starts with a 3D topographic mesh model like the examples above. This time though, there is a 2D Leaflet map alongside it. A shape drawn on the overhead 2D map lets the user change where the 3D model is generated from (ie. changes the bbox co-ords for the WCS coverage request). </p>
</div>
<div class="fancy">
<a name="vertplane"></a>
<a href="/examples/13-PointCloudFromCSV" target="_blank">
<img src="https://imgur.com/0By2WeC.jpg" class="superImage" />
<br/>Generate Point Cloud from CSV</a>
<p class ="superText">Rather than overlaying an image, we now try colouring a point cloud using data from a CSV file. In particular, we are using a file that corresponds to a sub-bottom dataset. The column that we've used to colour the pixels represents the intensity of the return at that depth. Essentially, this generates a cross-section.<br>
Note that the input CSV is too large to host on github. As such, this example is given in html/js format. Replace output.csv with your own file. Or, if you would like a sample input CSV file for testing, please DM me on github. </p>
</div>
<div class="fancy">
<a name="3dseabed"></a>
<a href="/examples/14-TopoWithPointCloud" target="_blank">
<img src="https://imgur.com/IOTkE57.jpg" class="superImage" />
<br/>3D Seabed (Topo and Subsurface)</a>
<p class ="superText">We now combine the WCS topography/WMS overlay with the cross-sectional vertical curtain that was generated from the point cloud example above. <br>
As with the previous example, the sub bottom data is too large to host on github and so only the raw html/js file is supplied. If you would like a sample input CSV for testing, please DM me on github. </p>
</div>
<!--
<div class="fancy">
<a name="zzzz"></a>
<a href="zzzz.html" target="_blank">
<img src="html-images/zzzz.png" class="superImage" />
<br/>zzzz</a>
<p class ="superText"> ... </p>
</div>
-->
</div>
</body>
</html>