feat: show feature information on map click

index.html

@@ -84,6 +84,33 @@
       <main class="map-wrap">
         <div id="map" aria-label="Map view"></div>
       </main>
+
+      <div id="feature-modal" class="feature-modal" hidden>
+        <div class="feature-modal-backdrop" data-feature-modal-close></div>
+        <section
+          class="feature-modal-dialog"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="feature-modal-title"
+        >
+          <button
+            id="feature-modal-close"
+            class="feature-modal-close"
+            type="button"
+            aria-label="Close feature information"
+          >
+            ×
+          </button>
+          <p id="feature-modal-kind" class="feature-modal-kind"></p>
+          <h2 id="feature-modal-title">Feature information</h2>
+          <dl class="feature-details">
+            <div>
+              <dt>Area</dt>
+              <dd id="feature-area">—</dd>
+            </div>
+          </dl>
+        </section>
+      </div>
     </div>
 
     <script src="./vendor/ol.js"></script>