2f:T9f3,map = { const map = (container.value = new maplibregl.Map({ container, zoom: 5.5, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", scrollZoom: false, center: [-69, 45] })); map.on("load", function () { map.addSource("state_outline", { type: "geojson", data: state_outline }); map.addSource("senate_districts", { type: "geojson", data: senate_districts }); map.addSource("house_districts", { type: "geojson", data: house_districts }); map.addLayer({ id: "state_outline", type: "fill", source: "state_outline", layout: {}, paint: { "fill-color": "#000", "fill-opacity": 0.2 } }); map.addLayer({ id: "senate_districts_outlines", type: "line", source: "senate_districts", layout: {}, paint: { "line-color": [ "match", ["get", "party"], "D", "#00f", "R", "#f00", "#0ff" ] } }); map.addLayer({ id: "house_districts_outlines", type: "line", source: "house_districts", layout: {}, paint: { "line-color": [ "match", ["get", "party"], "D", "#00f", "R", "#f00", "#0ff" ] } }); }); // Create a popup, but don't add it to the map yet. const popup = new maplibregl.Popup({ closeButton: false, closeOnClick: true }); map.on("mouseclick", "house_districts_outlines", (e) => { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = "pointer"; const coordinates = e.features[0].geometry.coordinates.slice(); const name = e.features[0].properties.name; const party = e.features[0].properties.party; const district = e.features[0].properties.district; const description = htl.html`{name} ({party}-{district})`; console.log(description); // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(e.lngLat).setHTML(description).addTo(map); }); invalidation.then(() => map.remove()); return map; }30:[{"id":"68fc60194504aebd28fb470aa04e5f1fc8df8f61ce5b920454bacc6bb0087b5e82da6999bf9a4765a03e24cfffdc8eea0b23ab4d863f2b73d3585c35491912aa","href":"https://static.observableusercontent.com/files/68fc60194504aebd28fb470aa04e5f1fc8df8f61ce5b920454bacc6bb0087b5e82da6999bf9a4765a03e24cfffdc8eea0b23ab4d863f2b73d3585c35491912aa","name":"132_committees_openstates.csv","type":"text/csv","lastModified":1734202217966.564,"size":175659}] 2d:{"title":"Maine 132nd Legislative Committees","cells":[{"id":0,"value":"# Maine 132nd Legislative Committees","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"viewof selected_committee = Inputs.select(\n [\"All\", ...new Set(committees_openstates.map((d) => d.committee))],\n { label: \"Select one\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"// container div in separate cell to dodge circular dependency issues\ncontainer = html`\n

\n Loading...\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"selected_legislators","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"// Apply a filter to the heatmap layer whenever the compass directions change\nfilter = {\n // don't attempt to apply filter unless layer is actually loaded\n if (map.isStyleLoaded()) {\n map.setFilter(\"senate_districts_outlines\", [\n \"in\",\n [\"get\", \"DISTRICTN\"],\n [\n \"literal\",\n selected_legislators\n .filter((d) => d.current_chamber == \"upper\")\n .map((d) => d.current_district)\n ]\n ]);\n map.setFilter(\"house_districts_outlines\", [\n \"in\",\n [\"get\", \"DISTRICTN\"],\n [\n \"literal\",\n selected_legislators\n .filter((d) => d.current_chamber == \"lower\")\n .map((d) => d.current_district)\n ]\n ]);\n } else {\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"senate_districts = {\n let boundaries = await d3.json(\n \"https://services1.arcgis.com/RbMX0mRVOFNTdLzd/arcgis/rest/services/MaineVotingDistricts2021StateSenate/FeatureServer/2/query?outFields=*&where=1%3D1&f=geojson\"\n );\n\n boundaries.features = boundaries.features.map((feature) => {\n // Find the matching legislator for this district\n const matchingLegislator = committees_openstates.find(\n (leg) =>\n leg.current_chamber == \"lower\" &&\n leg.current_district == feature.properties.DISTRICTN\n );\n\n // Spread existing feature properties and add legislator properties\n return {\n ...feature,\n properties: {\n ...feature.properties,\n ...(matchingLegislator || {}) // Add legislator properties if found\n }\n };\n });\n return boundaries;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"house_districts = {\n let boundaries = await d3.json(\n \"https://services1.arcgis.com/RbMX0mRVOFNTdLzd/arcgis/rest/services/MaineVotingDistricts2021House/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson\"\n );\n boundaries.features = boundaries.features.map((feature) => {\n // Find the matching legislator for this district\n const matchingLegislator = committees_openstates.find(\n (leg) =>\n leg.current_chamber == \"lower\" &&\n leg.current_district == feature.properties.DISTRICTN\n );\n\n // Spread existing feature properties and add legislator properties\n return {\n ...feature,\n properties: {\n ...feature.properties,\n ...(matchingLegislator || {}) // Add legislator properties if found\n }\n };\n });\n return boundaries;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"state_outline = d3.json(\n \"https://services1.arcgis.com/RbMX0mRVOFNTdLzd/arcgis/rest/services/Maine_State_Boundary_Polygon/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"selected_legislators = selected_committee == \"All\"\n ? committees_openstates\n : committees_openstates.filter((d) => d.committee == selected_committee)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"committees_openstates = await FileAttachment(\"132_committees_openstates.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"maplibregl = require(\"maplibre-gl@2.1.9\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}