refactor(maps): share localized OpenStreetMap component

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;