Skip to content

Instantly share code, notes, and snippets.

@namessanti

namessanti/readme.md

Last active April 27, 2017 19:28
Show Gist options
  • Save namessanti/bf2a24eee76559f64140 to your computer and use it in GitHub Desktop.
Save namessanti/bf2a24eee76559f64140 to your computer and use it in GitHub Desktop.
Download ZIP
Taller Intermedio-Avanzado CartoDB para la Ciudad De Mexico Dia 2
Raw
readme.md

#CartoDB.js De Golpe

###El API de JavaScript CartoDB

Ejemplos:

Tablas que usaremos hoy:

limites_colonias estaciones_bomberos construccion

Copia el VizJSON de el mapa que hacimos ayer, o alternativamente usa un VizJSON de cualquier mapa que quieres.

##De el Editor –> CartoDB.js "Publish" En la esquina arriba de la derecha.

viz

####Entendiendo el viz.json

El archivo viz.json es la principal fuente de datos para funciones CartoDB JavaScript ( createVis y createLayer ) para la creación de visualizaciones en el navegador.

Puedes abrir y ver el contenido de el viz.json en un editor de texto simple o descargar una extensión de visor de JSON para Chrome o Firefox para verlo en el navegador.

viz2

  • Estructura del archivo: JSON
  • Define cómo acceder a los datos: servidores del anuncio, subdominios, etc.
  • Lo más importante para los desarrolladores es la matriz de layers, ya que muestra explícitamente la estructura de cómo las visualizaciones estan creadas
  • Define mapas de base, si applicable, como layers[0]
  • Layer de datos CartoDB es layers[1], pueden existir múltiples sublayers
  • Define ventanas de información, lo que vamos a cubrir en este taller
  • Define los datos de los que se accede mediante una instrucción SQL
  • Define el estilo de tile layers, cuando applicable
  • Define la interactividad (qué datos aparece en los eventos de el layer)
  • layer_name es el nombre de la tabla donde los datos proviene de la cuenta con la clave user_name

####Que necesitas

  • Editor de texto básico (Como Sublime text)
  • Navegador moderno

Puede abrir los archivos HTML en el disco duro desde un navegador. Usa CMD + O o CTRL + O como lo harías para abrir un archivo en cualquier programa.

###Visualizaciones basicas en javaScript

Copia este template:

<!DOCTYPE html>
<html>
  <head>
    <title>GDF | CartoDB.js | CartoDB</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />

    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />

    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>

  </head>
  <body>
    <div id="map"></div>

    <!-- incluye la libreria CartoDB.js -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js" type="text/javascript"></script>

    <!-- Aqui va tu codigo de js -->
    <script>
    </script>
  </body>
</html>

Visión general de la plantilla:

  1. Incluimos la libreria de js y archivo CSS

  2. Incluimos el elemento de "mapa"

  3. Y El tag de <script>

Creemos una visualización básica utilizando createVis. copia y pega lo el siguiente:

window.onload = function() {
    var vizjson_url = ''; // <-- Pega tu viz.json URL entre los quotes

    cartodb.createVis(map_id, vizjson_url) // <-- cambia map_id a 'map'
        .done(function(vis, layers) {
            // do stuff
            console.log("Map successfully created");
        })
        .error(function(err) {
            // report error
            console.log("An error occurred: " + err);
        });
}

createVis es excelente para la creación de mapas rápidamente con muy poco código. Hay un montón de personalización con ella también. La documentación está aquí.

Actualizar la ventana de su navegador, el mapa debe trabajar.

###createLayer y Leaflet.js basico createLayer es otro metodo primcipal para crear mapas en js.

Lo siguiente es la estructura basica de createLayer (depende de Leaflet.js):

window.onload = function() {
   var layerSource = ''; // <-- El mismo viz.json que antes

   var sublayerOptions = {
       sql: "SELECT * FROM limites_colonias",
       cartocss: "#limites_colonias{polygon-fill: red; polygon-opacity: 0.7; line-color: #FFF; line-width: 0.5; line-opacity: 1; }"
   }

   var sublayers = new Array();

   // Aqui sacamos el objeto de Leaflet
   var mapObj = new L.Map(map_id, {  // <-- cambia map_id con 'map'
       center: [19.4333, -99.1333], // Ciudad de Mexico
       zoom: 11
   });

   // Aqui agregamos la base
   L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
   }).addTo(mapObj);

   // Agregar la data aqui
   cartodb.createLayer(map_object,layerSource) // <-- Cambia map_object con mapObj
       .addTo(mapObj)
       .done(function(layer) {
           console.log("Map successfully created.");
           sublayers[0] = layer.getSubLayer(0);
           sublayers[1] = layer.getSubLayer(1);
           sublayers[2] = layer.getSubLayer(2);
           sublayers[0].set(sublayerOptions); // Aqui estamos cambiando solo el CartoCSS y SQL de las colonias
           sublayers[1].hide(); // Y escondiendo construccion
           sublayers[2].hide();
       })
       .error(function(err) {
           console.log("Map not created: " + err);
       });
}

**Una gran diferencia con createLayer es que exponemos de forma explícita el SQL y CartoCSS, lo que permite una fácil personalización.

Actualizar la ventana de su navegador, el mapa debe trabajar.

###Cambiando SQL 'on the fly'

####Creando selecionadores de SQL y CartoCSS

Copia lo siguiente de bajo de <style> el la cabeza.

<script type='sql/text' id='sql'>
   SELECT *,
     (SELECT ST_Distance(the_geom, c.the_geom) FROM estaciones_de_bomberos
      ORDER BY the_geom <-> c.the_geom
      LIMIT 1) d
    FROM
     limites_colonias c
</script>

Y pega el CartoCSS siguiente en el <head> de la pagina.

<style type='cartocss/text' id='choropleth'>
    /** choropleth visualization */

    #limites_colonias{
      polygon-fill: #FFFFB2;
      polygon-opacity: 0.8;
      line-color: #FFF;
      line-width: 0.5;
      line-opacity: 1;
    }
    #limites_colonias [ d <= 0.130281159736711] {
       polygon-fill: #B10026;
    }
    #limites_colonias [ d <= 0.0459668803121927] {
       polygon-fill: #E31A1C;
    }
    #limites_colonias [ d <= 0.032624374664669] {
       polygon-fill: #FC4E2A;
    }
    #limites_colonias [ d <= 0.026308476561484] {
       polygon-fill: #FD8D3C;
    }
    #limites_colonias [ d <= 0.0200391035456874] {
       polygon-fill: #FEB24C;
    }
    #limites_colonias [ d <= 0.0146268301803192] {
       polygon-fill: #FED976;
    }
    #limites_colonias [ d <= 0.00913025756312662] {
       polygon-fill: #FFFFB2;
    }
</style>

Ahora, cambia el texto en el objeto sublayerOptions con: $("#sql").text(), (No te olvides la comma!), y cambia el CartoCSS con: $("#choropleth").text()

Estas dos piezas de código son sólo una operación de jQuery que encuentra el elemento HTML que tiene un identificador de SQL o cartocss y extrae el texto contenido en ella.

Actualizar la ventana de su navegador, el mapa debe trabajar.

###Agregando interaccion a el mapa Para añadir más interactividad, crearemos dos botones para alternar entre la vista del mapa simple y la vista que le da un mapa coroplético. Podemos hacer esto fácilmente en CartoDB utilizando el sublayer.setSQL () y sublayer.setCartoCSS () para cambiar los datos.

hay que crear otro tag html para el estilo simple:

<style type="cartocss/text" id="simple">
/** simple visualization */

#limites_colonias{
  polygon-fill: #F11810;
  polygon-opacity: 0.7;
  line-color: #FFF;
  line-width: 0.5;
  line-opacity: 1;
}
</style>

A continuación, vamos a crear algunos botones. Coloque el siguiente fragmento de debajo del div con un id = "map".

    <div class="layer_selector">
    <p>Seleccionador de Viz</p>
    <ul>
        <li data="simple">Resetear CartoCSS</li>
        <li data="choropleth">Areas de servicio bombero</li>
    </ul>
</div>

El estilo de los botones se logra usando CSS normal el el tag de <style> en la cabeza:

          .layer_selector {
                background: #fff;
                border-radius: 4px;
                padding: 0;
                border: 1px solid #999999;
                width: 248px;
                box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
                font: 11px 'Helvetica';
                position: absolute;
                right: 20px;
                bottom: 150px;
            }
            
            .layer_selector > p {
                font-weight: bold;
                color: #666666;
                padding: 14px 14px 12px 14px;
                cursor: pointer;
                border-bottom: 1px solid #999;
            }
            
            .layer_selector ul {
                padding: 0;
                margin: 0;
                list-style-type: none;
                bottom: 36px;
                border-radius: 4px;
            }
            .layer_selector li {
                padding: 14px;
                font-size: 11px;
                color: #222;
                cursor: pointer;
            }
            .layer_selector li:hover {
                background-color: #e5e5e5
                cursor: pointer;
            }

Agriega createSelector(layer); a el cartodb.createLayer

en el js, pon los eventos de click:

    // Crear selecionador
      function createSelector(layer) {
        var cartocss = "";
        var $options = $(".layer_selector").find("li");
        
        $options.click(function(e) {
          var $li = $(e.target);
          var selected = $li.attr('data');
          console.log(selected);
          cartocss = $('#'+selected).text();

          layer.getSubLayer(0).setCartoCSS(cartocss);
        });
      }

Mas recursos:

Interactividad!

Ejemplo Avanzado

##Interactividad InfoWindows

HTML templates

  • Handlebar notation
  • Customizing display of information
  • Pulling in images

Copie esto:

<script type="infowindow/html" id="infowindow_template">
  <div class="cartodb-popup">
    <a href="#close" class="cartodb-popup-close-button close">x</a>
     <div class="cartodb-popup-content-wrapper">
       <div class="cartodb-popup-header">
         <img style="width: 100%" src="https://cartodb-libs.global.ssl.fastly.net/cartodb.com/static/logos_full_cartodb_light.png"></src>
       </div>
       <div class="cartodb-popup-content">
         <!-- content.data contains the field info -->
         <h4>Colonia: </h4>
         <p></p>
       </div>
     </div>
     <div class="cartodb-popup-tip-container"></div>
  </div>
</script>

Y agriega esto a el sublayerOptions:

interactivity: 'cartodb_id, nombre'

Ahora, despues de el sublayer[0].set(...), agriega esto:

sublayers[0].infowindow.set('template', $('#infowindow_template').html());

Eventos de click

  • On hover
  • On click

###Ejemplos adicionales (bienvenido al comienzo)!

  • sql.execute(SQL) Para sacar datos de tu cuenta CartoDB para uso en otras plataformas, por ejemplo graficas, infowindows, etc. Using Chart.js. Hay que explorar este ejemplo
  • sql.getBounds(SQL) para mover el mapa a la distancia de tus datos.

###Mas informaccion: Leccioneshttp://docs.cartodb.com/tutorials.html Documentacion Map Academy on CartoDB.js Contactame! [email protected]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment