2f: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"); } }30: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()); } }31: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()); } }32:[{"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}] 2d:{"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"},{"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"},{"id":447,"value":"## 1. Anexo","pinned":false,"hidden":false,"mode":"md"},{"id":439,"value":"**Importa la libreria Mapbox**","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":47,"value":"vessel = await FileAttachment(\"one_vessel.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":72,"value":"t_extent = d3.extent(vessel, (d) => parseDate(d.timestamp)) // controls animation","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"function parseDate(date) {\n return new Date(date).getTime();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"color = \"#CC5500\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"color_2 = \"#8F3C00\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":371,"value":"---\n\n## 2. Mapa estático\n\nMuestra trayectorias por hora","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":615,"value":"viewof show_1 = Inputs.toggle({ label: \"Mostrar el mapa\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":629,"value":"viewof show_2 = Inputs.toggle({ label: \"Mostrar el mapa\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":638,"value":"viewof show_3 = Inputs.toggle({ label: \"Mostrar el mapa\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"viewof play = Inputs.button(\"Start animation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"**Animation controls**","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"hour = 1000 * 3600 // 1","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":16,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":694,"value":"### Funciones para añadir el PDF ","pinned":false,"hidden":false,"mode":"md"},{"id":713,"value":"Gracias [Saneef](https://observablehq.com/@saneef/pdf-view)!","pinned":false,"hidden":false,"mode":"md"},{"id":697,"value":"import { pdfView } from \"@saneef/pdf-view\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}