2b:null 2c:["$","title",null,{"children":"Animaciones en Mapbox, con D3.js y Canvas (Español) | Irene de la Torre | Observable"}] 31:T5ca,{ let container = html`

`; // Da dimensiones al contenedor `container` yield container; // el condicional solo es para Observable if (show_1) { // Crea un nuevo mapa (el `map` object) con el constructor `mapboxgl.Map` y // referencia tu contenedor `container` const map = new mapboxgl.Map({ container, center: [-5, 54], zoom: 6.5, style: "mapbox://styles/mapbox/light-v9" // scrollZoom: false }); // convierte los datos a un formato geojson 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 }); // añade la capa con la linea 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()); } else { ("Map hidden"); } }32:Ted5,{ const id_mapbox = "map_canvas"; const id_vessel = "vessel_2"; let container = html`

`; // Da dimensiones al contenedor `container` yield container; if (show_2) { // Crea un nuevo mapa (el `map` object) con el constructor `mapboxgl.Map` y // referencia tu contenedor `container` let map = new mapboxgl.Map({ container, center: [-5, 54], zoom: 6.5, style: "mapbox://styles/mapbox/light-v9" // scrollZoom: false }); //// Contenedor CANVAS //// // 1 - obtén el ancho y el alto del contenedor const width = d3.select(`#${id_mapbox}`).node().clientWidth; const height = d3.select(`#${id_mapbox}`).node().clientHeight; // 2 - añade un nuevo div encima de nuestro mapa mapbox // lo utilizaremos para modificar el CSS y poner nuestras trayectorias encima d3.select(`#${id_mapbox}`).append("div").attr("id", "fixed"); // 3 - añade nuestro nuevo canvas (que utilizaremos para incluir las trayectorias) // en este nuevo div const canvas = d3 .select("#fixed") .append("canvas") .attr("id", id_vessel) .node(); //// Atributos de canvas //// // escálalo al doble de su tamaño para que tenga una buena resolución // esta escala sólo se hace al principio! canvas.width = 2 * width; canvas.height = 2 * height; //// Atributos de contexto --- como queremos pintar? //// // èste es el sistema habitual para pintar en canvas const ctx = canvas.getContext("2d"); ctx.scale(2, 2); // nuestras escalas tienen que ser las mismas ctx.clearRect(0, 0, width, height); // igual que mapbox ctx.linecap = "round"; ctx.linejoin = "round"; //// Funciones para dibujar las líneas //// // crea una proyección para transformar los `lon` y `lat` a los pixeles de mapbox function projection(lonlat) { const p = map.project(new mapboxgl.LngLat(lonlat[0], lonlat[1])); return [p.x, p.y]; } // tenemos que saber como dibujar la trayectoria // para lo cual utilizaremos // d3.line() // con la proyección de mapbox que hemos creado `proyection` // por último, indicaremos que vamos a dibujar en nuestro canvas no en SVG const pathLine = d3 .line() .x((d) => projection([d.lon, d.lat])[0]) .y((d) => projection([d.lon, d.lat])[1]) .context(ctx); draw(); //// Pintemos //// // Guarda tu forma de pintar en una función para que sea fácil // reutilizarla después function draw() { // limpia el fondo de tu canvas -- borra cualquier cosa que tengas ctx.clearRect(0, 0, width, height); // divide las trayectorias en pequeñas líneas, agrupados por horas for (var i = t_extent[0]; i <= t_extent[1]; i = i + hour) { // éste es el equivalente de todos los movimientos hechos durante una hora const path = vessel.filter( (d) => parseDate(d.timestamp) >= i - hour && parseDate(d.timestamp) <= i + hour ); // indica como quieres dibujar // reinicialo cada vez que dibujes desde una nueva linea ctx.globalCompositeOperation = "multiply"; ctx.strokeStyle = color; ctx.fillStyle = "none"; ctx.globalAlpha = 0.2; ctx.lineWidth = 2; // dibuja 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:T153f,{ // // 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`

`; // Da dimensiones al contenedor `container` yield container; if (show_3) { play; // Crea un nuevo mapa (el `map` object) con el constructor `mapboxgl.Map` y // referencia tu contenedor `container` let map = new mapboxgl.Map({ container, center: [-5, 54], zoom: 6.5, style: "mapbox://styles/mapbox/light-v9", scrollZoom: false }); //// Contenedor CANVAS //// // 1 - obtén el ancho y el alto del contenedor const width = d3.select(`#${id_mapbox}`).node().clientWidth; const height = d3.select(`#${id_mapbox}`).node().clientHeight; // 2 - añade un nuevo div encima de nuestro mapa mapbox // lo utilizaremos para modificar el CSS y poner nuestras trayectorias encima d3.select(`#${id_mapbox}`).append("div").attr("id", "animation"); // 3 - añade nuestro nuevo canvas (que utilizaremos para incluir las trayectorias) // en este nuevo div const canvas = d3 .select("#animation") .append("canvas") .attr("id", id_vessel) .node(); //// Atributos de canvas //// // escálalo al doble de su tamaño para que tenga una buena resolución // esta escala sólo se hace al principio! canvas.width = 2 * width; canvas.height = 2 * height; //// Atributos de contexto --- como queremos pintar? //// // èste es el sistema habitual para pintar en canvas const ctx = canvas.getContext("2d"); ctx.globalCompositeOperation = "normal"; ctx.imageSmoothingEnabled = false; ctx.globalAlpha = 1; ctx.scale(2, 2); // nuestras escalas tienen que ser las mismas ctx.clearRect(0, 0, width, height); // igual que mapbox ctx.linecap = "round"; ctx.linejoin = "round"; // objetos para controlar la animación let t = t_extent[0]; // const speed = 1000 * 60 * 5; // 5 min const speed = speed_2; //// Funciones para dibujar las líneas //// // crea una proyección para transformar los `lon` y `lat` a los pixeles de mapbox function projection(lonlat) { const p = map.project(new mapboxgl.LngLat(lonlat[0], lonlat[1])); return [p.x, p.y]; } // tenemos que saber como dibujar la trayectoria // para lo cual utilizaremos // d3.line() // con la proyección de mapbox que hemos creado `proyection` // por último, indicaremos que vamos a dibujar en nuestro canvas no en SVG const pathLine = d3 .line() .x((d) => projection([d.lon, d.lat])[0]) .y((d) => projection([d.lon, d.lat])[1]) .context(ctx); draw(); // Pintemos // Guarda tu forma de pintar en una función para que sea fácil // reutilizarla después function draw() { // limpia el fondo de tu canvas -- borra cualquier cosa que tengas ctx.globalCompositeOperation = "normal"; ctx.fillStyle = "white"; ctx.globalAlpha = 1; ctx.fillRect(0, 0, width, height); //// datos del barco //// // toda la trayectoria pasada const past = vessel.filter((d) => parseDate(d.timestamp) <= t); // la trayectoria pasada más cercana al momento actual // coge los últimos 100 minutos const current = vessel.filter( (d) => parseDate(d.timestamp) <= t + hour && parseDate(d.timestamp) > t - hour ); //// dibujemos //// // trayectoria anterior ctx.strokeStyle = color; ctx.fillStyle = "none"; ctx.globalAlpha = 0.3; ctx.lineWidth = 1; ctx.beginPath(); pathLine(past); ctx.stroke(); // trayectoria actual ctx.globalAlpha = 0.6; ctx.lineWidth = 2; ctx.beginPath(); pathLine(current); ctx.stroke(); // barco - última posición 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(); } // actualiza valores de animación // se utilizarán para filtrar los datos // y parar la animación 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":1687164022346.459,"size":51273},{"id":"91ac0030170a69050f0626fb13a746b14401cbb594cea2ceb7784adb6822cae3008fd4a483fbbae43e7ae3cd508ba77fe14ee6071b3a5bb4272fad504886371e","href":"https://static.observableusercontent.com/files/91ac0030170a69050f0626fb13a746b14401cbb594cea2ceb7784adb6822cae3008fd4a483fbbae43e7ae3cd508ba77fe14ee6071b3a5bb4272fad504886371e","name":"Animando Mapas con_D3@1.js, Mapbox y Observable.pdf","type":"application/pdf","lastModified":1687417997626.9,"size":1620403}] 2f:{"id":"016035a726c021c6","slug":null,"title":"Animaciones en Mapbox, con D3.js y Canvas (Español)","thumbnail":"8db1fa75d6aac4f2a26e58cc6d569d72e9ae83a29ee0247935bfb056d6259c2f","access_level":"public","create_time":"$D2023-06-19T08:40:22.346Z","update_time":"$D2023-06-22T07:26:14.315Z","view_time":null,"first_public_time":"$D2023-06-19T20:46:25.218Z","has_unpublished_edits":null,"fork":{"id":"aef8718d5613b91a","slug":null,"title":"Animations in Mapbox, with D3.js and Canvas (English)","owner":{"id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre"}},"stars":0,"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":724,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Animaciones en Mapbox, con D3.js y Canvas (Español)","cells":[{"id":0,"value":"# Animaciones en Mapbox, con D3.js y Canvas (Español)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":705,"value":"pdfView(\n await FileAttachment(\n \"Animando Mapas con_D3@1.js, Mapbox y Observable.pdf\"\n ).url(),\n {\n scale: 1\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"## 1. Anexo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":439,"value":"**Importa la libreria Mapbox**","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":424,"value":"**Estructura de nuestros datos**\n\n- timestamp: fecha y hora de la localización\n- lon: longitud (x)\n- lat: latitud (y)\n- hours: fecha y hora simplificada en un número para poder agrupar lineas (sólo utilizado en el mapa estático)","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":721,"value":"Datos originales proporcionados por [Global Fishing Watch](https://globalfishingwatch.org/) para el proyecto [The Fishermen](https://ig.ft.com/filipino-fishermen/), del [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":508,"value":"color = \"#CC5500\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"color_2 = \"#8F3C00\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"---\n\n## 2. Mapa estático\n\nMuestra trayectorias por hora","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":466,"value":"### Capa habitual de Mapbox (sistema habitual)\n\n**👍** escalable, reacciona con el mapa, no hace falta CSS\n\n**👎** opciones de edición limitadas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":615,"value":"viewof show_1 = Inputs.toggle({ label: \"Mostrar el mapa\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":526,"value":"### Canvas encima de Mapbox \n\n**👍** Muchas opciones para editar y estilizar los estilos\n\n**👎** El CSS tiene que coincidir al 100%. Es fácil perderse y que no coincidan. Se necesita `requestAnimationFrame()` para escalar al mismo tiempo que Mapbox","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"viewof show_2 = Inputs.toggle({ label: \"Mostrar el mapa\", 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":529,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"## 3 - Animación. Canvas encima de Mapbox\n\n**👍** Muchas opciones para editar y estilizar los estilos\n\n**👎** El CSS tiene que coincidir al 100%. Es fácil perderse y que no coincidan. Se necesita `requestAnimationFrame()` para escalar al mismo tiempo que Mapbox\n\nCapas (en canvas):\n\n- Trayectoria pasada: trae todos los puntos ocurridos hasta un determinado momento, finos y translúcidos\n- Trayectoria actual: trae los puntos de la última hora. Linea más gruesa y opaca.\n- Punto actual: último punto en la trayectoria actual","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":638,"value":"viewof show_3 = Inputs.toggle({ label: \"Mostrar el mapa\", value: false })","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":421,"value":"**Animation controls**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"hour = 1000 * 3600 // 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"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":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"},{"id":694,"value":"### Funciones para añadir el PDF ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"Gracias [Saneef](https://observablehq.com/@saneef/pdf-view)!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":697,"value":"import { pdfView } from \"@saneef/pdf-view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"