mapbox – Escuela De Datos http://es.schoolofdata.org evidencia es poder Mon, 26 Mar 2018 17:09:36 +0000 es hourly 1 https://wordpress.org/?v=5.3.2 114974193 Cómo crear un mapa 3D de Buenos Aires, Argentina http://es.schoolofdata.org/2017/10/04/como-crear-un-mapa-3d-de-buenos-aires-argentina/ http://es.schoolofdata.org/2017/10/04/como-crear-un-mapa-3d-de-buenos-aires-argentina/#respond Wed, 04 Oct 2017 18:47:26 +0000 http://es.schoolofdata.org/?p=2303 Por Nicolas Grossman y Bruno Salerno

Los mapas son excelentes herramientas para visualizar datos de una ciudad y compararlos entre zonas de la misma. Pero si además podemos graficar los edificios en tres dimensiones, la visualización resulta más impactante aún. En este tutorial contamos cómo realizamos el mapa que muestra los precios promedio del metro cuadrado en cada parcela de la ciudad de Buenos Aires (Argentina) y San Pablo (Brasil), con sus respectivos edificios en 3D.

1. Obtener los shapefiles con las geometrías de las parcelas/edificios de la ciudad y su respectiva altura y un dataset con las propiedades en venta y su precio.

En el caso de Buenos Aires, la información  está en archivos distintos.

2. Calcular el precio por metro cuadrado y la altura para cada parcela

A partir del dataset de propiedades y el de parcelas, utilizando un spatial join de Qgis, se calcula el precio promedio del metro cuadrado que le corresponde a cada parcela. Este tutorial explica simplemente cómo hacerlo.

Luego unimos los datos de las parcelas con la altura de cada edificio.

Se hace una union de estos datasets por el campo que identifica a cada parcela, que incluye la “sección”, la “manzana” y la “parcela”, para así poder asociar cada parcela a su altura correspondiente.

3. Transformar el shapefile en un tileset vectorial

En este punto transformamos el shapefile en un tileset vectorial que es un tipo información georeferenciada que usan múltiples tecnologías de mapas digitales para mostrar los datos.

Se denominan «tilesets» porque se trata de un malla de mosaicos que cubre la superficie deseada: cada mosaico tiene cierta información que va siendo dibujada a medida que navegamos por esa zona del mapa. Si no fuera por estos mosaicos sería muy lento mostrar toda la información que muestra el mapa.

Primero hay que convertir el shapefile producido en el primer punto en un GEOJSON (QGis=> guardar como => GeoJSON).

Usaremos el formato de tiles vectorial de Mapbox, mbtiles, ya que es ahí donde nosotros vamos a subir nuestro tileset. Para realizar la conversión de geojson a mbtiles usaremos el programa tippecanoe (https://github.com/mapbox/tippecanoe):

tippecanoe -o 3d_map_tileset.mbtiles -z 17 -Z 12 3d_map_tileset.geojson

Los parámetros z y Z son importantes, porque los tilesets se construyen por nivel de zoom. Cuanto más grande es el rango de zooms para el que se construye el tileset, más pesado es.

4. Subir el tileset a Mapbox Studio

Una vez generado el archivo, hay que subirlo a Mapbox Studio, en la sección datasets.

 

5. Programar Javascript

Vamos a necesitar programar un poco de javascript para poder mostrar la capa. De hecho, hay que hacer una aplicación en javascript que nos permita cargar un baselayer y el tileset en cuestión. Para eso vamos a usar Mapbox GL JS (https://github.com/mapbox/mapbox-gl-js).  La documentación sobre la API se encuentra en https://www.mapbox.com/mapbox-gl-js/api/.

Supongamos que vamos a hacer todo en un archivo llamado “our_map.html”. Los pasos a seguir serían:

        1. Crear el esqueleto de html:

<html>

<body

  <!– mapbox gl js –>

  <script src=’https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js’></script>

  <link href=’https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css’ rel=’stylesheet’ />

<script>

  // Here we are going to put our map code

</script>

</body>

</html>

Tenemos que realizar las siguientes tareas dentro del bloque <script>

        2. Cargar mapbox

  var center = [-58.388875,-34.612427];

 

      mapboxgl.accessToken = ‘YOUR ACCESS TOKEN’;

      var map = new mapboxgl.Map({

        container: ‘map’,

        style: ‘mapbox://styles/YOUTUSER/YOUR_BASE_STYLE’,

        center: center,

        zoom: 13.5,

        pitch: 59.5,

        bearing: 0

      });

       3. Cargar el tileset:

 map.on(‘style.load’, function () {

          map.addSource(‘buildings’,

              {«type»: «vector»,

                «url»: «THE TILESET URL»

              });

          map.addLayer({

            ‘id’: ‘buildings’,

            ‘interactive’: true,

            ‘type’: ‘fill-extrusion’,

            ‘source’: ‘buildings’,

            ‘source-layer’: ‘super_new_join_finalgeojson’,

            ‘paint’: {

              ‘fill-extrusion-height’: {

                ‘property’: ‘altura’,

                ‘stops’: [

                  [{zoom: 13, value: 0},   0],

                  [{zoom: 13.5, value: 1000}, 0],

                  [{zoom: 17.5, value: 0}, 0],

                  [{zoom: 17.5, value: 1000}, 1000]

                ]

              },

              ‘fill-extrusion-color’: {

                ‘property’: ‘precio’,

                ‘stops’: [

                  [0, ‘#e6e6e6’],

                  [700, ‘#ffffb2’],

                  [1754, ‘#fecc5c’],

                  [2233, ‘#fd8d3c’],

                  [2751, ‘#f03b20’],

                  [3683, ‘#bd0026’]

                ]

              },

              ‘fill-extrusion-opacity’: 0.9

            }

          }, ‘road_major_label’);

        });

Tomar nota de las partes más importantes:

 ‘fill-extrusion-height’: {

            ‘property’: ‘altura’,

…

}

Aquí estamos diciendo “tomar las alturas de los edificios del campo ‘altura’”.

Y

fill-extrusion-color: style: {

          ‘property’: ‘precio’,

          ‘stops’: [

            [0, ‘#e6e6e6’],

            [700, ‘#ffffb2’],

            [1754, ‘#fecc5c’],

            [2233, ‘#fd8d3c’],

            [2751, ‘#f03b20’],

            [3683, ‘#bd0026’]

          ]

        }

Aquí estamos diciendo “pintar usando los valores del campo ‘precio’ y usar los rangos para diferenciar los colores”, si no hay valor, usar ‘#e6e6e6’, si el valor está entre 0 y 700, usar ‘#ffffb2’, si el valor está entre 700 y 1754 usar  ‘#fecc5c’, y así sucesivamente.

 

El código completo sería:

<html>

  <body

    <!– mapbox gl js –>

    <script src=’https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js’></script>

    <link href=’https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css’ rel=’stylesheet’ />

    <div style=»padding:0; margin:0; width:100%; height:100%» id=»map»></div>

    <script>

      window.onload = function(){

        var center = [-58.388875,-34.612427];

        mapboxgl.accessToken = ‘YOUR ACCESS TOKEN’;

        var map = new mapboxgl.Map({

          container: ‘map’,

          style: ‘mapbox://styles/YOUTUSER/YOUR_BASE_STYLE’,

          center: center,

          zoom: 13.5,

          pitch: 59.5,

          bearing: 0

        });

        map.on(‘style.load’, function () {

          map.addSource(‘buildings’,

              {«type»: «vector»,

                «url»: «THE TILESET URL»

              });

          map.addLayer({

            ‘id’: ‘buildings’,

            ‘interactive’: true,

            ‘type’: ‘fill-extrusion’,

            ‘source’: ‘buildings’,

            ‘source-layer’: ‘super_new_join_finalgeojson’,

            ‘paint’: {

              ‘fill-extrusion-height’: {

                ‘property’: ‘altura’,

                ‘stops’: [

                  [{zoom: 13, value: 0},   0],

                  [{zoom: 13.5, value: 1000}, 0],

                  [{zoom: 17.5, value: 0}, 0],

                  [{zoom: 17.5, value: 1000}, 1000]

                ]

              },

              ‘fill-extrusion-color’: {

                ‘property’: ‘precio’,

                ‘stops’: [

                  [0, ‘#e6e6e6’],

                  [700, ‘#ffffb2’],

                  [1754, ‘#fecc5c’],

                  [2233, ‘#fd8d3c’],

                  [2751, ‘#f03b20’],

                  [3683, ‘#bd0026’]

                ]

              },

              ‘fill-extrusion-opacity’: 0.9

            }

          }, ‘road_major_label’);

        });

      }

    </script>

  </body>

</html>

Servir el HTML desde un server

Ahora hay que servir el html desde un server. En nuestra máquina local podemos usar http-server . Una vez instalado, (se puede instalar con npm: npm install http-server), hay que correrlo en la misma carpeta donde tenemos nuestro html. Y después, en el browser, navegar a localhost:8080/our_map.html.

Flattr this!

]]> http://es.schoolofdata.org/2017/10/04/como-crear-un-mapa-3d-de-buenos-aires-argentina/feed/ 0 2303 Usando Carto: ¿Cómo unir mi base de datos con un mapa de polígonos? http://es.schoolofdata.org/2016/09/21/usando-carto-como-unir-mi-base-de-datos-con-un-mapa-de-poligonos/ http://es.schoolofdata.org/2016/09/21/usando-carto-como-unir-mi-base-de-datos-con-un-mapa-de-poligonos/#comments Wed, 21 Sep 2016 22:33:53 +0000 https://es.schoolofdata.org/?p=1820 La aplicación para hacer mapas Carto (antes CartoDB) es una herramienta útil para visualizar información geográfica pero tiene una desventaja, no cuenta con la información cartográfica de países pequeños o “poco importantes” a nivel mundial.

Es por eso que los que hacemos mapas en países latinoamericanos tenemos una misión un poco más complicada, debemos conseguir la información cartográfica y unirla con nuestras bases de datos.

A continuación describiremos el proceso para unir el archivo con la información cartográfica y una base de datos en Excel.

El archivo con los polígonos de los municipios de Guatemala en formato Shape (.shp) lo obtuve de la página web de la Secretaría de Planificación de la Presidencia, si necesitas un mapa de tu país puedes descargarlo en este enlace.

Sube el archivo .zip que contiene el archivo .shp a Carto para empezar a usarlo.

image10

 

 

 

 

Como podrás ver en la columna quinta columna “código” están los códigos asignados por el gobierno de Guatemala a cada municipio.
Estos son códigos estandarizados que debe tener el Instituto Nacional de Estadística de tu país. Estos son los códigos estandarizados de los 340 municipios de Guatemala.

image01

En el caso de Guatemala utilizamos los códigos porque normalmente ninguna base de datos de información gubernamental tiene los mismos nombres para todos los municipios, como en el caso del archivo .shp y la base de datos.
Ahora debes abrir la base de datos que quieres visualizar en el mapa. En mi caso usaré una que tiene información sobre las escuelas preprimaria del país.

 

 

image09

 

 

 

 

Para agregar los códigos estandarizados a la base de datos agregaremos una columna y usaremos la fórmula BUSCARV para localizar los códigos en el archivo anterior.

image11

 

 

 

 

Ya con los códigos en todos los municipios deberás subir el archivo a Carto.

image05

 

 

 

 

 

 

 

 

Ahora debes dar click en “edit” y a “Merge with dataset”

image02

 

 

 

 

Debes elegir la opción “Column join” para unir los dos archivos

image00

 

 

 

Y seleccionar en la segunda columna el archivo “municipios_gtm” que fue el que subiste del archivo .shp.

image13

 

 

 

 

Debes seleccionar que utilice la geometría del archivo “municipios_gtm” que es el que tiene la información cartográfica.

image08

 

 

 

 

Y ahora viene la magia. Debes hacer click en “Merge Datasets”. Así quedan las dos tablas unidas.

image03

 

 

 

 

Ahora debes hacer click en “Map view”. Todos los polígonos de los municipios estarán marcados.

image04

 

 

 

 

 

 

Luego ya deberás personalizar tu mapa como quieras utilizando los datos de tu base de datos.

Este fue mi resultado:

image12

Flattr this!

]]> http://es.schoolofdata.org/2016/09/21/usando-carto-como-unir-mi-base-de-datos-con-un-mapa-de-poligonos/feed/ 1 1820