refactor(maps): share localized OpenStreetMap component

2026-11-01 17:48:38 -07:00
1 parent b5e606a839
commit 85def8466c
@@ -0,0 +1,57 @@
+---
+import { formMessages } from '../utils/form-messages';
+
+const { lang = 'en' } = Astro.props;
+const text = formMessages(lang);
+const directions = 'https://www.google.com/maps/dir/?api=1&destination=8901%20E%20Raintree%20Dr%20Ste%20160%2C%20Scottsdale%2C%20AZ%2085260';
+---
+<section class="openstreetmap-section" aria-label={text.map}>
+  <div id="aia-openstreetmap" class="openstreetmap" data-tile-alt={text.tile} data-zoom-in={text.zoomIn} data-zoom-out={text.zoomOut} data-marker-label={text.marker} data-directions-label={text.directions}></div>
+  <p data-openstreetmap-fallback>
+    Arizona Institute for Autism — 8901 E Raintree Dr, Ste 160, Scottsdale, AZ 85260.
+    <a href={directions} target="_blank" rel="noopener noreferrer">{text.directions}</a>
+  </p>
+</section>
+
+<script is:inline src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+<script is:inline define:vars={{ directions }}>
+(() => {
+  const element = document.getElementById('aia-openstreetmap');
+  if (!element || !window.L || element.dataset.initialized) return;
+
+  const map = window.L.map(element, { zoomControl: false }).setView([33.63, -111.88756], 12);
+  element.dataset.initialized = 'true';
+  window.L.control.zoom({ zoomInTitle: element.dataset.zoomIn, zoomOutTitle: element.dataset.zoomOut }).addTo(map);
+  const tiles = window.L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  });
+  tiles.on('tileload', ({ tile }) => {
+    tile.alt = element.dataset.tileAlt;
+  });
+  tiles.addTo(map);
+  window.L.marker([33.617746, -111.88756], {
+    alt: element.dataset.markerLabel,
+    title: element.dataset.markerLabel
+  }).addTo(map).bindPopup(`
+    <span class="openstreetmap__popup">
+      <b>Arizona Institute for Autism</b><br>
+      <img alt="Arizona Institute for Autism" src="/assets/images/aia-logo.svg" width="94"><br>
+      <a href="${directions}" target="_blank" rel="noopener noreferrer">${element.dataset.directionsLabel}</a>
+    </span>
+  `).openPopup();
+  // Keep address/directions available without JavaScript or if Leaflet is blocked.
+  document.querySelector('[data-openstreetmap-fallback]')?.setAttribute('hidden', '');
+})();
+</script>
+
+<style>
+  .openstreetmap-section { background: white; margin: 0; padding: 0; }
+  .openstreetmap { height: 360px; width: 100%; }
+  .openstreetmap :global(.openstreetmap__popup) { display: block; text-align: center; }
+  .openstreetmap :global(.leaflet-popup-content) { margin: 10px 20px 8px 18px; }
+  .openstreetmap :global(.openstreetmap__popup img) { display: inline-block; margin-bottom: .25rem; }
+  .openstreetmap :global(a:focus-visible) { outline: 3px solid var(--color-focus, #115bbd); outline-offset: 2px; }
+  [data-openstreetmap-fallback] { margin: 0; padding: 1rem; text-align: center; }
+  [hidden] { display: none; }
+</style>
@@ -1,50 +0,0 @@
---
-const directions = 'https://www.google.com/maps/dir/?api=1&destination=8901%20E%20Raintree%20Dr%20Ste%20160%2C%20Scottsdale%2C%20AZ%2085260';
---
-<section class="tour-map-section" aria-label="AIA Scottsdale location map">
-  <div id="aia-tour-map" class="tour-map"></div>
-  <p data-tour-map-fallback>
-    Arizona Institute for Autism — 8901 E Raintree Dr, Ste 160, Scottsdale, AZ 85260.
-    <a href={directions} target="_blank" rel="noopener noreferrer">Get Directions</a>
-  </p>
-</section>
-
-<script is:inline src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
-<script is:inline define:vars={{ directions }}>
-(() => {
-  const element = document.getElementById('aia-tour-map');
-  if (!element || !window.L || element.dataset.initialized) return;
-  const map = window.L.map(element).setView([33.63, -111.88756], 12);
-  element.dataset.initialized = 'true';
-  const tiles = window.L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    maxZoom: 19,
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-  });
-  tiles.on('tileload', ({ tile }) => {
-    tile.alt = 'OpenStreetMap tile showing the area around Arizona Institute for Autism in Scottsdale, AZ';
-  });
-  tiles.addTo(map);
-  window.L.marker([33.617746, -111.88756], {
-    alt: 'Arizona Institute for Autism, Scottsdale',
-    title: 'Arizona Institute for Autism, Scottsdale'
-  }).addTo(map).bindPopup(`
-    <span class="tour-map__popup">
-      <b>Arizona Institute for Autism</b><br>
-      <img alt="Arizona Institute for Autism" src="/assets/images/aia-logo.svg" width="124"><br>
-      <a href="${directions}" target="_blank" rel="noopener noreferrer">Get Directions</a>
-    </span>
-  `).openPopup();
-  // Keep address/directions available without JavaScript or if Leaflet is blocked.
-  document.querySelector('[data-tour-map-fallback]')?.setAttribute('hidden', '');
-})();
-</script>
-
-<style>
-  .tour-map-section { background: white; margin: 0; padding: 0; }
-  .tour-map { height: 360px; width: 100%; }
-  .tour-map :global(.tour-map__popup) { display: block; text-align: center; }
-  .tour-map :global(.tour-map__popup img) { margin-bottom: .5rem; }
-  .tour-map :global(a:focus-visible) { outline: 3px solid var(--color-focus, #115bbd); outline-offset: 2px; }
-  [data-tour-map-fallback] { margin: 0; padding: 1rem; text-align: center; }
-  [hidden] { display: none; }
-</style>
@@ -2,7 +2,7 @@
 import ContactForm from '../ContactForm.astro';
 import FormAPreview from '../FormAPreview.astro';
 import JotformIframe from '../JotformIframe.astro';
-import { formMessages } from '../../utils/form-messages';
+import OpenStreetMap from '../OpenStreetMap.astro';
 import { formAPreviewEnabled, formModeForRuntime, resolveFormAIframe, resolveFormMode } from '../../utils/form-integration';

 interface Props {
@@ -11,7 +11,6 @@ interface Props {
 }

 const { title, lang } = Astro.props;
-const text = formMessages(lang);
 const formConfig = resolveFormMode(import.meta.env.PUBLIC_AIA_FORMS_MODE);
 const formPreview = formAPreviewEnabled(import.meta.env.PUBLIC_AIA_FORM_A_PREVIEW, import.meta.env.PUBLIC_ALLOW_INDEXING, formModeForRuntime(formConfig));
 const route = lang === 'es' ? '/es/contact' : '/contact';
@@ -35,40 +34,7 @@ const formAIframe = resolveFormAIframe({
  </div>
 </section>

-<section class="contact-map-section" aria-label={text.map}>
-  <div id="aia-contact-map" class="contact-map" data-tile-alt={text.tile} data-zoom-in={text.zoomIn} data-zoom-out={text.zoomOut} data-marker-label={text.marker}></div>
-</section>
-
-<script is:inline src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
-<script is:inline>
-(() => {
-  const mapElement = document.getElementById('aia-contact-map');
-
-  if (!mapElement || !window.L) return;
-
-  const map = window.L.map(mapElement, { zoomControl: false }).setView([33.63, -111.88756], 12);
-  window.L.control.zoom({ zoomInTitle: mapElement.dataset.zoomIn, zoomOutTitle: mapElement.dataset.zoomOut }).addTo(map);
-  const tiles = window.L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-    maxZoom: 19
-  });
-
-  tiles.on('tileload', (event) => {
-    if (event.tile && !event.tile.alt) {
-      event.tile.alt = mapElement.dataset.tileAlt;
-    }
-  });
-
-  tiles.addTo(map);
-
-  window.L.marker([33.617746, -111.88756], { alt: mapElement.dataset.markerLabel, title: mapElement.dataset.markerLabel }).addTo(map).bindPopup(`
-    <span style="display:block;text-align:center">
-      <b>Arizona Institute for Autism</b><br>
-      <img class="contact-map__logo" alt="Arizona Institute for Autism" src="/assets/images/aia-logo.svg" width="94">
-    </span>
-  `).openPopup();
-})();
-</script>
+<OpenStreetMap lang={lang} />

 <style>
  .contact-page {
@@ -106,22 +72,6 @@ const formAIframe = resolveFormAIframe({
    margin-bottom: 40px;
  }

-  .contact-map-section {
-    background: white;
-    margin: 0;
-    padding: 0;
-  }
-
-  .contact-map {
-    height: 360px;
-    width: 100%;
-  }
-
-  .contact-map :global(.contact-map__logo) {
-    display: block;
-    margin-inline: auto;
-  }
-
  @media (max-width: 992px) {
    .contact-page {
      padding-block: 50px;