leaflet = { { // Import Leaflet Geocoder JS and CSS const leafletGeocoderJS = await import("https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"); const leafletGeocoderCSS = document.createElement("link"); leafletGeocoderCSS.href = "https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"; leafletGeocoderCSS.rel = "stylesheet"; document.head.appendChild(leafletGeocoderCSS); } { const link = document.createElement("link"); link.href = resolve("leaflet@1.2.0/dist/leaflet.css"); link.rel = "stylesheet"; document.head.appendChild(link); } // Create the root container for the map and legend const root = DOM.element("div", { style: `width:${width || 800}px;` }); // Create a legend div const legend = document.createElement("div"); legend.style = ` display: flex; flex-direction: column; align-items: center; background: white; padding: 10px; border-radius: 5px; font-size: 14px; width: 300px; margin: 10px auto; text-align: center; `; // Gradient bar (reversed) const gradientBar = document.createElement("div"); gradientBar.style = ` width: 100%; height: 20px; background: linear-gradient(to right, #7F1E1E 0%, /* -850 (darkest) */ #A93229 15%, #D34D34 30%, #F56A43 45%, #F9845F 60%, #FBA682 75%, #FDCFB5 90%, #FEECE1 100%); /* -100 (lightest) */ border: 1px solid black; `; // Label row const labelRow = document.createElement("div"); labelRow.style = ` display: flex; justify-content: space-between; width: 100%; margin-top: 5px; font-size: 12px; `; // Define min/max labels (reversed order) labelRow.innerHTML = ` -850 -700 -500 -300 -100 `; // Add title legend.innerHTML = `Change in enrollment`; // Append gradient and labels legend.appendChild(gradientBar); legend.appendChild(labelRow); // Append legend to root container root.appendChild(legend); // Create the map container const mapContainer = DOM.element("div", { style: `width:100%; height:${(width || 800) / 1.6}px` }); root.appendChild(mapContainer); yield root; // Establish the map's center view and zoom level. const map = L.map(mapContainer).setView([29.6883, -95.5898], 10); // Remove the default Leaflet attribution prefix map.attributionControl.setPrefix(''); // Add tiles from the CARTO tile server as a base layer. const tiles = L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", { attribution: '© OpenStreetMap contributors' } ).addTo(map); function getColor(value) { return value > -100 ? '#FEECE1' : value > -200 ? '#FDCFB5' : value > -300 ? '#FBA682' : value > -400 ? '#F9845F' : value > -500 ? '#F56A43' : value > -700 ? '#D34D34' : value > -850 ? '#A93229' : '#7F1E1E'; } // Define the style function to color each feature based on the valueColumn const style = (feature) => { const value = feature.properties[valueColumn]; if (value == null || isNaN(value)) { return { fillColor: "#ccc", weight: 1, opacity: 1, color: "#000", fillOpacity: 0.7 }; } return { fillColor: getColor(value), weight: 1, opacity: 1, color: "#000", fillOpacity: 0.7 }; }; // Add the GeoJSON layer to the map, applying the style function to each object. const geoJsonLayer = L.geoJson(hcc_zips, { style, onEachFeature: (feature, layer) => { const value = feature.properties[valueColumn]; const name = feature.properties[nameColumn]; layer.bindTooltip(`${name}
Enrollment: ${value} students`, { permanent: false, direction: 'top', opacity: 0.8 }); } }).addTo(map); invalidation.then(() => map.remove()); }