-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathMapLibre-render-SHP-vector-source.html
186 lines (161 loc) · 6.34 KB
/
MapLibre-render-SHP-vector-source.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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MapLibre render of SHP source data</title>
<!--<link rel="stylesheet" href="css/style.css">-->
<meta name="description" content="MapLibre render of SHP source data">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:image:alt" content="">
<!-- <link rel="icon" href="/favicon.ico" sizes="any"> -->
<!-- <link rel="icon" href="/icon.svg" type="image/svg+xml"> -->
<!-- <link rel="apple-touch-icon" href="icon.png"> -->
<!-- < <link rel="manifest" href="site.webmanifest"> -->
<!-- < <meta name="theme-color" content="#fafafa"> -->
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map-container { height: 80%; }
</style>
</head>
<body>
<!-- Add site or application content here -->
<p></p>
<div id="map-container"></div>
<script>
var map = new maplibregl.Map({
container: 'map-container',
center: [-71.698, 42.041],
zoom: 7.5,
style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
maplibreLogo: true,
attributionControl: true
});
</script>
<script src='https://unpkg.com/shpjs@latest/dist/shp.js' type="module"></script>
<script type="module">
// We can now use the shp object/methods here
console.log(shp);
window.shp = shp; // Add shp to global scope
// Call loadData() after shp is defined
async function loadData() {
try {
// Load all files simultaneously
const promises = [
//fetch("https://s3.amazonaws.com/geospatial.data/usa/ma/RTA_Boundaries.zip").then(r => r.arrayBuffer()),
//fetch("https://s3.amazonaws.com/geospatial.data/usa/ma/BioMap3.zip").then(r => r.arrayBuffer()),
fetch("https://s3.amazonaws.com/geospatial.data/usa/ma/dcrtrails.zip").then(r => r.arrayBuffer()),
fetch("https://s3.amazonaws.com/geospatial.data/usa/ma/counties.zip").then(r => r.arrayBuffer()),
// Add more file URLs here if needed
];
// Wait for all promises to resolve
const results = await Promise.all(promises);
// Parse each result
///const rta_boundaries_interp = await shp.parseZip(results[0]);
//console.log('RTA Boundaries loaded successfully:', rta_boundaries_interp);
//const BioMap3_interp = await shp.parseZip(results[1]);
//console.log('BioMap3 loaded successfully:', BioMap3_interp);
const dcr_trails_interp = await shp.parseZip(results[0]);
console.log('DCR Trails loaded successfully:', dcr_trails_interp);
const counties_interp = await shp.parseZip(results[1]);
console.log('Counties loaded successfully:', counties_interp);
// Add more data objects as needed
// Print success message after all data objects are loaded
console.log('All data objects loaded successfully');
// Now that data is loaded, update the map
//updateMapLayers(rta_boundaries_interp);
updateMapLayers(counties_interp);
updateMapLayersDCRTrails(dcr_trails_interp);
} catch (error) {
// Print failure message if any data object failed to load
console.error('Failed to load data:', error);
}
};
// Call the loadData function
loadData();
//function updateMapLayers(rta_boundaries_interp) {
// // Add a new layer to visualize the polygon.
// map.addLayer({
// 'id': 'rta_boundaries_interp_fill',
// 'type': 'fill',
// 'source': {
// 'type': 'geojson',
// 'data': rta_boundaries_interp
// },
// 'layout': {},
// 'paint': {
// 'fill-color': '#0080ff', // blue color fill
// 'fill-opacity': 0.5
// }
// });
// // Add a black outline around the polygon.
// map.addLayer({
// 'id': 'rta_boundaries_interp_outline',
// 'type': 'line',
// 'source': {
// 'type': 'geojson',
// 'data': rta_boundaries_interp
// },
// 'layout': {},
// 'paint': {
// 'line-color': '#000',
// 'line-width': 3
// }
// });
// }
function updateMapLayers(counties_interp) {
// Add a new layer to visualize the polygon.
map.addLayer({
'id': 'counties_interp_fill',
'type': 'fill',
'source': {
'type': 'geojson',
'data': counties_interp[3]
},
'layout': {},
'paint': {
'fill-color': '#0080ff', // blue color fill
'fill-opacity': 0.2
}
});
// Add a black outline around the polygon.
map.addLayer({
'id': 'counties_interp_outline',
'type': 'line',
'source': {
'type': 'geojson',
'data': counties_interp[3]
},
'layout': {},
'paint': {
'line-color': '#000',
'line-width': 1
}
});
}
function updateMapLayersDCRTrails(dcrtrails_interp) {
// Now that dcrtrails_interp is an array of GeoJSON objects
dcrtrails_interp.forEach((geojson, index) => {
map.addLayer({
'id': `dcrtrails_outline_${index}`,
'type': 'line',
'source': {
'type': 'geojson',
'data': geojson
},
'layout': {},
'paint': {
'line-color': '#FF0000', // red color
'line-width': 3
}
});
});
}
</script>
</body>
</html>