feat: add share controls

app.js

@@ -164,6 +164,7 @@ const map = new ol.Map({
       createVisibleLayersExtentControl(),
       createAreaZoomControl(),
       ...(shouldShowDeviceCompassControl() ? [createDeviceCompassControl()] : []),
+      createShareControl(),
       createNorthPointerControl(),
     ]),
   layers: [
@@ -296,6 +297,45 @@ function createVisibleLayersExtentControl() {
   return new ol.control.Control({ element });
 }
 
+function createShareControl() {
+  const element = document.createElement("div");
+  element.className = "ol-share ol-unselectable ol-control";
+
+  const button = document.createElement("button");
+  button.type = "button";
+  button.title = "Copy link to this map view";
+  button.setAttribute("aria-label", "Copy link to this map view");
+  const icon = document.createElement("span");
+  icon.className = "material-symbols-outlined";
+  icon.setAttribute("aria-hidden", "true");
+  icon.textContent = "share";
+  button.append(icon);
+  button.addEventListener("click", copyCurrentViewUrl);
+
+  element.append(button);
+  return new ol.control.Control({ element });
+}
+
+async function copyCurrentViewUrl() {
+  // Ensure the copied address reflects state changes that may not yet have
+  // reached the next map movement event.
+  syncSharedMapStateToUrl();
+
+  try {
+    if (!navigator.clipboard?.writeText) {
+      throw new Error("Clipboard access is unavailable.");
+    }
+
+    await navigator.clipboard.writeText(window.location.href);
+    showMessage("Link to this map view copied to your clipboard.");
+  } catch (error) {
+    console.error(error);
+    showMessage("Unable to copy the map link. Please copy the address from your browser.", {
+      type: "error",
+    });
+  }
+}
+
 function createAreaZoomControl() {
   const element = document.createElement("div");
   element.className = "ol-area-zoom ol-unselectable ol-control";
@@ -993,12 +1033,35 @@ async function renderFeatureModal(feature, isParcel, requestId) {
     content.append(section);
   }
 
+  content.append(createFeatureModalShareButton());
+
   // A linked-feature request may finish after a newer selection was made.
   if (!els.featureModal.hidden && requestId === featureModalRequestId) {
     els.featureModalContent.replaceChildren(content);
   }
 }
 
+function createFeatureModalShareButton() {
+  const actions = document.createElement("div");
+  actions.className = "feature-modal-actions";
+
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "feature-modal-share";
+  button.title = "Copy link to this map view";
+  button.setAttribute("aria-label", "Copy link to this map view");
+
+  const icon = document.createElement("span");
+  icon.className = "material-symbols-outlined";
+  icon.setAttribute("aria-hidden", "true");
+  icon.textContent = "share";
+  button.append(icon);
+  button.addEventListener("click", copyCurrentViewUrl);
+
+  actions.append(button);
+  return actions;
+}
+
 function createFeatureHeading(kind, id) {
   const heading = document.createElement("h2");
   heading.id = "feature-modal-title";