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 container for the map, legend, header, and footer const container = DOM.element("div", { style: `display: flex; flex-direction: column; align-items: center;` }); // Create header const header = DOM.element("div", { style: `margin-bottom: 10px; text-align: center; font-weight: bold; font-size: 20px;` }); header.textContent = "Here's where you can drop-off items for recycling in Houston"; container.appendChild(header); // Add chatter below the header const chatter = DOM.element("div", { style: `margin-bottom: 10px; text-align: center; font-size: 14px; max-width: 600px;` }); chatter.innerHTML = `For more information on what items are accepted at each type of location, click here.`; container.appendChild(chatter); // Create legend const legend = DOM.element("div", { style: ` margin-bottom: 10px; text-align: center; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; ` }); legend.innerHTML = `

Environmental service (hazardous waste)

Neighborhood depository

Recycling centers

`; container.appendChild(legend); // Create map container const mapContainer = DOM.element("div", { style: `width: 100%; height: 500px;` }); container.appendChild(mapContainer); // Create footer const footer = DOM.element("div", { style: `margin-top: 10px; text-align: left; font-size: 14px; line-height: 1.5; width: 100%;` }); footer.innerHTML = "Source: Houston Solid Waste Management Department
Map: José Luis Martínez/Houston Landing"; container.appendChild(footer); yield container; const map = L.map(mapContainer).setView([29.8, -95.38], 9.5); map.attributionControl.setPrefix(""); const tiles = L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", { attribution: '© OpenStreetMap contributors' } ).addTo(map); const getColor = (type) => { switch (type) { case "Environmental Service Centers": return "blue"; case "Neighborhood Depository": return "green"; case "Recycling Centers": return "orange"; default: return "gray"; // Default color for unexpected types } }; data.forEach((d) => { const marker = L.circleMarker([d.lat, d.lon], { radius: 8, color: getColor(d["Type of Center"]), fillOpacity: 0.7 }).addTo(map); const popupContent = `

${d["Type of Center"]}
${d.Address}

`; marker.bindTooltip(popupContent); }); return container; }