From a73dcf9a2af7facb83f066fd33edcc9992fd6f48 Mon Sep 17 00:00:00 2001
From: Chandler Swift <chandler@chandlerswift.com>
Date: Wed, 6 Mar 2024 22:51:53 -0600
Subject: [PATCH] Add rendering support for multipolygon states like Alaska

---
 index.html | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

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();