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

const container = yield htl.html`

`; // Wait for container to be fully rendered await new Promise((resolve) => setTimeout(resolve, 100)); // const map = L.map(container, { zoomSnap: 0.5 }); const map = L.map(container, { zoomSnap: 0.5, preferCanvas: false // Better performance }); // EXPLICITLY configure pane z-indexes map.createPane("tilePane").style.zIndex = 200; map.createPane("overlayPane").style.zIndex = 400; map.attributionControl.setPrefix( 'Leaflet' ); // map.fitBounds([ // [25.8, -106.7], // [36.5, -93.5] // ]); // Add tiles to the tilePane L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors", maxZoom: 19, pane: "tilePane" }).addTo(map); const colorScale = { Rural: "#762a83", "Small town core": "#c2a5cf", "Micro core": "#a6dba0", "Metro core": "#1b7837", Water: "#f7f7f7" }; // Store original bounds for reset const originalBounds = L.geoJSON(ruca_data).getBounds(); // Define the order of urban core types for the filter const urbanCoreOptions = [ "Rural", "Small town core", "Micro core", "Metro core" ]; // Store original bounds for reset // const originalBounds = L.geoJSON(ruca_data).getBounds(); // Track current filter selections (start with all selected) let selectedUrbanCoreTypes = new Set(urbanCoreOptions); function style(feature) { return { fillColor: colorScale[feature.properties.urban_core_type] || "#999999", weight: 1, opacity: 1, color: "white", fillOpacity: 0.7 }; } function highlightFeature(e) { const layer = e.target; layer.setStyle({ weight: 3, color: "#666", fillOpacity: 0.9 }); layer.bringToFront(); } function resetHighlight(e) { geojsonLayer.resetStyle(e.target); } function onEachFeature(feature, layer) { const props = feature.properties; layer.bindTooltip( ` ${props.tract_name20}
${props.urban_core_type} `, { sticky: true } ); layer.bindPopup(`

${props.tract_name20}

County:	${props.county_name23}
Type:	${props.urban_core_type}
Population 25 and Older:	${( props.total_pop_25plusE ?? 0 ).toLocaleString()}
Some College, No Bachelors:	${( props.some_college_no_bachelors ?? 0 ).toLocaleString()}

`); layer.on({ mouseover: highlightFeature, mouseout: resetHighlight }); } // Filter function - checks if type is in the selected set function filterByUrbanCore(feature) { const type = feature.properties.urban_core_type; // Always show Water, filter others based on selection if (type === "Water") return true; return selectedUrbanCoreTypes.has(type); } console.log("ruca_data available?", typeof ruca_data !== "undefined"); console.log("ruca_data feature count:", ruca_data?.features?.length || 0); // // Add tiles FIRST // L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { // attribution: // "© OpenStreetMap contributors", // maxZoom: 19 // }).addTo(map); // Create the GeoJSON layer // let geojsonLayer = L.geoJSON(ruca_data, { // style: style, // onEachFeature: onEachFeature, // filter: filterByUrbanCore // }).addTo(map); // console.log( // "GeoJSON layer created with", // geojsonLayer.getLayers().length, // "features" // ); // // FIT BOUNDS AFTER LAYER IS ADDED // map.fitBounds(originalBounds, { maxZoom: 9 }); // Create GeoJSON with explicit pane and enhanced styling let geojsonLayer = L.geoJSON(ruca_data, { style: function (feature) { return { fillColor: colorScale[feature.properties.urban_core_type] || "#999999", weight: 2, // Increased from 1 opacity: 1, color: "white", fillOpacity: 0.85 // Increased from 0.7 }; }, onEachFeature: onEachFeature, filter: filterByUrbanCore, pane: "overlayPane" }).addTo(map); console.log( "GeoJSON added to overlayPane with", geojsonLayer.getLayers().length, "features" ); // Fit bounds after everything is added map.fitBounds(originalBounds, { maxZoom: 9 }); // Force invalidation after a delay to ensure rendering setTimeout(() => { map.invalidateSize(); geojsonLayer.bringToFront(); // Force GeoJSON to top console.log("Layer brought to front"); }, 200); // Function to update the layer with new filter function updateLayer() { map.removeLayer(geojsonLayer); geojsonLayer = L.geoJSON(ruca_data, { style: style, onEachFeature: onEachFeature, filter: filterByUrbanCore }).addTo(map); } // Add Urban Core Type Filter Control with Checkboxes const filterControl = L.control({ position: "topright" }); filterControl.onAdd = function (map) { const div = L.DomUtil.create("div", "filter-control"); div.style.cssText = ` background: white; padding: 10px 14px; border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,0.2); font-size: 12px; `; let checkboxHtml = ` Rural-Urban Commuting Area

`; for (const type of urbanCoreOptions) { const color = colorScale[type]; checkboxHtml += ` ${type} `; } checkboxHtml += `

`; div.innerHTML = checkboxHtml; // Prevent map interactions when using the checkboxes L.DomEvent.disableClickPropagation(div); L.DomEvent.disableScrollPropagation(div); return div; }; filterControl.addTo(map); // Add Reset Button Control const resetControl = L.control({ position: "topleft" }); resetControl.onAdd = function (map) { const div = L.DomUtil.create("div", "reset-control"); div.innerHTML = ` `; L.DomEvent.disableClickPropagation(div); return div; }; resetControl.addTo(map); // Add event listeners after controls are added to the map setTimeout(() => { // Checkbox change events const checkboxes = document.querySelectorAll(".urban-core-checkbox"); checkboxes.forEach((checkbox) => { checkbox.addEventListener("change", function (e) { if (e.target.checked) { selectedUrbanCoreTypes.add(e.target.value); } else { selectedUrbanCoreTypes.delete(e.target.value); } updateLayer(); }); }); // Select All button document .getElementById("select-all-btn") .addEventListener("click", function () { checkboxes.forEach((checkbox) => { checkbox.checked = true; selectedUrbanCoreTypes.add(checkbox.value); }); updateLayer(); }); // Clear All button document .getElementById("clear-all-btn") .addEventListener("click", function () { checkboxes.forEach((checkbox) => { checkbox.checked = false; selectedUrbanCoreTypes.delete(checkbox.value); }); updateLayer(); }); // Reset button click event document.getElementById("reset-btn").addEventListener("click", function () { // Reset all checkboxes to checked checkboxes.forEach((checkbox) => { checkbox.checked = true; selectedUrbanCoreTypes.add(checkbox.value); }); updateLayer(); // Reset map bounds map.fitBounds(originalBounds, { maxZoom: 9 }); }); }, 0); map.fitBounds(originalBounds, { maxZoom: 9 }); // L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { // attribution: // "© OpenStreetMap contributors" // }).addTo(map); // WITH THIS: // L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { // attribution: // "© OpenStreetMap contributors", // maxZoom: 19, // errorTileUrl: // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" // }) // .on("tileerror", function (error, tile) { // console.error("Tile loading error:", error); // console.error("Failed tile:", tile); // }) // .on("tileload", function () { // console.log("Tile loaded successfully"); // }) // .addTo(map); // Also add map size invalidation after a delay setTimeout(() => { map.invalidateSize(); console.log("Map size invalidated"); }, 100); }