map = { const container = document.createElement("div"); container.style.width = "100%"; container.style.height = "600px"; container.style.position = "relative"; // Load MapLibre CSS if (!document.querySelector("#maplibre-css")) { const link = document.createElement("link"); link.id = "maplibre-css"; link.rel = "stylesheet"; link.href = "https://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.css"; document.head.appendChild(link); } // Convert reports to GeoJSON const reportsGeoJSON = { type: "FeatureCollection", features: dataWithPetroleum.map(d => ({ type: "Feature", geometry: { type: "Point", coordinates: [ +d.longitude, +d.latitude ] }, properties: { petroleumRelated: d.petroleumRelated, description: d.description ?? "", comments: d.comments ?? "", date: d.date ?? "", // Change this field name if your CSV uses a different name compass: d.compass ?? "" } })) }; // Create MapLibre map const map = new MapLibreMap({ container: container, style: "https://tiles.openfreemap.org/styles/liberty", center: [-70.2553, 43.6591], zoom: 11 }); map.on("load", () => { // Add report data map.addSource("reports", { type: "geojson", data: reportsGeoJSON }); // Add report points map.addLayer({ id: "reports", type: "circle", source: "reports", paint: { "circle-radius": 5, "circle-color": [ "case", ["==", ["get", "petroleumRelated"], true], "#d97706", "#888888" ], "circle-opacity": 0.65, "circle-stroke-color": "#ffffff", "circle-stroke-width": 1 } }); // Change cursor when hovering over reports map.on("mouseenter", "reports", () => { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "reports", () => { map.getCanvas().style.cursor = ""; }); // Show popup when a report is clicked map.on("click", "reports", event => { const feature = event.features?.[0]; if (!feature) return; const properties = feature.properties; const type = properties.petroleumRelated === true || properties.petroleumRelated === "true" ? "Petroleum-related" : "Other"; const description = properties.description || "No description provided."; const comments = properties.comments || ""; const compass = properties.compass || "Not available"; const popupHTML = `

${type} odor report

Date: ${properties.date || "Unknown"}

Wind direction: ${compass}

Description:
${description}

${ comments ? `

Comments:
${comments}

` : "" }

`; new Popup({ closeButton: true, closeOnClick: true, maxWidth: "320px" }) .setLngLat(event.lngLat) .setHTML(popupHTML) .addTo(map); }); }); // LEGEND const legend = document.createElement("div"); legend.style.position = "absolute"; legend.style.top = "10px"; legend.style.right = "10px"; legend.style.background = "white"; legend.style.padding = "10px 12px"; legend.style.borderRadius = "4px"; legend.style.boxShadow = "0 1px 4px rgba(0,0,0,0.2)"; legend.style.fontFamily = "sans-serif"; legend.style.fontSize = "13px"; legend.style.zIndex = "1"; legend.innerHTML = ` Report Type

Petroleum-related

Other

`; container.appendChild(legend); return container; }