map = function() { const parentContainer = DOM.element("div"); // Header const header = DOM.element("div"); header.style.backgroundColor = "#808080"; header.style.padding = "10px"; header.style.textAlign = "left"; header.style.fontSize = "22px"; header.style.fontWeight = "bold"; header.style.color = "white"; header.style.fontFamily = '"Source Serif Pro", "Georgia", serif'; header.style.borderRadius = "10px 10px 0 0"; // Create span element to wrap the word "trains" const trainsSpan = DOM.element("span"); trainsSpan.textContent = "trains"; trainsSpan.style.backgroundColor = "orange"; // Orange background for the word "trains" trainsSpan.style.padding = "0 5px"; // Add some padding around the word // Append the header text with the word "trains" header.append("See where people reported "); header.append(trainsSpan); header.append(" blocking roads near schools in 2024"); // Append header to the DOM document.body.appendChild(header); const dek = DOM.element("div"); dek.innerHTML = "Locations of reported train blockages within one mile of a Houston ISD campus around school pick-up and drop-off. Hover for details."; dek.style.fontSize = "14px"; dek.style.fontWeight = "normal"; dek.style.color = "white"; dek.style.marginTop = "5px"; header.appendChild(dek); parentContainer.appendChild(header); // Search and Reset Button Container const actionContainer = DOM.element("div"); actionContainer.style.display = "flex"; actionContainer.style.flexDirection = "row"; actionContainer.style.justifyContent = "space-between"; // Space between elements actionContainer.style.marginTop = "10px"; // Space between header and action container actionContainer.style.padding = "0 10px"; // Padding for left-right spacing // Reset Button const resetButton = DOM.element("button"); resetButton.textContent = "Click here to reset the map"; resetButton.style.backgroundColor = "#808080"; resetButton.style.border = "1px solid black"; resetButton.style.borderRadius = "10px"; // Rounded borders resetButton.style.padding = "10px"; resetButton.style.fontSize = "14px"; resetButton.style.cursor = "pointer"; resetButton.style.color = "white"; // White text resetButton.style.fontWeight = "bold"; // Bolded text resetButton.style.fontFamily = '"Source Serif Pro", "Georgia", serif'; resetButton.onclick = () => { mapInstance.setView([29.7604, -95.3698], 11); // Reset to original view resetHighlights(); // Reset marker highlights // Reset the dropdown to the first option searchDropdown.selectedIndex = 0; // Remove highlight from previously selected school (if any) schoolMarkers.forEach((school) => { school.marker.setStyle({ fillOpacity: 0.5, color: null, weight: 1, }); }); // Clear previously highlighted train markers trainMarkers.forEach((train) => { train.marker.setStyle({ fillOpacity: 0.5, color: null, weight: 1, }); }); }; // Search container const searchContainer = DOM.element("div"); searchContainer.style.backgroundColor = "#808080"; searchContainer.style.borderRadius = "10px"; // Rounded edges searchContainer.style.border = "1px solid black"; searchContainer.style.padding = "10px"; searchContainer.style.display = "flex"; searchContainer.style.flexDirection = "row"; searchContainer.style.alignItems = "center"; const searchLabel = DOM.element("label"); searchLabel.textContent = "Select a school: "; searchLabel.style.marginRight = "5px"; searchLabel.style.fontSize = "14px"; searchLabel.style.fontFamily = '"Source Serif Pro", "Georgia", serif'; searchLabel.style.color = "white"; const searchDropdown = DOM.element("select"); searchDropdown.style.padding = "5px"; searchDropdown.style.maxHeight = "50vh"; // Limit the height of the dropdown to half the screen height searchDropdown.style.overflowY = "auto"; // Make it scrollable if there are too many options searchDropdown.style.width = "200px"; // Fixed width for the dropdown searchDropdown.style.position = "relative"; // Ensure the dropdown is positioned correctly within the container searchDropdown.style.zIndex = "1001"; // Ensure it's above the map or other elements, if necessary searchDropdown.style.fontFamily = '"Source Serif Pro", "Georgia", serif'; // Add options to dropdown const uniqueSchools = [...new Set(joined_schools_trains.map((row) => row.campus_clean))]; uniqueSchools.forEach((school) => { const option = DOM.element("option"); option.textContent = school; option.value = school; searchDropdown.appendChild(option); }); searchContainer.appendChild(searchLabel); searchContainer.appendChild(searchDropdown); // Append reset button and search bar to action container actionContainer.appendChild(searchContainer); actionContainer.appendChild(resetButton); // Append the action container to the parent container parentContainer.appendChild(actionContainer); // Map container const container = DOM.element("div"); container.style.height = "550px"; container.style.width = "100%"; container.style.marginTop = "10px"; container.style.borderRadius = "0 0 10px 10px"; parentContainer.appendChild(container); // Initialize Leaflet map const mapInstance = L.map(container).setView([29.70917, -95.2781], 12); mapInstance.attributionControl.setPrefix(""); L.tileLayer( "https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWRyaWFuYXJlemFsIiwiYSI6ImNtNGtmM2RqYTBkMDUyanBxeXl1cmRubjQifQ.TFvNeieiMdrYn2JGerM1PA", { maxZoom: 19, attribution: "© OpenStreetMap contributors" } ).addTo(mapInstance); // Data storage const schoolMarkers = []; const trainMarkers = []; const relationships = {}; // Build relationships for quick lookups joined_schools_trains.forEach((row) => { const schoolKey = `${row.Latitude},${row.Longitude}`; const trainKey = `${row.latitude_2},${row.longitude_2}`; if (!relationships[schoolKey]) relationships[schoolKey] = []; relationships[schoolKey].push(trainKey); if (!relationships[trainKey]) relationships[trainKey] = []; relationships[trainKey].push(schoolKey); }); // Helper to reset styles function resetHighlights() { schoolMarkers.forEach((s) => s.marker.setStyle({ fillOpacity: 0.5 })); trainMarkers.forEach((t) => t.marker.setStyle({ fillOpacity: 0.5 })); } // Highlight related points and count function highlightPoints(key) { const relatedKeys = relationships[key] || []; let nearbyCount = 0; relatedKeys.forEach((relatedKey) => { schoolMarkers.forEach((s) => { if (`${s.lat},${s.lng}` === relatedKey) { s.marker.setStyle({ fillOpacity: 1 }); nearbyCount++; } }); trainMarkers.forEach((t) => { if (`${t.lat},${t.lng}` === relatedKey) { t.marker.setStyle({ fillOpacity: 1 }); nearbyCount++; } }); }); return nearbyCount; } // Add school markers joined_schools_trains.forEach((row) => { const lat = row.Latitude, lng = row.Longitude, name = row.campus_clean; const key = `${lat},${lng}`; if (!schoolMarkers.some((s) => s.lat === lat && s.lng === lng)) { const marker = L.circleMarker([lat, lng], { radius: 6, color: null, fillColor: "#555", fillOpacity: 0.5, }) .bindTooltip(`${name}`) .addTo(mapInstance); marker.on("mouseover", () => { resetHighlights(); const nearbyCount = highlightPoints(key); marker.setTooltipContent(`${name}
Nearby crossings with reported blockages: ${nearbyCount}`); marker.setStyle({ fillOpacity: 1 }); }); marker.on("mouseout", resetHighlights); schoolMarkers.push({ lat, lng, name, marker }); } }); // Add train markers joined_schools_trains.forEach((row) => { const lat = row.latitude_2, lng = row.longitude_2; const reportCount = row.report_count; const pedestReports = row.pedest_reports; const train = row.railroad || "Unknown"; // Fallback value if train_railroad is undefined const trainid = row.crossing_id || "Unknown"; // Fallback value if train_crossing_id is undefined const stationary = row.a_stationary_train || "Unknown"; // Fallback value if train_crossing_id is undefined const moving = row.a_moving_train || "Unknown"; // Fallback value if train_crossing_id is undefined const key = `${lat},${lng}`; if (!trainMarkers.some((t) => t.lat === lat && t.lng === lng)) { const scaleFactor = Math.sqrt(reportCount) * 2; const radius = Math.max(6, scaleFactor); const marker = L.circleMarker([lat, lng], { radius: radius, color: null, fillColor: "#FFA500", fillOpacity: 0.5, }) .bindTooltip( `Total reports: ${reportCount}
Total reports with pedestrians crossing: ${pedestReports}` ) .addTo(mapInstance); marker.on("mouseover", () => { resetHighlights(); const nearbyCount = highlightPoints(key); marker.setTooltipContent(`Train crossing ID: ${trainid}
Nearby schools: ${nearbyCount}
Total reported blockages: ${reportCount}
Reports of stationary trains: ${stationary}
Reports of moving trains: ${moving}
Reports of people climbing trains: ${pedestReports}`); marker.setStyle({ fillOpacity: 1 }); }); marker.on("mouseout", resetHighlights); trainMarkers.push({ lat, lng, marker }); } }); // Store the annotation elements (line and label) for control let milbyAnnotationLine; let milbyAnnotationLabel; // Function to add Milby annotation function addMilbyAnnotation() { const milbyLat = 29.70917; const milbyLng = -95.2781; const color = "#808080"; const note = "Location where Milby High School student Sergio Rodriguez died"; // Define the start point of the arrow (straight to the right) const arrowStart = [milbyLat, milbyLng + 0.05]; // Add the dashed arrow milbyAnnotationLine = L.polyline([arrowStart, [milbyLat, milbyLng]], { color: color, weight: 2, dashArray: "5, 5", opacity: 1, }).addTo(mapInstance); // Use the start point of the arrow as the text box center const textBoxPosition = arrowStart; // Add a label at the arrow's start point milbyAnnotationLabel = L.marker(textBoxPosition, { icon: L.divIcon({ className: "custom-label", html: `

${note}

`, iconSize: [200, 50], iconAnchor: [100, 25], }), }).addTo(mapInstance); } // Function to remove Milby annotation function removeMilbyAnnotation() { if (milbyAnnotationLine) mapInstance.removeLayer(milbyAnnotationLine); if (milbyAnnotationLabel) mapInstance.removeLayer(milbyAnnotationLabel); } // Add Milby annotation initially addMilbyAnnotation(); // Control annotation visibility based on zoom level mapInstance.on("zoomend", () => { const currentZoom = mapInstance.getZoom(); if (currentZoom < 14) { removeMilbyAnnotation(); // Remove annotation at lower zoom levels } else { if (!milbyAnnotationLine && !milbyAnnotationLabel) addMilbyAnnotation(); // Re-add annotation if zooming back in } }); // Reset button functionality extended to remove the annotation resetButton.onclick = () => { mapInstance.setView([29.7604, -95.3698], 11); // Reset to original view resetHighlights(); searchDropdown.selectedIndex = 0; // Reset styles schoolMarkers.forEach((school) => { school.marker.setStyle({ fillOpacity: 0.5, color: null, weight: 1, }); }); trainMarkers.forEach((train) => { train.marker.setStyle({ fillOpacity: 0.5, color: null, weight: 1, }); }); // Ensure Milby annotation is removed when resetting the map removeMilbyAnnotation(); }; // When a school is selected, zoom to it and highlight it searchDropdown.onchange = function() { const selectedSchool = searchDropdown.value; const school = schoolMarkers.find((school) => school.name === selectedSchool); if (school) { mapInstance.setView([school.lat, school.lng], 15); // Zoom to the school resetHighlights(); school.marker.setStyle({ fillOpacity: 1 }); const nearbyCount = highlightPoints(`${school.lat},${school.lng}`); school.marker.setTooltipContent( `${school.name}
Number of nearby crossings: ${nearbyCount}` ); } }; // Footer const footer = DOM.element("div"); footer.innerHTML = "Note: Map includes HISD campuses with at least one report of a train blocking nearby intersections between 7 to 9 a.m. or 3 to 5 p.m. on days school was in session. Data is as of December 2024.
Source: Federal Railroad Administration
Map: Adriana Rezal/Houston Landing"; footer.style.backgroundColor = "#808080"; footer.style.padding = "10px"; footer.style.textAlign = "left"; footer.style.fontSize = "14px"; footer.style.color = "white"; footer.style.fontFamily = '"Source Serif Pro", "Georgia", serif'; footer.style.borderRadius = "0 0 10px 10px"; parentContainer.appendChild(footer); return parentContainer; }