Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)

tel./fax: +34 91 675 33 06info@autentia.com - www.autentia.com

Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...

1. Desarrollo de componentes y proyectos a medida

TecnologíaDesarrolloSistemas

Gran Empresa

Producción

autentia

Certificacióno Pruebas

Verificación previa

RFP Concurso

Consultora 1

Consultora 2

Consultora 3

Equipo propio desarrolloPiloto

3a

3b

1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.

3. Arranque de proyectos basados en nuevas tecnologías

¿Qué ofrece Autentia Real Business Solutions S.L?

Para más información visítenos en: www.autentia.com

Compartimos nuestro conociemiento en: www.adictosaltrabajo.com

Gestor portales (Liferay)Gestor de contenidos (Alfresco)Aplicaciones híbridas

Tareas programadas (Quartz)Gestor documental (Alfresco)Inversión de control (Spring)

BPM (jBPM o Bonita)Generación de informes (JasperReport)ESB (Open ESB)

Control de autenticación y acceso (Spring Security)UDDIWeb ServicesRest ServicesSocial SSOSSO (Cas)

Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery

JPA-Hibernate, MyBatisMotor de búsqueda empresarial (Solr)ETL (Talend)

Dirección de Proyectos Informáticos.Metodologías ágilesPatrones de diseñoTDD

2. Auditoría de código y recomendaciones de mejora

4. Cursos de formación (impartidos por desarrolladores en activo)

26/2/2015 Cómo crear un mapa interactivo en CartoDB

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=intro-cartodb 1/7

Entra en Adictos a través de

Entrar

E­mail

Contraseña

RegistrarmeOlvidé mi contraseña

Inicio Quiénes somos Formación Comparador de salarios Nuestros libros Más

» Estás en: Inicio  Tutoriales  Cómo crear un mapa interactivo en CartoDB

Síguenos a través

de:

Catálogo de servicios

Autentia

         

Últimas Noticias

» 2015: ¡Volvemos a la oficina!

» Curso JBoss de Red Hat

» Si eres el responsable o lídertécnico, considératedesafortunado. No puedesculpar a nadie por ser gris

» Portales, gestores decontenidos documentales ydesarrollos a medida

» Comentando el libro Start­upNation, La historia del milagroeconómico de Israel, de DanSenor & Salu Singer

Histórico de noticias

Últimos Tutoriales

» Instalación de un clústerHadoop con Cloudera­Manager

» Unicode

» Crea interfaces webamigables con TwitterBootstrap

» Experimenta con tu códigoen Eclipse utilizandoScrapbooks

» Curso de WatchKit ¡ahorasólo 9 dólares!

  Ver todos los tutoriales del autor

Juan Alonso Ramos

Consultor tecnológico de desarrollo de proyectos informáticos.

Ingeniero en Informática, especialidad en Ingeniería del Software

Puedes encontrarme en Autentia: Ofrecemos de servicios soporte a desarrollo, factoría yformación

Somos expertos en Java/J2EE

Fecha de publicación del tutorial: 2015­02­26 Tutorial visitado 1 veces Descargar en PDF

Cómo crear un mapa interactivo en CartoDB

0. Índice de contenidos.

1. Introducción.2. Entorno.3. Obtener los datos a visualizar4. Añadir los datos a CartoDB5. Filtros6. Configurar el mapa7. Compartir el mapa8. Conclusiones

1. Introducción.

Podríamos definir a CartoDB como una plataforma en la nube de código abierto utilizado para crear mapas interativos a partirde conjuntos de datos. Es de las mejores en su sector y es utilizada por más de 70.000 usuarios y empresas, entre ellasTwitter, The Wall Street Journal, Google, IBM y el BBVA.

Dispone de una galería de mapas ya creados y entre ellos algunos tan interesantes como los niveles de polución en LosÁngeles, los tweets que se escribieron durante la final de la UEFA Champions League del Real Madrid ­ Atlético de Madrid o elmapa de los mejores lugares para vivir en Inglaterra y Gales.

En este tutorial vamos a ver cómo a partir de una fuente de datos con información de geolocalización podemos crear un mapainteractivo en CartoDB.

2. Entorno.

El tutorial se ha realizado con el siguiente entorno:

MacBook Pro 15' (2.4 GHz Intel Core i5, 8GB DDR3 SDRAM).www.cartodb.com

3. Obtener los datos a visualizar

Lo primero será tener un conjunto de datos para visualizarlos en un mapa de CartoDB. Si trabajas en una empresa de logísticao distribución de paquetería tendrás en cada pedido una dirección por lo que cada uno de los datos con los que trabajasdiariamente tiene una ubicación que poder posicionar en un mapa. Para probar CartoDB yo voy a utilizar el dataset con ellistado de Centros Deportivos Municipales de la página de datos abiertos del Ayuntamiento de Madrid, aquí el enlace.

Este dataset me lo descargo en .csv ya que es uno de los muchos formatos que admite CartoDB. Contiene información delpolideportivo, su dirección, coordenadas, horario, descripción, si tiene acceso para discapacitados, etc.

26/2/2015 Cómo crear un mapa interactivo en CartoDB

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=intro-cartodb 2/7

Últimos Tutoriales del

Autor

» Crea interfaces webamigables con TwitterBootstrap

» Cómo implementar una nubede etiquetas con D3.js

» Servicios REST con SpringMVC y AngularJS

» Introducción a Spring Social

» Paradigma publish/subscribecon Spring Data Redis

 

4. Añadir los datos a CartoDB

Una vez que tenemos los datos a visualizar, vamos a http://www.cartodb.com y nos creamos una cuenta gratuita. Esta cuentanos permite 50MB y un número de mapas ilimitados, eso sí todos ellos públicos.

Tras crear la cuenta y hacer login entramos en la home de nuestra cuenta y pinchamos en 'Create your first table'.

Se nos abrirá una ventana donde nos pide que indiquemos la fuente de los datos, en nuestro caso desde un fichero.

26/2/2015 Cómo crear un mapa interactivo en CartoDB

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=intro-cartodb 3/7

Lo seleccionamos y automáticamente lo importará y procesará. El resultado será una tabla como la de la siguiente imagen:

Vemos como se ha importado el fichero csv y creado una tabla con las mismas columnas. Automáticamente CartoDB se dacuenta de las columnas que contienen las coordenadas de latitud y longitud que corresponden a la columna 'the_geom'.

Podemos quitar columnas o filas que no nos interesen, cambiar el tipo de dato de la columna, el nombre de la columna, elorden ascendente/descendente, etc.

Para visualizar los datos bastará con pinchar en el botón superior que pone 'Map View'.

 

5. Filtros

En el menú de la derecha disponemos de varias opciones que nos permitirán realizar diferentes configuraciones sobre el mapay los datos, una de ellas son las querues SQL y los filtros. Mediante una query podemos ejecutar determinadas condicionescontra el conjunto de datos que se filtrarán según las condiciones que pongamos en la cláusula 'where'.

Por ejemplo si queremos sacar únicamente los polideportivos que dispongan de acceso con accesibilidad:

26/2/2015 Cómo crear un mapa interactivo en CartoDB

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=intro-cartodb 4/7

También se pueden añadir condiciones sobre el conjunto de datos mediante la opción filtros. El equivalente a la query anteriorsería:

 

6. Configurar el mapa

CartoDB dispone de varios tipos de mapa diferente que se ajustan a nuestras necesidades, podemos cambiarlo desde laopción 'BaseMap':

Tipos de mapas disponibles:

 

También podremos configurar el formato de los puntos a visualizar, por ejemplo si queremos visualizar los polideportivos conaccesibilidad de los que no la tienen. Para ello desde la vista del mapa, en la opción 'wizards' del menú de la derecha

26/2/2015 Cómo crear un mapa interactivo en CartoDB

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=intro-cartodb 5/7

escogemos el tipo 'category'.

En las opciones de este tipo seleccionamos en el campo column el valor 'accesibilidad' y automáticamente nos pintará un colorpara cada valor que pueda tomar esta columna. Podremos configurar también los colores que más nos gusten.

Por último configuraremos la leyenda que se visualizará al pinchar en cada uno de los puntos. Esto se hace desde la opción'infowindow' del menú de la derecha. Aquí seleccionamos los valores que queramos que se muestren en la leyenda del puntoen el mapa.

 

7. Compartir el mapa

Una vez que tenemos el mapa configurado a nuestro gusto podemos compartirlo mediante el botón 'Share' situado en la partesuperior derecha. Esto nos generará varias opciones para compartirlo, desde una URL al mapa, un objeto embebido paraañadir a tu web o un objeto json con toda la información del mapa.

 

Y ya está, este es el resultado de nuestro mapa de polideportivos de Madrid:

26/2/2015 Cómo crear un mapa interactivo en CartoDB

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=intro-cartodb 6/7

 Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento­No comercial­Sin obras derivadas 2.5

IMPULSA Impulsores Comunidad ¿Ayuda?

----sin clicks + + + + + + + +

0 personas han traído clicks a esta página

powered by karmacracy

Share | 0

» Registrate y accede a esta y otras ventajas «

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

 

8. Conclusiones.

Los datos son muy importantes pero la forma de visualizarlos les aporta mayor sentido. Ver en un Excel la información yestudiar cientos de filas es un trabajo duro que a veces con poco esfuerzo podemos mostrarlos de forma más atractiva,relacionarlos y entenderlos mejor.

En este tutorial hemos visto una ejemplo con unos pocos datos, imagina lo que puedes hacer si pones a trabajar los datos detu negocio.

Espero que te haya sido de ayuda.

Un saludo.

Juan

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

0Map created by jalonsoramos

26/2/2015 Cómo crear un mapa interactivo en CartoDB

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=intro-cartodb 7/7

Copyright 2003­2015 © All Rights Reserved | Texto legal y condiciones de uso | Banners | Powered by Autentia | Contacto