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

22
index.html
View file

@ -129,10 +129,14 @@
const cities = await response.json();
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_mercator_adjusted_bounds = find_bounds(state_shape.geometry.coordinates[0].map(mercator));
if (!state_shape) {
console.error("Unable to find state in shapes");
let state_outlines;
if (state_shape.geometry.type == "MultiPolygon") {
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({
eventListenerAdded: false,
state: stateName,
@ -186,12 +190,14 @@
return [scale * (pt[0] - x_offset), canvas.height - (scale * (pt[1] - y_offset))];
}
ctx.beginPath();
ctx.moveTo(...transform(state_shape.geometry.coordinates[0][0]))
for (let coord of state_shape.geometry.coordinates[0].slice(1)) {
ctx.lineTo(...transform(coord));
for (let state_outline_segment of state_outlines) {
ctx.beginPath();
ctx.moveTo(...transform(state_outline_segment[0]))
for (let coord of state_outline_segment.slice(1)) {
ctx.lineTo(...transform(coord));
}
ctx.stroke();
}
ctx.stroke();
for (let city of cities) {
if (city.guessed) {
ctx.beginPath();