diff --git a/index.html b/index.html
index f99ac93..7009412 100644
--- a/index.html
+++ b/index.html
@@ -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();