Google Maps API
Google Maps API
Ya hemos visto muchas de las posibilidades que ofrece Google Maps API.
En este apartado, veremos algunas características que nos pueden resultar útiles para la configuración de nuestros mapas.
Query Places
Query Places nos permite hacer una búsqueda automatizada de lugares.
Con la librería places podemos ubicar de forma automática lugares en un mapa.
A través de los parámetros de búsqueda del método nearbySearch podemos modificar la query que hace sobre los datos de places.
Veamos un ejemplo:
- Se declaran las variables map e infowindow
- Se inicializa el mapa mediante la función
- Se define el valor del infowindow a través de la clase google.maps.InfoWindow
- Se carga la biblioteca de sitios “places”, para el subconjunto PlacesService
- Con el método nearbySearch se localizan aquellos servicios que cumplan los requisitos indicados en los parámetros de la búsqueda
Ejercicio
Sobre el ejercicio anterior modifica los siguientes parámetros: Types y Radius.
Nota: Puedes ver más parámetros de búsqueda en este enlace.
[Solución]
Gmaps.js
Si trabajar directamente con la API de Google Maps te resulta complejo, Gmaps.js es una librería desarrollada para simplificar el trabajo con la API.
LeafLeft
Leaflet es una librería especializada para la creación de mapas interactivos.
Tiene una amplia documentación y una galería de estilos de mapa (basados en Mapbox) para comenzar a trabajar rápidamente con ella.
Como toda librería basada en JS, utiliza la base de este, pero simplifica la sintaxis para hacer más sencillo y ágil el desarrollo de los mapas.
Vamos a crear un mapa básico con LeafleftJs:
- En el head de html, enlazamos la hoja de estilo de Leaftletjs y, detrás, ponemos después el enlace al js de Leaftletjs.
- En css Le damos un alto al div que contiene el mapa a través del id
- En Js creamos el mapa y le asignamos las coordenadas decimales y el nivel de zoom
- Cargamos una capa de mapa (tile layer) desde Mapbox. Necesitaremos incluir el accessToken de mapbox. Si no tenemos uno, tendremos que crearlo (En id podemos incluir cualquiera de los estilos de mapa base disponibles en Mapxbox)
- Creamos un marcador
- Creamos un círculo
- Creamos dos popup sobre el marcador y el círculo
- Creamos una función
En este otro mapa, sobre la base del anterior hemos incorporado un marcador personalizado usando las opciones que LeafLeft tiene para ello.
Mapbox
Mapbox es otra estupenda librería para crear mapas. De hecho, tiene su propio sistema de mapas que es usado por otras librerías como base, tal como sucede como LeafLeft.
Ofrece una documentación muy amplia lo que facilita trabajar con ella.
De manera similar a lo que sucede con Google Maps, existe la posibilidad de trabajar directamente con la API o hacerlo mediante el editor de mapas (studio). Esto último simplifica aún más el desarrollo dado que, además, luego podremos customizar o personalizar elementos accediendo al código resultante.
Una de las aportaciones interesantes de esta librería es que dispone de numerosos efectos que pueden darle un aspecto diferente a nuestras visualizaciones en mapas. La documentación de la API incluye muchas, pero destacaremos aquí algunas de ellas:
Zooming
Transforma el puntero del ratón en una lupa.
Animación
Crea animaciones (líneas, superposiciones, etc.) sobre el mapa.
Video Tooltips
Incluye vídeo sobre el tooltip (o infowindow) de un marcador.
ArcGIS online
ArcGIS online es una completa suite de aplicaciones y APIs. Dispone de un Gestor web y de numerosas APIs para interactuar y adaptar los resultados.
En este enlace puedes acceder a un tutorial básico para empezar a crear mapas 2D.
Un aspecto diferencial de esta solución, es que ofrece un editor de escenas. Esto facilita un modo de crear escenas 3D sobre la representación de la esfera terrestre, como en este ejemplo:
O sobre zonas concretas en las que pueden incluirse capas como edificios, etc:
Google Chart
Google Chart es una librería orientada a la creación de una amplia variedad de gráficos dinámicos.
Creación de Chart básicos
La creación de Chart requiere que los datos sean incluidos mediante una clase de JavaScript: google.visualization.DataTable
La clase está definida en la librería de visualización de Google.
La tabla de datos corresponde a una tabla similar a esta.
Veamos los pasos para crear nuestro primer ejemplo:
- Cargamos la API de visualización del paquete que nos interesa, en este caso “corechart”
- Establecemos el callback para que se ejecute la función cuando se haya cargado la API de visualización de Google y no antes
- La devolución de llamada que crea y rellena una tabla de datos, crea una instancia del gráfico circular, pasa los datos y los dibuja.
- Creamos la tabla de datos
- Configuramos las opciones del chart
- Instanciamos y dibujamos el chart pasándole la configuración de las opciones
Personalización del Chart
Para cada Chart podemos personalizar diferentes elementos como:
- Título, Color, grosor de línea, relleno de fondo, etc.
- Incluir elementos: títulos de los ejes, etc.
Las opciones se presentan como pares name.value
- Las opciones pasan los valores al chart mediante el método draw()
- Cada chart posee los pares adecuados para la customización de ese tipo de visualización
Las opciones de customización son muy variadas, lo que permite, y esta es su principal ventaja, adaptar los gráficos al estilo visual de nuestro proyecto.
Otra de las opciones es incluir HTML en los tootilps:
O incluir otros Charts dentro de los tooltips:
Combo Charts
Podemos también crear charts agrupados, lo que se conoce como Combo Charts. En este caso, vemos dos ejemplos: en el primero los resultados de dos procesos electorales sin customizar, y el segundo, en el que e incluyen los resultados de unas terceras elecciones, y se customizan algunos elementos.
Google Public Data Explorer
Aunque no pertenece a la API de Google Chart, Google Public Data Explorer es una interesante herramienta de Google que permite elaborar gráficos sencillos de forma rápida, utilizando los datos públicos abiertos ya cargados por las principales entidades internacionales (Eurostat, US. Census Bureau, Data.gob.uk, Banco Mundial…) o nacionales (INE…)
Mediante un sistema de filtros se pueden crear visualizaciones tanto para realizar análisis como para crear gráficos que se vayan a insertar posteriormente en nuestro reportaje o web.
En este ejemplo, se usan datos del Banco Mundial para comparar la evolución de la ratio de niños y niñas fuera de la escuela por regiones mundiales:
Librerías DataViz (Datos)
Existen muchas alternativas actualmente para la visualización de datos. Muchas de las librerías tienen su propia sintaxis, basada o derivada de JS. La ventaja de disponer de esta variedad es que podemos tener un catálogo muy amplio de soluciones que permitan elegir la mejor opción para cada caso e ir introduciendo cierta variedad en nuestros proyectos.
Revisamos, a continuación, algunas de las soluciones disponibles. Aunque no se entra en su detalle, permite hacerse una idea de las numerosas posibilidades existentes para continuar explorando por nuestra cuenta.
D3.js
D3.js es una librería JS para manipular documentos basados en datos. Se utiliza para realizar visualizaciones complejas. Cuenta con una amplia galería de visualizaciones.
Algunos ejemplos interesantes aplicados de esta librería:
En este enlace puedes seguir un tutorial de esta librería D3.js
Funcionalidad
Permite obtener datos de cualquier elemento del DOM y aplicarle transformaciones en el documento.
Sobre un mismo conjunto de datos permite realizar varias transformaciones. Por ejemplo, sobre un array podemos:
- Crear una tabla
- Generar un gráfico interactivo en SVG
Y de una manera muy flexible y rápida.
Sintaxis
Ejemplos
En este primer ejemplo vemos un Diagrama de acorde, documentado en DJ3 (podemos reutilizar el código). En este caso, hemos reutizado el código y lo hemos adaptado para crear esta versión sobre el flujo de deuda entre países:
El funcionamiento de las visualizaciones básicas es relativamente sencillo. Los datos se cargan en ficheros .csv que se llaman desde el html para cargarlos en la visualización. Veamos otros dos ejemplos:
- Dendrograma: Visualización [Datos]
- Histograma: Visualización [Datos]
ZinkChart
ZinkChart es otra librería interesante. Orientada a gráficos habituales (líneas, histogramas, sectores, etc.) ofrece un muy buen resultado visual, incluyendo animación de los elementos y la incorporación de elementos gráficos añadidos que dan un aspecto muy completo.
AmCharts
AmCharts es otra buena librería para crear gráficos y mapas. Puede descargarse, enlazarse o trabajar con el editor online live AmCharts.
Ejemplo de mapa
Ejemplo de gráfico
Highcharts
Highcharts es una buena librería de gráficos interactivos que cuenta también con una versión de creación online. Está muy orientada a gráficos de línea, columnas, barras para información económica.
En el editor online permite la carga de los datos en csv, lo que facilita la gestión de estos para la preparación del gráfico.
AnyCharts
AnyChart.JS es una completa librería para el desarrollo de:
Permite hacer algunas representaciones bastante singulares y diferentes, por lo que es una buena opción cuando se busca salirse de lo habitual.
Este gráfico es un buen ejemplo:
También resulta útil para generar paneles de gráficos, en formato dashboard.
Otras librerías
Chart.js
Chart.js pertenece al grupo de librerías ligeras. No permite hacer muchas cosas, pero las visualizaciones de gráficas que hace son muy limpias y ligeras.
Sigma.js
Sigma.JS es una librería para crear dibujo gráfico, y está especializado en creación de gráficos de redes.
Listados de librerías
Javascripting es un directorio de librerías que colecta cientos de soluciones para problemas muy diversos basados en javascript.
Librerías Mapas
Cesium.js
CesiumJS es una potente biblioteca de JavaScript de código abierto para crear mapas y globlos terráqueos 3D de nivel internacional. Permite crear mapas tanto estáticos como dinámicos, y con la posibilidad de incluir líneas temporales que muestren la evolución de un fenómeno.
También permite levantar edificios sobre superficies.
Cesium ion!
Cesium también dispone de una versión de escritorio que incluye algunas de las principales funciones de la librería.
Dispone de un completo tutorial para conocer cómo trabajar con ella.
OpenLayers
OpenLayers facilita la creación de mapas dinámicos en cualquier página web. Puede mostrar mosaicos de mapas, datos vectoriales y marcadores cargados desde cualquier fuente. OpenLayers ha sido desarrollado para promover el uso de información geográfica de todo tipo.
Dispone, también, de un tutorial, y una librería de ejemplos.
Utilidades
Localización de coordenadas
Para localizar las coordenadas del lugar que necesitas: Coordenadas-GPS
Datos cartográficos
Global Administrative Areas contiene un amplio bancos de ficheros de shapefiles: KML, vectoriales… gratuitos de la mayoría de los países del mundo, hasta cuatro niveles administrativos: país, región, provincia y localidad.
Librerías pictográficas
Las librerías pictográficas web son colecciones de iconos que pueden cargarse vía web en nuestro proyecto mediante un enlace. •Las tres principales son:
- Font Awesome Icons. Es una colección libre de más de 600 iconos. Permite control CSS, sin manejo de JS.
- Bootstrap Icons
- Google Icons
Tutoriales
- Catálogo de visualización de datos. Extraordinario tutorial visual sobre las mejores formas para visualizar los datos.
- The Graphic continuum.