/* 🔒 Scoped to the map container */
.dexter-map-container {
position: relative;
border-radius: 20px;
overflow: hidden;
max-width: 100%;
border: 1px solid #ccc;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.dexter-map-container #map {
width: 100%;
height: 600px;
background: #f0f0f0;
}
/* 🎆 Makes the SVG polygon path "pop" with a neon glow drop-shadow */
.leaflet-interactive {
filter: drop-shadow(0px 0px 8px rgba(255, 102, 0, 0.6));
}
/* 🔘 Custom Recenter Button Styling */
.recenter-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
background: white;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
transition: background 0.2s ease;
}
.recenter-btn:hover {
background: #f4f4f4;
color: #000;
}
const map = L.map('map').setView([30.4350, -87.2150], 11);
// Tile Layer (Standard Map View)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Geographical boundary shape for Pensacola, FL
const regionalBoundary = [
[30.5320, -87.1650], // UWF North / Escambia Bay
[30.5050, -87.1580], // Ferry Pass Shoreline
[30.4780, -87.1680], // Scenic Heights / Gaberonne
[30.4500, -87.1750], // East Hill / Escambia Bay
[30.4190, -87.1890], // Pensacola Bay Bridge head
[30.4020, -87.2020], // Port of Pensacola / Downtown
[30.3940, -87.2280], // Sanders Beach / Bayou Chico entrance
[30.3800, -87.2550], // Bayou Grande / NAS border
[30.3880, -87.2830], // Warrington boundary
[30.4150, -87.2940], // West Pensacola
[30.4420, -87.2820], // Marcus Pointe / W Street
[30.4680, -87.3010], // Pine Forest / Pensacola Palms
[30.4950, -87.2820], // Ensley boundary
[30.5210, -87.2520], // Nine Mile Rd corridor
[30.5350, -87.2150], // Nine Mile East
[30.5320, -87.1650] // Closing back to Escambia Bay
];
// Apply high-contrast polygon styling (Bright orange solid border, subtle warm fill tint)
const polygon = L.polygon(regionalBoundary, {
color: '#b30302', // High-contrast vibrant Orange border
fillColor: '#b30302', // Warm matching light orange fill background
fillOpacity: 0.12, // Kept low so city/road names underneath remain highly readable
weight: 4.5, // Thicker line weight to visually jump off the map grid
lineJoin: 'round' // Smooth out sharp vertex turns
}).addTo(map);
function resetMapView() {
map.fitBounds(polygon.getBounds(), {
padding: [20, 20],
animate: true,
duration: 0.8
});
}
resetMapView();
document.getElementById('recenterMapBtn').addEventListener('click', resetMapView);