Update index.html

Add map legend

index.html

@@ -35,8 +35,8 @@
       padding: 20px;
     }
     iframe {
-      width: 960px; /* 800px + 20% */
-      height: 660px; /* 550px + 20% */
+      width: 960px;
+      height: 660px;
       border: none;
       margin-bottom: 20px;
       box-shadow: 0 4px 8px rgba(0,0,0,0.1);
@@ -71,6 +71,25 @@
       text-decoration: none;
       margin-left: 5px;
     }
+    .legend {
+      text-align: left;
+      margin-bottom: 20px;
+    }
+    .legend div {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+    }
+    .legend div span {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 10px;
+      border: 1px solid #ccc;
+    }
+    .legend .green {
+      background-color: green;
+    }
   </style>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-CC1B9CQ691"></script>
   <script>
@@ -84,6 +103,10 @@
   <div class="header">
     <h1>CSMS Claims and Neighbors</h1>
   </div>
+  <div class="legend">
+    <h3>Legend:</h3>
+    <div><span class="green"></span> Our Claims</div>
+  </div>
   <div class="map-container">
     <iframe src="https://www.google.com/maps/d/embed?mid=1CH09O8Gp7sQ6H2GdybFvRdLB-1vElVc&ehbc=2E312F"></iframe>
     <iframe src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True"></iframe>