2f:T739,viewof map = { // let map = this; const container = html`

`; yield container; const map = (container.value = new mapboxgl.Map({ container, style: "mapbox://styles/hakai/cl5h7l9ak000016ppdqkqz3gg", center: [-126, 49.5], zoom: 1 })); map.on("load", function () { map.addControl(new mapboxgl.NavigationControl()); map.on("click", "stories", (e) => { const coordinates = e.features[0].geometry.coordinates.slice(); const props = e.features[0].properties; // console.log(props.acf.word_count_override); const { link, date, name, deck, wordCount } = props; // let record = datageo.find((d) => d.id === e.features[0].id); console.log(wordCount); const dateToShow = new Date(date).toLocaleString(undefined, { year: "numeric", month: "short", day: "numeric" }); // const wordCount = record.properties.acf.word_count_override; new mapboxgl.Popup() .setLngLat(coordinates) .setHTML( `

${ '' + name + "" }

${wordCount ? dateToShow + " | " + wordCount : dateToShow}

${deck}

` ) .addTo(map); }); map.on("mouseenter", "stories", () => { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "stories", () => { map.getCanvas().style.cursor = ""; }); }); invalidation.then(() => map.remove()); // Wait until the map loads, then yield the container again. yield new Promise((resolve) => { if (map.loaded()) resolve(map); else map.on("load", () => resolve(map)); }); yield container; }30:T53e,// function paginated_fetch( // url = is_required("url"), // Improvised required argument in JS // page = 1, // previousResponse = [] // // response // ) { // return fetch(`${url}&page=${page}`) // Append the page number to the base URL // .then((response) => { // // console.log(response.ok); // if (!response.ok) { // // create error object and reject if not a 2xx response code // let err = new Error("HTTP status code: " + response.status); // err.response = response; // err.status = response.status; // throw err; // } else { // // console.log(response.ok); // return response.json(); // } // }) // .then((newResponse) => { // // console.log("hre", newResponse); // // if (newResponse.data === undefined) { // // console.log(newResponse.data === undefined); // const response = [...previousResponse, ...newResponse]; // Combine the two arrays // // console.log(newResponse.length); // if (newResponse.length === 100) { // // < 100 means the end of items, so don't make another call // page++; // return paginated_fetch(url, page, response); // } // // } // // console.log(response); // return response; // // return response; // }); // }31:T58c,html``32:[] 2d:{"title":"Hakai Magazine Story Locations","cells":[{"id":0,"value":"# Hakai Magazine Story Locations","pinned":false,"hidden":false,"mode":"md"},{"id":450,"value":"viewof search = Inputs.search(dataFilt, { placeholder: \"Search a topic\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"Use the magazine stylesheet","pinned":false,"hidden":false,"mode":"md"},{"id":677,"value":"style = html`\n\n\n\n\n\n\n\n\n\n\n\n`\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"radius = 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"padding = 1.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"md`Articles returned by seach`","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"viewof rows = Inputs.table(search)","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"datageo","pinned":true,"hidden":false,"mode":"ojs"},{"id":557,"value":"updateMapbox = {\n // This allows us to update the map with data without re-rendering the whole cell\n // There is a bit of weirdness around adding and removing the layer to make sure mapbox rerenders\n let fc = {\n type: \"FeatureCollection\",\n features: datageo\n };\n if (map._loaded) {\n if (!map.getSource(\"stories\")) {\n map.addSource(\"stories\", {\n type: \"geojson\",\n data: fc\n });\n } else {\n // console.log(\"setting source\")\n map.getSource(\"stories\").setData(fc);\n }\n if (map.getLayer(hexbinLayer.id)) {\n map.removeLayer(hexbinLayer.id);\n }\n // console.log(\"adding layer\")\n map.addLayer(hexbinLayer);\n // map.flyTo(projection.invert([100,1000]))\n // console.log(\"flying\")\n // }\n return true;\n }\n return false;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"hexbinLayer = {\n return {\n id: \"stories\",\n type: \"circle\",\n source: \"stories\",\n paint: {\n \"circle-radius\": [\n \"interpolate\",\n [\"linear\"],\n [\"number\", [\"get\", \"Casualty\"]],\n 0,\n 4,\n 5,\n 24\n ],\n \"circle-color\": [\"get\", \"color\"],\n \"circle-opacity\": 0.8\n }\n // filter: ['all', filterHour, filterDay]\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"// import { is_required } from \"@xari/is_required\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"// data1 = {\n// const out = [];\n// return rawdata.map((d) => {\n// const country = d.acf.geolocation ? d.acf.geolocation.country : \"\";\n// const state = d.acf.geolocation ? d.acf.geolocation.state : \"\";\n// const wc = d.acf.word_count_override ? d.acf.word_count_override : \"\";\n// return {\n// deck: d.acf.deck,\n// name: d.title.rendered,\n// country: country,\n// state: state,\n// wordCount: wc,\n// ...d\n// };\n// });\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"data = d3.csv(\n \"https://raw.githubusercontent.com/HakaiInstitute/magazine-visualizations/main/list.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"// rawdata[100].acf","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"// rawdata = [...rawdataF, ...rawdataNews, ...rawdataVV, ...rawdataAS]","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"// rawdataF = paginated_fetch(\n// `https://hakaimagazine.com/wp-json/wp/v2/features?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group,link,acf.word_count_override&per_page=100`\n// )","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"// rawdataNews = paginated_fetch(\n// `https://hakaimagazine.com/wp-json/wp/v2/news?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group,link,acf.word_count_override&per_page=100`\n// )","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"// rawdataVV = paginated_fetch(\n// `https://hakaimagazine.com/wp-json/wp/v2/videos-visuals?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group,link,acf.word_count_override&per_page=100`\n// )","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"// rawdataAS = paginated_fetch(\n// `https://hakaimagazine.com/wp-json/wp/v2/article-short?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group,link,acf.word_count_override&per_page=100`\n// )","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"// getData()","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"// function getData() {\n// const rawdataAS = paginated_fetch(\n// `https://hakaimagazine.com/wp-json/wp/v2/article-short?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group&per_page=100`\n// );\n// return rawdataAS;\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"// Generators.queue(worker(getData()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"// worker`return ${paginated_fetch(\n// `https://hakaimagazine.com/wp-json/wp/v2/article-short?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group&per_page=100`\n// )}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"// rawdata[0].title","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"dataFilt = data.filter((d) => d.lat != null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":657,"value":"search[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"datageo = search.map((d, i) => {\n let sel = {};\n\n if (d.lat != null) {\n return {\n id: i,\n properties: {\n ...d,\n // stroke: d.lat == sel.lat && d.lng == sel.lng ? 2 : 0,\n color: \"#C46328\",\n // d.collected === true ? (d.total > 0 ? \"#5ec962\" : \"#fde725\") : \"grey\",\n opacity: 0.89\n },\n geometry: {\n type: \"Point\",\n coordinates: [d.lng, d.lat]\n },\n type: \"Feature\"\n };\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":675,"value":"// list2 = FileAttachment(\"list@5.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiaGFrYWkiLCJhIjoiY20wbXh4emprMDc3cjJrcTI5czI3cXRjbCJ9.XNfWqelIzmfMTVRJlc7nIg\";\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"// import { worker } from \"@fil/worker\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}