29:null 2a:["$","title",null,{"children":"Mapping Stockholm meetup locations using Leaflet | Patrick Wojda | Observable"}] 2f:T9c3,{ const height = 500; // initialize map const mapDiv = htl.html`

`; const stockholm = [59.334591, 18.06324]; const map = L.map(mapDiv).setView(stockholm, 12); L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap' }).addTo(map); // get marker size scale const countMax = d3.max(meetuplocation_stockholm, (d) => d.count); const rScale = d3.scaleSqrt([0, countMax]).range([0.1, 5]); // create markers const markers = meetuplocation_stockholm.map((d) => L.circleMarker([d.lat, d.lng], { radius: rScale(d.count), color: "#222", fillColor: "#5D3FD3", fillOpacity: 0.5, weight: 1 }) .bindTooltip(`${d.name}
${d.address}
${d.count} events`, { direction: "top" // Adjust the direction as needed }) .on("click", (e) => map.setView(e.target.getLatLng(), 16)) ); // zoom map to fit all markers const features = L.featureGroup(markers).addTo(map); map.fitBounds(features.getBounds()); // create container div and add table const containerDiv = htl.html`

${mapDiv}

`; // on pan, zoom and load filter all locations based on map extent const handleEvent = () => { const markersInView = meetuplocation_stockholm.filter((d) => { const latlng = L.latLng(d.lat, d.lng); return map.getBounds().contains(latlng); }); const transformedMarkersInView = markersInView.map((d) => ({ name: d.name, address: d.address, event_count: d.count })); const table = Inputs.table(transformedMarkersInView, { maxWidth: 400, rows: 100, height: height, format: { event_count: sparkbar( d3.max(transformedMarkersInView, (d) => d.event_count) ) }, header: { event_count: "#events" } }); if (containerDiv.lastElementChild.nodeName === "FORM") { containerDiv.lastElementChild.remove(); } containerDiv.append(table); containerDiv.value = transformedMarkersInView; containerDiv.dispatchEvent(new CustomEvent("input")); }; // register events map.on("load", handleEvent); map.on("zoomend", handleEvent); map.on("moveend", handleEvent); map.on("resize", () => { map.invalidateSize(); map.fitBounds(features.getBounds(), true); }); return containerDiv; }30:[{"id":"37087865e63a2e0f88ee9d73488c6044159aa7c1dfd7a17b7359705f5c07f461e17502a823c373706c488224fc1bd99130d9fe40dae8bfcf8ff6162367e2e7f4","href":"https://static.observableusercontent.com/files/37087865e63a2e0f88ee9d73488c6044159aa7c1dfd7a17b7359705f5c07f461e17502a823c373706c488224fc1bd99130d9fe40dae8bfcf8ff6162367e2e7f4","name":"meetuplocation_stockholm@1.json","type":"application/json","lastModified":1710769938150.463,"size":233367}] 2d:{"id":"855d634efbef9157","slug":null,"title":"Mapping Stockholm meetup locations using Leaflet","thumbnail":"ef756288ce21fef18e6d89fe8b44c7f9ffc6a6e0075a0aca766152892fbb371f","access_level":"public","create_time":"$D2024-03-18T13:46:18.523Z","update_time":"$D2024-03-20T07:58:20.439Z","view_time":null,"first_public_time":"$D2024-03-19T16:59:27.678Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"02bf290f098d5a95","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":"starter_2024"},"version":357,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null}],"members":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null,"role":"editor"},{"type":"team","id":"02bf290f098d5a95","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Mapping Stockholm meetup locations using Leaflet","cells":[{"id":0,"value":"# Mapping Stockholm meetup locations using Leaflet\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":125,"value":"I couldn't find a place to host a meetup so I downloaded all (?) past Stockholm meetup events from the Meetup graphQL API and created an interactive map with the results.\n\nPanning and zooming in the map updates the table.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":50,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"## Component","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":199,"value":"function sparkbar(max) {\n return (x) => htl.html`

${x.toLocaleString(\"en\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":136,"value":"meetuplocation_stockholm = {\n const result = await FileAttachment(\"meetuplocation_stockholm@1.json\").json();\n\n // get venues from result\n const venues = result.data.keywordSearch.edges.map((d) => {\n // fix wrong geo-coding\n if (\n d.node.result.venue &&\n d.node.result.venue.name === \"espresso house götgatan 15\"\n ) {\n return { ...d.node.result.venue, lat: 59.318159, lng: 18.0689196 };\n }\n\n return d.node.result.venue;\n });\n\n // group and count\n const locationMap = new Map();\n venues.forEach((d) => {\n if (!d) {\n return;\n }\n\n if (locationMap.has(d.address)) {\n const loc = locationMap.get(d.address);\n loc.count = loc.count + 1;\n locationMap.set(d.address, loc);\n } else {\n const loc = { ...d, count: 1 };\n locationMap.set(d.address, loc);\n }\n });\n\n return Array.from(locationMap.values()).sort((a, b) =>\n a.count > b.count ? -1 : 1\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"meetuplocation_stockholm1 = FileAttachment(\n \"meetuplocation_stockholm@1.json\"\n).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"meetuplocation_stockholm1.data.keywordSearch.edges.map((d) => d.node.result)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"