ver: http://www.meetup.com/HacksHackersChile/events/184284332/

Breve presentación:

Algunos ejemplos de mapas.

Herramientas a ocupar:

Ejemplo número uno: Terremotos

  1. Bajar información en los Feeds de la USGS
  2. Agregarla a la capa a Tilemill (via url)
  3. Añadir una capa de base personalizada (cuenta mapbox) o usar examples.map-i86nkdio
  4. Darle apariencia según sus sus atributos (tamaño según magnitud)

código final:

#feed-usgs{
  [mag <= 7]{marker-width:49;}
  [mag <= 6]{marker-width:36;}
  [mag <= 5]{marker-width:25;}
  [mag <= 4]{marker-width:16;}
  [mag <= 3]{marker-width:9;}
  marker-width:20;
  marker-fill:#f45;
  marker-line-color:#813;
  marker-allow-overlap:true;
  marker-opacity:.5;
}

Ejemplo número dos: Áreas verdes por habitante:

  1. Bajar tabla con datos de áreas verdes por comuna en Santiago, de Atisba
  2. Hacer scraping de la tabla con los datos, esto es, transformar un pdf a una planilla manipulable, con Tabula. Si no funciona, ver aquí
  3. Bajar las comunas de la región metropolitana en Rulamahue
  4. Crear una cuenta en Carto dB
  5. Subir las dos tablas (revisar los acentos)
  6. Combinar las tablas según una columna común (nombre comunas)
  7. Visualizar (mapa cloroplastos).
  8. (bonus) Meter el mismo mapa a Tilemill

Ejemplo número tres: Bombas de bencina.

  1. Revisar el (o la?) wiki de Openstreetmap. Ver los FEATURES
  2. Ocupar Taginfo y buscar fuel. Crear automáticamente una CONSULTA en overpass.API
  3. Escoger un encuadre (mancha de Santiago) y ejecutar
  4. Exportar los datos como geoJSON
  5. Subir el archivo a geojson.io y revisarlo
  6. Continuación (difícil)
  7. Revisar los ejemplos de mapbox.js.
  8. Abrir yovivomap8, copiar el código HTML y pegarlo en un archivo de texto.
  9. Subirlo a algun sitio vía FTP. Subir también el geoJSON a la misma carpeta
  10. En el código del archivo anterior, reemplazar el url del geoJON por el nuestro y cambiar el encuadre inicial.
  11. Revisar en un explorador ejemplo

código final:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>yo vivo MAP8 2014</title>

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />

<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }

</style>
</head>
<body>

<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'ignacioabe.map-shkgkvg6').setView([-33.435, -70.635], 15);

// As with any other AJAX request, this technique is subject to the Same Origin Policy:
// http://en.wikipedia.org/wiki/Same_origin_policy
// So the CSV file must be on the same domain as the Javascript, or the server
// delivering it should support CORS.
var featureLayer = L.mapbox.featureLayer()
	.loadURL('export.geojson')
	.addTo(map);
</script>

</body>
</html>

FIN!