2b:null 2c:["$","title",null,{"children":"Animations in Mapbox, with D3.js and Canvas (English) | Irene de la Torre | Observable"}] 31:T538,{ let container = html`

`; // Give size to the container yield container; if (show_1) { // Create a new map with `mapboxgl.Map` // call `container` const map = new mapboxgl.Map({ container, center: [-5, 54], zoom: 6.5, style: "mapbox://styles/mapbox/light-v9" // scrollZoom: false }); // transform the array to a geojson format const xy = vessel.map((d) => [d.lon, d.lat]); const vessel_data = { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { coordinates: xy, type: "LineString" } } ] }; map.on("load", () => { map.addSource("boat", { type: "geojson", data: vessel_data }); // add the layer with the data map.addLayer({ type: "line", source: "boat", id: "boat", paint: { "line-color": color, "line-width": 2, "line-opacity": 0.4 } }); }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); } }32:Td37,{ const id_mapbox = "map_canvas"; const id_vessel = "vessel_2"; let container = html`

`; // Give dimensions to the containerDa dimensiones al contenedor `container` yield container; if (show_2) { // Create a new map with `mapboxgl.Map` // use `container` let map = new mapboxgl.Map({ container, center: [-5, 54], zoom: 6.5, style: "mapbox://styles/mapbox/light-v9" // scrollZoom: false }); //// CANVAS //// // 1 - obtain the width and height of the container const width = d3.select(`#${id_mapbox}`).node().clientWidth; const height = d3.select(`#${id_mapbox}`).node().clientHeight; // 2 - add the new div on top of the mapbox map // we will use it to modify the CSS and add the trajectories on top d3.select(`#${id_mapbox}`).append("div").attr("id", "fixed"); // 3 - add the new canvas in this new div // (we will use it to include the trajectories) const canvas = d3 .select("#fixed") .append("canvas") .attr("id", id_vessel) .node(); //// Canvas Attributes //// // Scale it to twice its size to have a better resolution // This scale is used only at the beginning canvas.width = 2 * width; canvas.height = 2 * height; //// Context attributes - how do we want to paint? //// // This is the usual way to paint in canvas const ctx = canvas.getContext("2d"); ctx.scale(2, 2); // the scales must be the same ctx.clearRect(0, 0, width, height); // same sizes as in Mapbox ctx.linecap = "round"; ctx.linejoin = "round"; //// Functions to call the lines //// // Use a projection to transform the long lats into pixels function projection(lonlat) { const p = map.project(new mapboxgl.LngLat(lonlat[0], lonlat[1])); return [p.x, p.y]; } // Use d3.line() // and add the Mapbox projection // tell d3.line() that we will paint the line in canvas const pathLine = d3 .line() .x((d) => projection([d.lon, d.lat])[0]) .y((d) => projection([d.lon, d.lat])[1]) .context(ctx); draw(); //// Paint //// // Save your drawing actions in a function to use later function draw() { // Clean the canvas ctx.clearRect(0, 0, width, height); // Divide the trajectories into smaller lines, grouped by the hour for (var i = t_extent[0]; i <= t_extent[1]; i = i + hour) { // All movements done in one-hour const path = vessel.filter( (d) => parseDate(d.timestamp) >= i - hour && parseDate(d.timestamp) <= i + hour ); // Say how you want to draw it // Restart it everytime you draw a new line ctx.globalCompositeOperation = "multiply"; ctx.strokeStyle = color; ctx.fillStyle = "none"; ctx.globalAlpha = 0.2; ctx.lineWidth = 2; // draw ctx.beginPath(); pathLine(path); ctx.stroke(); // ctx.closePath(); ctx.globalAlpha = 1; } ctx.closePath(); window.requestAnimationFrame(draw); } // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); } }33:T1262,{ // // request animation frame --- not needed, because Observable // var requestAnimationFrame = // window.requestAnimationFrame || // window.mozRequestAnimationFrame || // window.webkitRequestAnimationFrame || // window.msRequestAnimationFrame; // window.cancelRequestAnimFrame = (function () { // return ( // window.cancelAnimationFrame || // window.webkitCancelRequestAnimationFrame || // window.mozCancelRequestAnimationFrame || // window.oCancelRequestAnimationFrame || // window.msCancelRequestAnimationFrame || // clearTimeout // ); // })(); const id_mapbox = "map_animacion"; const id_vessel = "vessel_animacion"; let container = html`

`; // Give the container dimensions. yield container; if (show_3) { play; // Create a new map with `mapboxgl.Map` // use `container` let map = new mapboxgl.Map({ container, center: [-5, 54], zoom: 6.5, style: "mapbox://styles/mapbox/light-v9" // scrollZoom: false }); //// CANVAS //// // 1 - obtain the width and height of the container const width = d3.select(`#${id_mapbox}`).node().clientWidth; const height = d3.select(`#${id_mapbox}`).node().clientHeight; // 2 - add the new div on top of the mapbox map // we will use it to modify the CSS and add the trajectories on top d3.select(`#${id_mapbox}`).append("div").attr("id", "fixed"); // 3 - add the new canvas in this new div // (we will use it to include the trajectories) const canvas = d3 .select("#fixed") .append("canvas") .attr("id", id_vessel) .node(); //// Canvas Attributes //// // Scale it to twice its size to have a better resolution // This scale is used only at the beginning canvas.width = 2 * width; canvas.height = 2 * height; //// Context attributes - how do we want to paint? //// // This is the usual way to paint in canvas const ctx = canvas.getContext("2d"); ctx.scale(2, 2); // the scales must be the same ctx.clearRect(0, 0, width, height); // same sizes as in Mapbox ctx.linecap = "round"; ctx.linejoin = "round"; //// Functions to call the lines //// // Use a projection to transform the long lats into pixels function projection(lonlat) { const p = map.project(new mapboxgl.LngLat(lonlat[0], lonlat[1])); return [p.x, p.y]; } // objects to control the animation let t = t_extent[0]; // const speed = 1000 * 60 * 5; // 5 min const speed = speed_2; // Use d3.line() // and add the Mapbox projection // tell d3.line() that we will paint the line in canvas const pathLine = d3 .line() .x((d) => projection([d.lon, d.lat])[0]) .y((d) => projection([d.lon, d.lat])[1]) .context(ctx); draw(); function draw() { // restart canvas ctx.globalCompositeOperation = "normal"; ctx.fillStyle = "white"; ctx.globalAlpha = 1; ctx.fillRect(0, 0, width, height); //// vessel data //// // full trajectory const past = vessel.filter((d) => parseDate(d.timestamp) <= t); // draw latest trajectories // picks the last 100 minutes const current = vessel.filter( (d) => parseDate(d.timestamp) <= t + hour * 1.5 && parseDate(d.timestamp) > t - hour * 1.5 ); // previous trajectory ctx.strokeStyle = color; ctx.fillStyle = "none"; ctx.globalAlpha = 0.3; ctx.lineWidth = 1; ctx.beginPath(); pathLine(past); ctx.stroke(); // draw "current" trajectory ctx.globalAlpha = 0.6; ctx.lineWidth = 2; ctx.beginPath(); pathLine(current); ctx.stroke(); // boat - last position if (current.length > 0) { var xy = projection([ current[current.length - 1].lon, current[current.length - 1].lat ]); ctx.fillStyle = color; ctx.strokeStyle = color_2; ctx.globalAlpha = 1; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(xy[0], xy[1], 4, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); ctx.closePath(); } // update the animation values if (t < t_extent[1]) { t = t + speed; window.requestAnimationFrame(draw); } else if (t >= t_extent[1]) { t = t_extent[1]; } } // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); } }34:[{"id":"c98894af8ccf5301e5f2f5e343bf26f4844552f94fa243f9ef98ec188eddecf556f67cea8a1494f1ae195bdbbf2cc96f988297667ea08f27fa4b542cafa985d8","href":"https://static.observableusercontent.com/files/c98894af8ccf5301e5f2f5e343bf26f4844552f94fa243f9ef98ec188eddecf556f67cea8a1494f1ae195bdbbf2cc96f988297667ea08f27fa4b542cafa985d8","name":"one_vessel.csv","type":"text/csv","lastModified":1678977979953.497,"size":51273}] 2f:{"id":"aef8718d5613b91a","slug":null,"title":"Animations in Mapbox, with D3.js and Canvas (English)","thumbnail":"5317ef2d4871765a4a097519021ed752d11fcd8b6e9a01e26257301ae6ebd4f4","access_level":"public","create_time":"$D2023-03-16T14:34:05.284Z","update_time":"$D2025-02-13T11:29:05.451Z","view_time":null,"first_public_time":"$D2023-06-19T21:27:39.998Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":"starter_2024"},"version":539,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf230089d660f755","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":null}],"members":[{"type":"individual","id":"cf230089d660f755","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Animations in Mapbox, with D3.js and Canvas (English)","cells":[{"id":0,"value":"# Animations in Mapbox, with D3.js and Canvas (English)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":442,"value":"## 1. Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":446,"value":"Import Mapbox library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n gl.accessToken =\n // my private access token\n \"pk.eyJ1IjoiaXJlbmVkZWxhdG9ycmUiLCJhIjoiY2psdjI0amR4MG9ybjNrcXg1cWMxaXpldCJ9.p2pLC5jzgpGPQaWGcjlATA\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"**Data structure**\n\n- timestamp: date and time\n- lon: longitude (x)\n- lat: latitude (y)\n- hours: simplified time to group lines by hour","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"vessel = await FileAttachment(\"one_vessel.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"vessel","database":"$undefined"},{"id":534,"value":"Original data from [Global Fishing Watch](https://globalfishingwatch.org/), given for the project [The Fishermen](https://ig.ft.com/filipino-fishermen/), of the [Financial Times](https://www.ft.com/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"t_extent = d3.extent(vessel, (d) => parseDate(d.timestamp)) // controls animation","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"function parseDate(date) {\n return new Date(date).getTime();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"color = \"#CC5500\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"color_2 = \"#8F3C00\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":464,"value":"---\n\n## 2. Static map\n\nShow trajectories","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":466,"value":"### Usual layer in Mapbox\n\n**👍** easy to scale, reacts with the map, you don't need to include extra CSS\n\n**👎** limited styling options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"viewof show_1 = Inputs.toggle({ label: \"Show map\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"### Canvas on top of Mapbox \n\n**👍** A lot of options to edit and stylize the styles\n\n**👎** The CSS must be the same (in terms of width and height). It's easy to get lost if they don't match. You need to include `requestAnimationFrame()` or redraw the canvas every time the map moves","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":493,"value":"viewof show_2 = Inputs.toggle({ label: \"Show map\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"## 3 - Animation. Canvas on top of mapbox\n\n**👍** A lot of options to edit and stylize the styles\n\n**👎** The CSS must be the same (in terms of width and height). It's easy to get lost if they don't match. You need to include `requestAnimationFrame()` to redraw the map.\n\nLayers (in canvas):\n\n- Past path: bring all points up to a given time, thin and faded\n- \"Current path\": bring points from the last hour and a half. Thicker and stronger\n- \"Current point\": last point in the current trajectory","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":506,"value":"viewof show_3 = Inputs.toggle({ label: \"Show map\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"hour = 1000 * 3600 // 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"viewof speed_2 = Inputs.range([1000 * 60 * 5, 1000 * 60 * 10], {\n label: \"Speed\",\n step: 1000,\n value: `${1000 * 60 * 10}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"viewof play = Inputs.button(\"Start animation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"