/* 🔒 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.3800, -98.1000], 10);
// Tile Layer (Standard Map View)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const regionalBoundary = [
[30.2020843, -97.9998855],
[30.2026777, -97.9937057],
[30.2145457, -98.3693008],
[30.2833517, -98.4104996],
[30.5586841, -98.3802872],
[30.5574260, -98.3411247],
[30.5657036, -98.3232719],
[30.5526956, -98.2889396],
[30.5668861, -98.2782966],
[30.5686597, -98.2645637],
[30.5559478, -98.2552940],
[30.5550608, -98.2436210],
[30.5645211, -98.2395012],
[30.5618605, -98.2285148],
[30.5710246, -98.2130653],
[30.5591998, -98.1883461],
[30.5373202, -98.1862861],
[30.5331803, -98.1797630],
[30.5396858, -98.1708366],
[30.5314060, -98.1694633],
[30.5251956, -98.1653434],
[30.5246042, -98.1406242],
[30.5405729, -98.1258613],
[30.5216467, -98.1203682],
[30.5142526, -98.1334144],
[30.4855584, -98.1299812],
[30.4867418, -98.1145317],
[30.4991670, -98.1032020],
[30.4973921, -98.0884391],
[30.4926588, -98.0815727],
[30.4805286, -98.0880958],
[30.4681010, -98.0908424],
[30.4615907, -98.0705864],
[30.4598151, -98.0609733],
[30.4544880, -98.0561668],
[30.4408731, -98.0637199],
[30.4299207, -98.0599434],
[30.4488647, -98.0362541],
[30.4805286, -98.0214912],
[30.4823039, -98.0101616],
[30.4612948, -97.9978019],
[30.4222236, -98.0379707],
[30.4171905, -98.0338508],
[30.4160063, -97.9881889],
[30.4165098, -97.9911394],
[30.4073312, -97.9811830],
[30.3937097, -98.0055589],
[30.3771245, -98.0206651],
[30.3703119, -98.0144853],
[30.3797902, -97.9828996],
[30.3951904, -97.9677934],
[30.3969672, -97.9430742],
[30.4034818, -97.9348344],
[30.4221350, -97.9540605],
[30.4366405, -97.9513139],
[30.4396006, -97.9324312],
[30.4372325, -97.9183549],
[30.4526237, -97.9255647],
[30.4641655, -97.9152650],
[30.3880829, -97.7672929],
[30.3643875, -97.7961320],
[30.3208322, -97.8191347],
[30.3157940, -97.8311510],
[30.2792387, -97.8307034],
[30.2377219, -97.8677822],
[30.2341625, -97.9350735],
[30.2020843, -97.9998855]
];
// Apply high-contrast polygon styling (Bright orange solid border, subtle warm fill tint)
const polygon = L.polygon(regionalBoundary, {
color: '#ff6600', // High-contrast vibrant Orange border
fillColor: '#ff9955', // 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);