// Updated map code with hover tooltips rsiMapHover = { // Create container with unique ID to force complete recreation when filter changes const container = DOM.element("div", { style: "height: 800px; width: 100%;", id: `map-${Date.now()}-${Math.random()}-${rsiStatusFilter.join("-")}` // Include filter values in ID }); // Small delay to ensure DOM is ready setTimeout(() => { const map = L.map(container, { preferCanvas: true // Better performance for many markers }).setView([31.9686, -99.9018], 6); // Keep "Leaflet" text with link but remove the flag map.attributionControl.setPrefix( 'Leaflet' ); // Color mapping for System values const systemColors = { "Public Independent": "#6a51a3", TAMUS: "#500000", TSUS: "#8e7449", TTUS: "#CC0000", TWU: "#E3D353", UHS: "#888b8d", UNTS: "#00853E", UTS: "#F47920" }; // Base layer L.tileLayer( "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png", { attribution: "© OpenStreetMap contributors © CARTO" } ).addTo(map); // Helper functions for formatting const formatCurrency = (value) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(value); }; const formatPercentage = (decimal) => { if (decimal === null) return "NA"; return `${(decimal * 100).toFixed(1)}%`; }; const formatNumberWithCommas = (number, decimals = null) => { if (number == null || isNaN(number)) { return "0"; } const options = {}; if (decimals !== null) { options.minimumFractionDigits = decimals; options.maximumFractionDigits = decimals; } return Number(number).toLocaleString("en-US", options); }; // Filter counties to only show Texas counties (id starts with "48") const texasCounties = counties.filter( (county) => county.id && county.id.toString().startsWith("48") ); // Add Texas county boundaries L.geoJSON(texasCounties, { style: { fillColor: "transparent", color: "#666", weight: 1, opacity: 0.7, fillOpacity: 0 } }).addTo(map); // Filter data based on selected RSI_Status values const filteredFeatures = rsi_data_with_coords.features.filter((feature) => rsiStatusFilter.includes(feature.properties.RSI_Status) ); // Create filtered GeoJSON object const filteredData = { type: "FeatureCollection", features: filteredFeatures }; // Add filtered GeoJSON layer with hover tooltips const layer = L.geoJSON(filteredData, { style: function (feature) { const system = feature.properties.System; const fillColor = systemColors[system] || "#999999"; // Default gray if system not found return { fillColor: fillColor, weight: 1, opacity: 0.5, color: fillColor, fillOpacity: 0.2 }; }, onEachFeature: function (feature, layer) { const props = feature.properties; // Bind popup (click event) // layer.bindPopup( // `${props.NAME}
// 2024 Population (Est.): ${formatNumberWithCommas( // props.Pop_Est_2024 // )}
// University: ${props.University}
// University RSI Status: ${props.RSI_Status}
// County Percent Rural: ${formatPercentage(props.Pct_Rural)}
// Rural-Urban Code: ${props.RUCC_2023_Desc}` // ); // Bind tooltip (hover event) - shorter version layer.bindTooltip( `${props.NAME}
2024 Population (Est.): ${formatNumberWithCommas( props.Pop_Est_2024 )}
University: ${props.University}
University RSI Status: ${props.RSI_Status}
County Percent Rural: ${formatPercentage(props.Pct_Rural)}
Rural-Urban Code: ${props.RUCC_2023_Desc}`, { permanent: false, direction: "top", offset: [0, -10], opacity: 0.9, className: "county-tooltip" } ); // Optional: Add hover effects for visual feedback layer.on({ mouseover: function (e) { const layer = e.target; layer.setStyle({ weight: 2, opacity: 0.8, fillOpacity: 0.4 }); }, mouseout: function (e) { const layer = e.target; layer.setStyle({ weight: 1, opacity: 0.5, fillOpacity: 0.2 }); } }); } }).addTo(map); // Create unique university markers (also filtered) const uniqueUniversities = new Map(); // Extract unique universities from filtered data filteredFeatures.forEach((feature) => { const props = feature.properties; if ( props.University && props.latitude && props.longitude && !uniqueUniversities.has(props.University) ) { uniqueUniversities.set(props.University, { lat: props.latitude, lng: props.longitude, name: props.University, university: props.University_Full, system: props.System, rsiStatus: props.RSI_Status, pctRural: props.county_pct_rural, rpuStatus: props.RPU_Status, adjCtyPctRural: props.cluster_pct_rural_avg, notAdjUrban: props.Not_Adj_Urban_Status, uniCounty: props.County }); } }); // Add circle markers for each unique university (filtered) with hover tooltips uniqueUniversities.forEach((uni) => { const fillColor = systemColors[uni.system] || "#999999"; // Add circle marker const circleMarker = L.circleMarker([uni.lat, uni.lng], { radius: 5, fillColor: fillColor, color: fillColor, weight: 1, opacity: 1, fillOpacity: 0.8 }) // .bindPopup( // `${uni.university}
// System: ${uni.system}
// RSI Status: ${uni.rsiStatus}
// Regional Public University (RPU) Status: ${uni.rpuStatus}
// University County Location: ${uni.uniCounty}
// University County Percent Rural: ${formatPercentage(uni.pctRural)}
// Adjacent Counties Percent Rural: ${formatPercentage( // uni.adjCtyPctRural // )}
// Located In/Next to Metropolitan County: ${uni.notAdjUrban}` // ) // Add hover tooltip for university markers .bindTooltip( `${uni.university}
System: ${uni.system}
RSI Status: ${uni.rsiStatus}
Regional Public University (RPU) Status: ${uni.rpuStatus}
University County Location: ${uni.uniCounty}
University County Percent Rural: ${formatPercentage(uni.pctRural)}
Adjacent Counties Percent Rural: ${formatPercentage( uni.adjCtyPctRural )}
Located In/Next to Metropolitan County: ${uni.notAdjUrban}`, { permanent: false, direction: "top", offset: [0, -15], opacity: 0.9, className: "university-tooltip" } ) .addTo(map); // Add hover effects for university markers circleMarker.on({ mouseover: function (e) { e.target.setStyle({ radius: 7, weight: 2 }); }, mouseout: function (e) { e.target.setStyle({ radius: 5, weight: 1 }); } }); // Add label above the circle marker const coords = [uni.lat, uni.lng]; const universityText = uni.name; // Estimate label width based on text length (approximate) const labelWidth = universityText.length * 8; // Rough estimate: 8px per character const labelHeight = 14; // Approximate height including padding const label = L.marker(coords, { icon: L.divIcon({ className: "university-label", html: `

${universityText}

`, iconSize: [labelWidth, labelHeight], iconAnchor: [labelWidth / 2, labelHeight + 10] // Center horizontally, position above circle }) }).addTo(map); }); // Add custom CSS for tooltips const style = document.createElement("style"); style.textContent = ` .county-tooltip { background-color: rgba(255, 255, 255, 0.95); border: 2px solid #666; border-radius: 4px; font-size: 12px; font-weight: normal; padding: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .university-tooltip { background-color: rgba(255, 255, 255, 0.95); border: 2px solid #333; border-radius: 4px; font-size: 12px; font-weight: normal; padding: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .leaflet-tooltip-top:before { border-top-color: #666; } .university-tooltip.leaflet-tooltip-top:before { border-top-color: #333; } `; document.head.appendChild(style); // Force map to invalidate size and redraw after everything is loaded setTimeout(() => { map.invalidateSize(); map._onResize(); // Force internal resize handling }, 100); }, 10); // Small delay to ensure container is in DOM return container; }