software libre – 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 ¿Por qué apostar por el software libre en las aplicaciones cívicas? http://es.schoolofdata.org/2014/11/10/por-que-apostar-por-el-software-libre-en-las-aplicaciones-civicas/ http://es.schoolofdata.org/2014/11/10/por-que-apostar-por-el-software-libre-en-las-aplicaciones-civicas/#comments Mon, 10 Nov 2014 01:07:11 +0000 http://es.schoolofdata.scoda.okfn.org/?p=997
Apostar por el uso o la creación de software libre de código fuente abierto en nuestras aplicaciones cívicas no sólo nos dará la libertad que queremos (sí, el software libre nos hace libres), sino que da oportunidad a muchas otras más personas de poder replicar el trabajo o contribuir en la mejora de esta. Entonces, ¿por qué hacerlo?

Comencemos con la pregunta más básica: ¿Qué es el software libre?

Se le denomina así al software que permite que el usuario pueda hacer uso de manera libre con el fin que él crea conveniente. Para que así sea, debe de cumplir con 4 libertades:

Libertad 0: La libertad de usar el programa, con cualquier propósito.

Las otras tres libertades se refieren al software libre cuyo código fuente es abierto (open source).

Libertad 1: La libertad de estudiar cómo funciona el programa y modificarlo, adaptándolo a tus necesidades.

Libertad 2: La libertad de distribuir copias del programa para ayudar a tu prójimo.

Libertad 3: La libertad de mejorar el programa y hacer públicas esas mejoras, de modo que toda la comunidad se beneficie.

 

Ahora sigamos con la siguiente pregunta: ¿Qué son las aplicaciones cívicas?.

Las aplicaciones cívicas son aquellas creadas para resolver o ayudar a reconocer problemas sociales (no a quejarnos de ellos). Crear una aplicación en la que el ciudadano se sienta identificado y empoderado, es una gran manera de promover una cultura cívica.  para que los principales actores (nosotros) podamos ser parte del cambio.

¿Por qué aplicaciones cívicas haciendo uso de software libre? Porque nos da la libertad que necesitamos en Internet y así no tener problemas con las licencias en el futuro. Y ¿por qué código fuente abierto? Porque permite que uno o muchos ciudadanos repliquen la experiencia y/o les permita contribuir para mejorarlo. Una de las posibilidades es hacerlo con sistemas de versionado como git, svn o mercurial en sitios web como los populares githut o bitbucket.

Cuando hacemos software libre no solo estamos contribuyendo con una comunidad colaborativa y abierta, sino que apoyamos a generar una cultura libre.

 

Mi experiencia en época electoral

En ODPE (Open Data Perú) estamos impulsando la creación de aplicaciones cívicas y apertura de datos. Este fue uno de nuestros últimos ejercicios, propuesto por Giovanna Castañeda, coordinadora de ODPE.  Se basó en una aplicación de  La Nación Data de Argentina que mostraba la trayectoria política de los candidatos en sus elecciones legislativas del 2013. Esta aplicación tenía el código fuente público para repicarlo. Así fue como, partiendo de este, visualizamos la trayectoria política de los alcaldes y ex-alcaldes de Lima Metropolitana (Lima, Perú).

EL CAMINO DE LOS CANDIDATOS A LOS MUNICIPIOS DE LIMA

Una gran iniciativa en las que podemos colaborar es Poplus (http://poplus.org). Su objetivo es el «civic coding elaborando componentes para aplicaciones de uso cívico. Otra es Code for America (http://www.codeforamerica.org), una organización que promueve la construcción de software libre de código fuente abierto para mejorar los servicios públicos. Lo hacen a través de un programa donde involucran a hackers cívicos dentro del gobierno. Puedes escuchar más de su experiencia en el siguiente vídeo: https://www.youtube.com/watch?v=-aGPnzm_6Bc

Las posibilidades son limitadas solo por nosotros. No podemos cambiar el mundo, pero si contribuir para mejorarlo.

Flattr this!

]]> http://es.schoolofdata.org/2014/11/10/por-que-apostar-por-el-software-libre-en-las-aplicaciones-civicas/feed/ 1 997