map = { // const container = yield htl.html`

`; const map = L.map(DOM.element("div", { style: "height: 800px" })).setView( [31.9686, -99.9018], 6 ); // CartoDB Positron (Light, clean style) // L.tileLayer( // "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", // { // attribution: "© OpenStreetMap contributors © CARTO" // } // ).addTo(map); // Esri World Street Map // L.tileLayer( // "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}", // { // attribution: "Tiles © Esri" // } // ).addTo(map); // CartoDB Voyager (Colorful, good for data viz) L.tileLayer( "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png", { attribution: "© OpenStreetMap contributors © CARTO" } ).addTo(map); // Color mapping for System values const systemColors = { "Public Independent": "#6a51a3", TAMUS: "#500000", TSUS: "#8e7449", TTUS: "#CC0000", TWU: "#E3D353", UHS: "#888b8d", UNTS: "#00853E", UTS: "#F47920" }; // 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 `${Math.round(decimal * 100)}%`; }; 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); }; L.geoJSON(universities, { filter: function (feature) { // Only show universities with RPU === '1' return feature.properties.rpu === "1"; }, pointToLayer: function (feature, latlng) { const systemValue = feature.properties.System; const fillColor = systemColors[systemValue] || "#808080"; // Safely access the rpu property const rpuValue = feature.properties.rpu; return L.circleMarker(latlng, { radius: 8, fillColor: fillColor, //rpuValue === "1" ? "#d73027" : "#2166ac", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 }); }, onEachFeature: function (feature, layer) { // Use in popup layer.bindPopup(` ${feature.properties.name}
System: ${feature.properties.System}
County: ${feature.properties.countyname}
Enrollment (Fall 2024): ${formatNumberWithCommas( feature.properties.enrollment )}
Percent Pell: ${formatPercentage( feature.properties.perc_pell )}
Percent Latino: ${formatPercentage( feature.properties.perc_latino )}
Percent Black: ${formatPercentage( feature.properties.perc_black )}
First-Year Retention Rate (2024): ${formatPercentage( feature.properties.persrate )}
6-Year Graduation Rate (2024): ${formatPercentage( feature.properties.gradrate )}
Rural Serving Index (RSI): ${feature.properties.rsi} `); // New hover tooltip layer.bindTooltip( ` ${feature.properties.name}
System: ${feature.properties.System}
County: ${feature.properties.countyname}
Enrollment (Fall 2024): ${formatNumberWithCommas( feature.properties.enrollment )}
Percent Pell: ${formatPercentage( feature.properties.perc_pell )}
Percent Latino: ${formatPercentage( feature.properties.perc_latino )}
Percent Black: ${formatPercentage( feature.properties.perc_black )}
First-Year Retention Rate (2024): ${formatPercentage( feature.properties.persrate )}
6-Year Graduation Rate (2024): ${formatPercentage( feature.properties.gradrate )}
Rural Serving Index (RSI): ${feature.properties.rsi} `, { permanent: false, direction: "top", offset: [0, -10], opacity: 0.9, className: "custom-tooltip" } ); //County's Pct Rural: ${formatPercentage(feature.properties.county_pct_rural)}
//State Appropriations: ${formatCurrency(feature.properties.approps_state)} // Add label above the circle marker const coords = layer.getLatLng(); const universityText = feature.properties.University; // 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); } }).addTo(map); return map.getContainer(); }