{"type":"elementor","siteurl":"https://xproroofingohio.com/wp-json/","elements":[{"id":"24acb486","elType":"widget","isInner":false,"isLocked":false,"settings":{"editor":"
document.addEventListener(\"DOMContentLoaded\", function () {
const alertContainer = document.getElementById(\"alerts-container\");
const map = L.map('map').setView([40.5, -82.5], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
fetch(\"https://api.weather.gov/alerts/active?area=OH\")
.then(response => response.json())
.then(data => {
alertContainer.innerHTML = \"\";
if (data.features.length === 0) {
alertContainer.innerHTML = \"
✅ No active alerts for Ohio.
\";
return;
}
data.features.forEach(feature => {
let props = feature.properties;
let severityClass = props.severity.toLowerCase();
let alertDiv = document.createElement(\"div\");
alertDiv.className = `alert ${severityClass}`;
alertDiv.innerHTML = `
${props.event} (${props.severity})
${props.description}
⏳ Urgency: ${props.urgency} | ✅ Certainty: ${props.certainty}
📢 ${props.instruction || \"Stay alert and follow updates.\"}
📅 Effective: ${new Date(props.effective).toLocaleString()} – Expires: ${new Date(props.expires).toLocaleString()}
`;
alertDiv.style.cursor = 'pointer';
alertDiv.addEventListener('click', () => {
if (feature.geometry) {
const bounds = L.geoJSON(feature.geometry).getBounds();
map.fitBounds(bounds, {padding: [20, 20]});
}
});
alertContainer.appendChild(alertDiv);
if (feature.geometry) {
L.geoJSON(feature.geometry, {
style: { color: severityClass === 'severe' ? 'red' : severityClass === 'moderate' ? 'orange' : 'green', weight: 2 }
}).addTo(map).bindPopup(`${props.event}
${props.description}`);
} else if (props.affectedZones.length) {
fetch(props.affectedZones[0])
.then(res => res.json())
.then(zoneData => {
if (zoneData.geometry) {
L.geoJSON(zoneData.geometry, {
style: { color: \"blue\", weight: 1, dashArray: \"3\" }
}).addTo(map).bindPopup(`${props.event}
${props.description}`);
}
})
.catch(e => console.error(\"Zone geometry fetch error:\", e));
}
});
})
.catch(error => {
alertContainer.innerHTML = \"
⚠️ Error fetching weather alerts. Try again later.
\";
console.error(\"Weather API Error:\", error);
});
});