refactor(maps): share localized OpenStreetMap component

www/src/components/OpenStreetMap.astro

@@ -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>

www/src/components/TourMap.astro

@@ -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>

www/src/components/pages/ContactPage.astro

@@ -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;

www/src/layouts/PageLayout.astro

@@ -7,7 +7,7 @@ import AboutPage from '../components/pages/AboutPage.astro';
 import ServicesPage from '../components/pages/ServicesPage.astro';
 import CareersPage from '../components/pages/CareersPage.astro';
 import ContactPage from '../components/pages/ContactPage.astro';
-import TourMap from '../components/TourMap.astro';
+import OpenStreetMap from '../components/OpenStreetMap.astro';
 import FaqPage from '../components/pages/FaqPage.astro';
 import InsurancePage from '../components/pages/InsurancePage.astro';
 import PageHero from '../components/PageHero.astro';
@@ -84,7 +84,7 @@ if (entry.data.slug === 'team' && entry.data.lang === 'en' && !entry.data.team)
     : entry.data.slug === 'contact'
     ? <ContactPage title={bannerTitle} lang={entry.data.lang}><slot /></ContactPage>
     : <article class:list={['prose', 'source-page', 'container', { 'service-page': isService }]}><slot /></article>}
-  {isTour && <TourMap />}
+  {isTour && <OpenStreetMap lang={entry.data.lang} />}
   {isService && (entry.data.lang === 'en' || entry.data.lang === 'es') && <ServiceInquiryDrawer service={entry.data.slug} lang={entry.data.lang} route={route} />}
   {showForm && <FormShell lang={entry.data.lang} route={route} title={bannerTitle} logicalForm={entry.data.slug === 'referrals' ? 'referral' : 'service'} showBackground={entry.data.slug === 'client-consultation'} />}
 </BaseLayout>

www/src/utils/form-messages.ts

@@ -10,7 +10,7 @@ const messages = {
     mock: 'Demo only: this local fixture never sends information.', mockSuccess: 'Demo only: the local fixture completed without sending anything.', mockFailed: 'Demo only: the local fixture simulated a failed submission.', mockUnavailable: 'Demo only: the local fixture simulated an unavailable service.',
     map: 'Map showing Arizona Institute for Autism in Scottsdale',
     tile: 'OpenStreetMap tile showing area around Arizona Institute for Autism in Scottsdale, AZ',
-    zoomIn: 'Zoom in', zoomOut: 'Zoom out', marker: 'Arizona Institute for Autism',
+    zoomIn: 'Zoom in', zoomOut: 'Zoom out', marker: 'Arizona Institute for Autism', directions: 'Get Directions',
     formAPreview: {
       internalPreview: 'Internal meeting preview', heading: 'General enquiries preview',
       name: 'Your name', phone: 'Phone number', email: 'Email address',
@@ -35,7 +35,7 @@ const messages = {
     mock: 'Solo demostración: esta prueba local nunca envía información.', mockSuccess: 'Solo demostración: la prueba local terminó sin enviar información.', mockFailed: 'Solo demostración: la prueba local simuló un envío fallido.', mockUnavailable: 'Solo demostración: la prueba local simuló un servicio no disponible.',
     map: 'Mapa de la ubicación de Arizona Institute for Autism en Scottsdale',
     tile: 'Mapa de OpenStreetMap de los alrededores de Arizona Institute for Autism en Scottsdale, Arizona',
-    zoomIn: 'Acercar', zoomOut: 'Alejar', marker: 'Arizona Institute for Autism',
+    zoomIn: 'Acercar', zoomOut: 'Alejar', marker: 'Arizona Institute for Autism', directions: 'Cómo llegar',
     formAPreview: {
       internalPreview: 'Vista previa para reunión interna', heading: 'Vista previa de consultas generales',
       name: 'Su nombre', phone: 'Número de teléfono', email: 'Correo electrónico',

www/tools/library.test.mjs

@@ -1089,10 +1089,10 @@ test('Phase 9 off-mode form surfaces localize Spanish without enabling submissio
     assert.match(form.text(), route.startsWith('/es/') ? /El envío en línea aún no está habilitado/ : /Online submission is not yet connected/);
   }
   const $ = load(artifacts.get('staging').html.get('/es/contact'));
-  assert.match($('.contact-map-section').attr('aria-label'), /^Mapa/);
-  assert.equal($('#aia-contact-map').attr('data-zoom-in'), 'Acercar');
-  assert.equal($('#aia-contact-map').attr('data-zoom-out'), 'Alejar');
-  assert.match($('#aia-contact-map').attr('data-tile-alt'), /^Mapa de OpenStreetMap/);
+  assert.match($('.openstreetmap-section').attr('aria-label'), /^Mapa/);
+  assert.equal($('#aia-openstreetmap').attr('data-zoom-in'), 'Acercar');
+  assert.equal($('#aia-openstreetmap').attr('data-zoom-out'), 'Alejar');
+  assert.match($('#aia-openstreetmap').attr('data-tile-alt'), /^Mapa de OpenStreetMap/);
 });
 
 test('Phase 7 author labels and Arabic credential isolation preserve archive SEO', () => {