chandlerswift/name-all-lakes-by-area-quiz
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add rendering support for multipolygon states like Alaska

Browse source
This commit is contained in:
Chandler Swift 2024-03-06 22:51:53 -06:00
parent 5dd5d4cd73
commit a73dcf9a2a
Signed by: chandlerswift
GPG key ID: A851D929D52FB93F
1 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
index.html
View file

@ -129,10 +129,14 @@
const cities = await response.json(); const cities = await response.json();
await state_shape_data_request; // We can't draw until this is in await state_shape_data_request; // We can't draw until this is in
const state_shape = state_shape_data.features.find(f => f.properties.NAME.toLowerCase() == stateName.toLowerCase()); const state_shape = state_shape_data.features.find(f => f.properties.NAME.toLowerCase() == stateName.toLowerCase());
const state_mercator_adjusted_bounds = find_bounds(state_shape.geometry.coordinates[0].map(mercator)); let state_outlines;
if (!state_shape) { if (state_shape.geometry.type == "MultiPolygon") {
console.error("Unable to find state in shapes"); state_outlines = state_shape.geometry.coordinates.map(a => a.flat());
} else { // Polygon
state_outlines = state_shape.geometry.coordinates;
} }
console.log(state_outlines);
const state_mercator_adjusted_bounds = find_bounds(state_outlines.flat().map(mercator));
createApp({ createApp({
eventListenerAdded: false, eventListenerAdded: false,
state: stateName, state: stateName,
@ -186,12 +190,14 @@
return [scale * (pt[0] - x_offset), canvas.height - (scale * (pt[1] - y_offset))]; return [scale * (pt[0] - x_offset), canvas.height - (scale * (pt[1] - y_offset))];
} }
for (let state_outline_segment of state_outlines) {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(...transform(state_shape.geometry.coordinates[0][0])) ctx.moveTo(...transform(state_outline_segment[0]))
for (let coord of state_shape.geometry.coordinates[0].slice(1)) { for (let coord of state_outline_segment.slice(1)) {
ctx.lineTo(...transform(coord)); ctx.lineTo(...transform(coord));
} }
ctx.stroke(); ctx.stroke();
}
for (let city of cities) { for (let city of cities) {
if (city.guessed) { if (city.guessed) {
ctx.beginPath(); ctx.beginPath();