fix(tour): restore location map and schedule button

This commit is contained in:
DeCentN2Madness committed 2026-11-01 16:41:20 -07:00
1 parent 8dff6a5ad0
commit b5e606a839
4 files changed
+95 -2

No files matched your search

+50
View File
@@ -0,0 +1,50 @@
---
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>