2b:null 2c:["$","title",null,{"children":"SP2024 Coral Bleaching Across The World (Mapbox GL) | Angie Hjort | Observable"}] 31:Tcfa,// Call this function to embed a MapboxGL map with the specified style. You can pass additional options. // See https://www.mapbox.com/mapbox-gl-js/api/#map for possible options. // Use 'viewof m = map(...)' to embed the map and get a reference to the MapboxGL Map instance function* mapboxMap() { // Options loaded at start // Height is height of both map and canvas const defaultOptions = { style: "mapbox://styles/nathan-svenska/clvk16y3e01e901queacmfk9y", //Check these default options for masking height: 650, scrollZoom: true, zoom: 1.7, minZoom: 1.7, center: [115, 0] }; // The container is the html element on the page that the js map is loaded into // Create and yield the container first so that the map can be attached to it const container = (defaultOptions.container = html`

`); yield container; // Create the MapboxGL Map object const map = new mapboxgl.Map(defaultOptions); map.addControl(new mapboxgl.NavigationControl(), "top-left"); // The container value is a promise that resolves to the map once it has fully loaded // This allows referencing cells to safely use the MapboxGL API. container.value = new Promise((resolve) => { map.on("load", () => { // Iterate through longLat objects, each object being an array: [Longitude, Latitude] // Each of these objects is defined as a "coord" // New array of objects is defined as "observations" map.addSource("observations", { type: "geojson", data: { type: "FeatureCollection", features: clean_data.map((row) => ({ type: "Feature", geometry: { type: "Point", coordinates: [row.Longitude, row.Latitude] }, properties: { color: row["Average color"], type: row["Coral type"], lightest: row["Lightest color code"], darkest: row["Darkest color code"], site: row["Site name"], group: row["Group name"], depth: row["Depth (m)"], condition: row["Light condition"], temp: row["Water temperature (C)"], date: row["Observation date"], year: row["Year"], species: row["Species"] } })) } }); // Visualizing data is done with layers - function defined below this cell // HEAT MAP LAYER: addHeatMap(map); // Listen for clicks / hovers (defined below) clickHoverListener(map); // Add color matrix image loadColorMatrix(map); }); }); const imgElement = document.createElement("img"); imgElement.style.position = "absolute"; imgElement.style.top = "10px"; // Adjust top positioning as needed imgElement.style.right = "10px"; // Adjust right positioning as needed imgElement.src = "https://i.imgur.com/3T5o4lJ.png"; // Replace 'your_image_id' with the ID of your image from Imgur imgElement.style.width = "240px"; // Scale width down by half imgElement.style.height = "auto"; // Maintain aspect ratio container.appendChild(imgElement); // Clean up the map on invalidation try { yield invalidation; } finally { map.remove(); } }32:T10ea,// function addHeatMap(map) { // map.addLayer( // { // id: "coral-point", // type: "circle", // source: "observations", // paint: { // // TO-DO: Color circle by average color of observations // "circle-color": [ // "interpolate", // ["linear"], // ["get", "color"], // 0, // "rgba(249,250,234,255)", // 1, // "rgba(243,245,193,255)", // 2, // "rgba(233,236,137,255)", // 3, // "rgba(199,207,58,255)", // 4, // "rgba(150,158,57,255)", // 5, // "rgba(91,116,52,255)" // ], // "circle-stroke-color": "white", // "circle-blur": ["interpolate", ["linear"], ["zoom"], 1, 1, 3, 0], // "circle-stroke-width": ["interpolate", ["linear"], ["zoom"], 4, 0, 7, 1], // "circle-radius": ["interpolate", ["linear"], ["zoom"], 1.5, 9, 15, 3], // } // }, // "waterway-label" // ); // var yearTest = ["==", ['to-number', ['get','year']], update]; // map.setFilter('coral-point', yearTest); // } function addHeatMap(map) { const weight = 3; map.addLayer( { id: "coral-heat", type: "heatmap", source: "observations", maxzoom: 9, paint: { // heatmap-intensity is a multiplier on top of heatmap-weight "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3], // Color ramp for heatmap. Domain is 0 (low) to 1 (high). // Begin color ramp at 0-stop with a 0-transparency color // to create a blur-like effect. // TO DO: Link this to coral color matrix // B: rgba(249,250,234,255) rgba(243,245,193,255) rgba(233,236,137,255) rgba(199,207,58,255) rgba(150,158,57,255) rgba(91,116,52,255) // C: rgba(249,238,235,255) rgba(247,202,192,255) rgba(242,157,136,255) rgba(209,91,58,255) rgba(155,49,32,255) rgba(101,26,13,255) // D rgba(248,238,225,255) rgba(249,220,191,255) rgba(240,189,135,255) rgba(212,148,79,255) rgba(151,89,36,255) rgba(106,57,22,255) // E: rgba(248,245,229,255) rgba(247,234,192,255) rgba(240,214,136,255) rgba(210,174,69,255) rgba(155,125,46,255) rgba(111,85,33,255) "heatmap-color": [ "interpolate", ["linear"], ["heatmap-density"], 0, "rgba(255,255,255,0)", // White 0.2, "rgb(152,251,152)", // Pale Green 0.4, "rgb(173,216,230)", // Light Blue 0.6, "rgb(0,255,255)", // Cyan 0.8, "rgb(70,130,180)", // Steel Blue 1, "rgb(0,128,128)" // Teal ], // Adjust the heatmap radius by zoom level "heatmap-radius": [ "interpolate", ["linear"], ["zoom"], 0, 2 * weight, 9, 20 * weight ], // Transition from heatmap to circle layer by zoom level "heatmap-opacity": ["interpolate", ["linear"], ["zoom"], 3, 1, 6, 0] } }, "waterway-label" ); map.addLayer( { id: "coral-point", type: "circle", source: "observations", minzoom: 3, paint: { // TO-DO: Color circle by average color of observations "circle-color": [ "interpolate", ["linear"], ["get", "color"], 0, "rgba(249,250,234,255)", 1, "rgba(243,245,193,255)", 2, "rgba(233,236,137,255)", 3, "rgba(199,207,58,255)", 4, "rgba(150,158,57,255)", 5, "rgba(91,116,52,255)" ], "circle-stroke-color": "white", "circle-stroke-width": 1, // Transition from heatmap to circle layer by zoom level "circle-opacity": ["interpolate", ["linear"], ["zoom"], 3, 0, 5, 1] } }, "waterway-label" ); var yearTest = ["==", ['to-number', ['get','year']], update]; map.setFilter('coral-point', yearTest); map.setFilter('coral-heat', yearTest); }33:T597,// This is called once in code, but map.on continuously checks for updates when the map is loaded, acts as a "Listener" function clickHoverListener(map) { // When a click event occurs on an unclustered point, show a popup map.on('click', 'coral-point', (e) => { const coordinates = e.features[0].geometry.coordinates.slice(); const p = e.features[0].properties; const date = p.date.split("T")[0]; var color = p.lightest; if(p.lightest != p.darkest){ color += ' - ' + p.darkest; } const depth = 'Depth: ' + p.depth + ' m'; const cond = 'Light condition: ' + p.condition; const temp = 'Water temperature: ' + p.temp + 'ºC'; const group = 'Collected by ' + p.group // You can customize the popup content based on your data new mapboxgl.Popup({className: 'pop'}) .setLngLat(coordinates) .setHTML('

' + p.site + '

' + date + '

' + color + '

' + p.type + '

'+'

CONDITIONS:

' + cond + '

' + temp + '

' + depth + '

' + group + '

') .addTo(map); }); // Change cursor style on hover map.on('mouseenter', 'coral-point', () => { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'coral-point', () => { map.getCanvas().style.cursor = ''; }); } 34:[{"id":"65e84a4beed5de07c74071b8673c42af4e76074e115b259946876d130f4802f5ce6b019e352ee4fc5117c5d762b66798e513a4b48c4016c13a4ad547a068794b","href":"https://static.observableusercontent.com/files/65e84a4beed5de07c74071b8673c42af4e76074e115b259946876d130f4802f5ce6b019e352ee4fc5117c5d762b66798e513a4b48c4016c13a4ad547a068794b","name":"clean_data@1.csv","type":"text/csv","lastModified":1724620393053.756,"size":10090262}] 2f:{"id":"d066fed01c59dd45","slug":"coral-bleaching-across-the-world","title":"SP2024 Coral Bleaching Across The World (Mapbox GL)","thumbnail":"72946b5b3ec3e554a703a3d72c11f90da6e9118094fe217d3d1fa8c1442ac241","access_level":"public","create_time":"$D2024-08-25T21:13:13.053Z","update_time":"$D2025-01-20T08:29:32.261Z","view_time":null,"first_public_time":"$D2024-08-25T21:13:13.053Z","fork":{"id":"a0e49a75ec664e53","slug":null,"title":"Coral Bleaching Across The World","owner":{"id":"0e4f3bfcc8beb20b","login":"dis-2024-spring","name":"🪦 dis-2024-spring"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c555e02063f451b5","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":"starter_2024"},"version":905,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null}],"members":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null,"role":"editor"},{"type":"team","id":"c555e02063f451b5","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"c2b96431d92a6fa1","slug":"dis-course-projects","title":"Course projects archive","owner":{"id":"c555e02063f451b5","login":"angiehjort","name":"Angie Hjort"}},"type":"notebook","body":{"title":"SP2024 Coral Bleaching Across The World (Mapbox GL)","cells":[{"id":0,"value":"# SP2024 Coral Bleaching Across The World (Mapbox GL)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":831,"value":"import { View } from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"viewof yr = new View('All')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"viewof coralType = new View('All')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"display = {\n const root = html`Year of Observation: ${viewof yr.bind(\n html``\n )}`;\n return Object.assign(root, {\n update: yr => (root.querySelector('#yr').innerText = yr)\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof m = mapboxMap()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"clean_data = await FileAttachment(\"clean_data@1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"clean_data","database":"$undefined"},{"id":120,"value":"md`\n### Functions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"update2 = display.update(coralType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"update = display.update(yr)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"function loadColorMatrix(container) {\n const imgElement = document.createElement('img');\n imgElement.style.position = 'absolute';\n imgElement.style.top = '10px'; \n imgElement.style.right = '90px'; \n imgElement.src = 'https://i.imgur.com/3T5o4lJ.png';\n imgElement.style.width = '300px';\n imgElement.style.height = 'auto';\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"// I have no idea what any of this does\nfunction mapboxClickedFeatures(map, layers) {\n \n if (typeof layers === 'string') layers = [layers];\n \n return Generators.observe(notify => {\n const onClick = event => {\n const features = map.queryRenderedFeatures(event.point, {layers});\n notify(features.map(feature => ({properties: feature.properties, layer: feature.layer})));\n }\n \n map.on('click', onClick);\n \n // Notify initial value\n notify([]);\n \n return () => {\n // Clean up by removing click handler\n map.off('click', onClick);\n }\n })\n\n \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// Call this function in your notebook to load the MapboxGL stylesheet\nloadStyleSheet = () => html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"loadBaseScript = () => html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`\n### Import MapboxGL (1.1.0)\n\nMapbox GL JS can also be loaded from Mapbox's CDN, but it works perfectly well loaded from unpkg, and that's how we load most things, so... I load it from there. Like Leaflet, it needs both JavaScript and CSS to properly function.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@3.2.0');\n mapboxgl.accessToken = 'pk.eyJ1IjoiZHNjYXJiMjEiLCJhIjoiY2x0cnR3cWlqMGtmZzJucDU2eDR2eWpyMCJ9.nfk8bnbhwkUmEHDhKZv3zA';\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"loadStyleSheet()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"loadBaseScript()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"