-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
232 lines (199 loc) · 7.14 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Available maps 092G</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<!-- Import Turf Module - Needed to calculate bounding boxes -->
<script src='https://api.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>
<style>
body { margin: 0; padding: 0;}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
#map { position: absolute; top: 0; bottom: 0; width: 100%;}
#map canvas {cursor: crosshair;}
#features {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
overflow: auto;
background: rgba(255, 255, 255, 0.8);}
/* Control the zoom to button */
.btn-control {
font: bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #3386c0;
color: #fff;
position: absolute;
top: 20px;
left: 50%;
z-index: 1;
border: none;
width: 200px;
margin-left: -100px;
display: block;
cursor: pointer;
padding: 10px 20px;
border-radius: 3px;
}
.btn-control:hover {
background-color: #4ea0da;
}
/* Added some containers for positioning */
.page{
position: absolute; top: 0%; bottom: 0%; width: 100%;}
.mapcontainer{
position: absolute; top: 0%; width: 100%; height: 75%;}
.featurecontainer{
position: absolute; top: 75%; width: 100%; height: 25%;}
</style>
</head>
<!-- Updated the formatting of the page -->
<!-- Top is the map, bottom is the table -->
<body>
<div class="page">
<div class="mapcontainer">
<button id="zoomto" class="btn-control">Zoom to bounds</button>
<div id="map"></div>
</div>
<div class="featurecontainer">
<div id="features">
<!-- <table width = "100%">
<tr>
<th>Label</th>
</tr>
</table> -->
<!-- <div jput="tbody_template">
<tr>
<td>{{name}}</td>
<td>{{score}}</td>
</tr>
</div> -->
<!-- <table>
<tbody id="tbody">
</tbody>
</table> -->
</div>
</div>
</div>
<pre id="json"></pre>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZWN0MTIzIiwiYSI6ImNranAwN2V5cjA0OGwyc3RjMG81YmY5dzAifQ.E1gXN2BWib0Z0pnS95iOtg';
// Location of the geojson
// Specifying here allows for it to be more easily changed.
// There is also an option where we could load .geojsons local storage if desired.
const dPath = 'https://raw.githubusercontent.com/ubc-lib-geo/mapbox-for-openindexmaps/main/data/nts-092-50k_Filled.geojson';
// There isn't an explicit way to get the bounds of a geojson with GLJS
// - seems there should be?
// This function allows us to:
// Read any geojson from a URL
async function mapData(){
// fetch() retreives data from a URL
// - Its an asynchronous command, returns a promise to retreive a value
// - By keeping everything in the mapData() function, commands are applied the value not the promise
const data = await fetch(dPath, {
headers: {
'Accept': 'application/json'
}
});
// Read geojson from the fetched value
const geoJson = await data.json();
// Turf moddule allows us to get the bounding box of a geojson
var bbox = turf.extent(geoJson);
// fit() will fit the map to the bounding box of our geojson
// Called later after map is initialized
function fit() {
map.fitBounds(bbox, {padding: 80});
}
// Create the map - zoom and center are arbitrary
const map = new mapboxgl.Map({
container: 'map',
zoom: 4,
center: [-125.193328, 50.506185],
style: 'mapbox://styles/ect123/ck4ym048y4upi1cmzoq53immx'
});
// Fit to bbox, overwrite the center/zoom
fit();
// On load - add geojson
map.on('load', function() {
// Add the geojson as a map source
map.addSource('Data Layer', {
type: 'geojson',
data: geoJson
});
// Add the layer, reference the source to minimize redundancy
map.addLayer({
'id': 'Data Layer Values',
'type': 'fill',
'source': 'Data Layer',
'layout': {},
'paint': {
'fill-color': '#FF8484',
'fill-opacity': 0,
'fill-outline-color': 'black'
},
});
// skeleton outline of the grid
map.addLayer({
'id': 'Data Layer Frame',
'type': 'line',
'source': 'Data Layer',
'layout': {},
'paint': {
'line-color': 'black',
'line-width': .5
},
});
// Call fit when clicking the zoomto button
document.getElementById('zoomto').addEventListener('click', () => {
fit()
});
});
// Create an empty marker
const marker = new mapboxgl.Marker();
// Function to add the marker
function add_marker (event) {
var coordinates = event.lngLat;
console.log('Lng:', coordinates.lng, 'Lat:', coordinates.lat);
marker.setLngLat(coordinates).addTo(map);
}
// Display desired attributes on click
map.on('click', (e) => {
// Add the marker (show where the click is)
add_marker(e);
// Get features at point click
const features = map.queryRenderedFeatures(e.point, {layers: ['Data Layer Values']});
// Limit the number of properties we're displaying for legibility and performance
// Create the table
function makeTable (json) {
var tbl = ('<table width = 100%><tr>');
for (var key in features[0].properties){
tbl = tbl+'<th>'+key+'</th>';
};
tbl = tbl + '</tr>'
for (var i = 0; i < features.length; i++) {
tbl = tbl+"<tr>"
// var keys = Object.keys(obj);
for (var key in features[i].properties)
tbl = tbl+("<td>" + features[i].properties[key] + "</td>");
// tr = tr+("<td>" + json[i].properties.label + "</td>");
// tr = tr+("<td>" + json[i].properties.label + "</td>");
tbl = tbl+"</tr>"
};
tbl = tbl +'</table>';
return tbl;
}
// document.getElementById('features').innerHTML = displayFeatures[0].properties //makeTable(displayFeatures)
document.getElementById('features').innerHTML = makeTable()
});
};
// Call mapData() to initalize the map
mapData();
</script>
</body>
</html>