¿Estás interesado en conocer la posición actual de tus dispositivos? Por ejemplo, las empresas de logística encuentran extremadamente útil saber dónde están sus camiones para estimar el tiempo de llegada de los paquetes. Además, al rastrear los movimientos de un vehículo, se pueden diseñar rutas alternativas para optimizar el consumo de combustible y la velocidad en futuros esfuerzos.
1. Definiendo la Ubicación de tu Dispositivo
Antes de crear un Widget de Mapa, Ubidots necesita saber dónde encontrar los datos de ubicación de tu(s) dispositivo(s). Cada dispositivo tiene una propiedad predeterminada llamada "Ubicación", que se puede encontrar en la columna izquierda de la vista del dispositivo:
Automático: Este es el modo predeterminado. Ubidots buscará una variable llamada "gps", "location" o "position" y luego verá el contexto del último valor de dicha variable, para encontrar si existen las claves "lat" y "lng". Algunos ejemplos de un último valor válido serían:
{"position": {"value":1, "context":{"lat": "6.5423", "lng": "-70.5783"}}}{"position":{"lat":6.2442, "lng":-75.5812}}{"position":{"latitude":6.2442, "longitude":-75.5812}}
En los últimos dos ejemplos, Ubidots añadirá automáticamente un valor de 1 y hará que las coordenadas sean parte del contexto del valor para que coincidan con dicho formato como en la primera instancia.
Manual: Esta opción te permite escribir manualmente las coordenadas de latitud y longitud del dispositivo:
Esto es bastante útil para dispositivos estacionarios, como estaciones meteorológicas donde se conocen las coordenadas GPS exactas. También puedes usar el mapa mostrado en la parte superior de la vista del dispositivo para arrastrar y soltar manualmente un pin en una ubicación.
Basado en variable: Alternativamente, si tu variable de ubicación no se llama "gps", "location" o "position", también puedes especificarlo tú mismo. En el ejemplo a continuación, usaremos una variable "flood_stage", que lleva valores "lat" y "lng" en su contexto:
NOTA IMPORTANTE: Debes enviar "lat" y "lng" valores al "contexto" de la variable de ubicación para que Ubidots pueda leer los datos de ubicación de tus dispositivos. Consulta esto para recursos adicionales sobre cómo enviar la latitud y longitud de un dispositivo en el contexto.
2. Creando el Widget de Mapa
Después de definir cómo Ubidots debe extraer la ubicación de tus dispositivos, dirígete al menú desplegable "Datos" en la barra de navegación, luego "Tableros", y selecciona el tablero apropiado en el que trabajar. A continuación, sigue los pasos a continuación para crear un widget de mapa:
Paso 1: Haz clic en el botón "+" en la parte superior derecha.
Paso 2: Selecciona la opción de widget Mapa.
Paso 3: Haz clic en el botón "+ Agregar grupo de marcadores".
Nota: Si tu tablero es dinámico, la opción marcadores se volverá disponible. Si no, la opción "seleccionar dispositivos" aparecerá para asociar manualmente los dispositivos que se mostrarán.
Paso 4: Selecciona el(los) dispositivo(s) que se mostrarán en el mapa con el menú desplegable de marcadores. Las opciones son:
Dispositivo(s) seleccionados del tablero: muestra el(los) dispositivo(s) seleccionados en el tablero.
Grupo de dispositivos: muestra los dispositivos que pertenecen al grupo seleccionado.
Tipo de dispositivo: muestra los dispositivos que pertenecen al tipo seleccionado.
Lista de dispositivos del tablero: muestra dispositivos basados en la lista de dispositivos del tablero.
Dispositivos seleccionados: muestra una opción para seleccionar dispositivos específicos.
Paso 5: Selecciona el pin de icono:
Pin: pin estándar (opción predeterminada).
Icono del dispositivo: hereda el icono del dispositivo.
Icono de variable de ubicación: hereda el icono de la variable que el sistema está tomando como referencia para encontrar las coordenadas de ubicación.
Métrica: Muestra un icono de círculo que muestra datos de una variable seleccionada.
Ninguno: No se muestra ninguna marca.
Paso 6: Selecciona el color del marcador:
Basado en valor: Habilita una opción llamada "color personalizado", donde necesitas agregar una lógica de color basada en el valor de una variable.
Color del dispositivo: hereda el color del dispositivo.
Color de la variable de ubicación: hereda el color de la variable que el sistema está tomando como referencia para las coordenadas de ubicación.
Paso 7: Edita las acciones "al hacer clic" y "al hacer doble clic", según la sección 3.
Paso 8: Edita la opción de traza del mapa, según la sección 4.
Paso 9: Habilita/deshabilita agregación.
Paso 10: Crea una zona para unir un grupo de dispositivos y realizar agregaciones a través del último valor de una variable en los dispositivos de la zona. Aprende más sobre zonas en este artículo.
Paso 11: Cambia la "apariencia" general del widget con los siguientes parámetros:
Define un nombre para el widget.
Selecciona un tipo de capa: mapa de carreteras, satélite o híbrido.
Selecciona un estilo para tematizar el mapa entre claro, oscuro o personalizado (sección 5). La opción personalizada solo está disponible cuando se selecciona la capa "mapa de carreteras".
Elige un valor de zoom predeterminado para el mapa.
Estilo personalizado tu widget de mapa como desees.
3. Acciones del Mapa
Dentro de la configuración del widget de Mapa, hay una opción para configurar acciones cuando haces clic o doble clic en el pin de ubicación. Las siguientes son las opciones disponibles:
Establecer dispositivo del tablero: Establece el dispositivo en la lista del Tablero cuando se realiza la acción.
Ir al dispositivo: Abre una nueva pestaña con la vista del dispositivo en el que se realiza la acción.
Ir a variable: Abre una nueva pestaña con la vista de la variable especificada por el usuario.
Ir al tablero: Abre una nueva pestaña con el tablero especificado.
Mostrar variables seleccionadas: Muestra una lista con el último valor de las variables seleccionadas del dispositivo. Hacer clic en una variable te lleva a la vista de la variable abriendo una nueva pestaña.
Mostrar todas las variables: Muestra una lista con el último valor de todas las variables del dispositivo. Hacer clic en una variable te lleva a la vista de la variable abriendo una nueva pestaña.
Mostrar traza del mapa: Muestra la traza, como se especifica en "configuración de traza del mapa".
Mostrar dirección: Muestra la dirección aproximada basada en las coordenadas de latitud y longitud.
Mostrar Tablero: Muestra una ventana con el tablero seleccionado como incrustado.
4. Traza del Mapa
El widget de mapa te permite mostrar la traza de un dispositivo configurando las siguientes opciones:
Método de agregación: Especifica la forma en que se dibujan los datos históricos:
Crudo: Esto muestra una traza de todos los datos de ubicación del dispositivo. Esta opción puede tardar minutos en responder y graficar.
Suave: Muestra una traza suavizada utilizando el algoritmo de Douglas-Peuker para optimizar el tiempo de carga y graficado.
Rango: Configura el rango de tiempo en el que se mostrará la traza.
Mostrar flechas de dirección: Esto muestra la dirección de movimiento del dispositivo.
Mostrar al cargar: Muestra la traza del mapa después de actualizar el widget o el tablero. Habilita esta opción si deseas mostrar la traza, de lo contrario, solo mostrará el último punto de ubicación en el rango de tiempo seleccionado.
5. Icono de Métrica
El widget de mapa te permite mostrar un icono de métrica como un marcador que muestra datos de una variable especificada configurando las siguientes opciones:
Etiqueta de variable: La etiqueta de la variable que deseas mostrar.
Método de agregación: Especifica la forma en que se computan los datos (promedio, mínimo, máximo, suma, conteo, último valor).
Rango: Configura un rango de tiempo para que se realice la agregación con los datos contenidos dentro del rango definido.
6. Agrupamiento
Cuando un mapa tiene un gran número de marcadores, se vuelve útil usar agrupaciones para identificar grupos de marcadores dentro de un límite definido basado en la distribución o densidad de marcadores y el nivel de zoom del mapa.
Para ver cómo funciona el agrupamiento de marcadores, consulta el ejemplo a continuación.
El número en un grupo indica cuántos marcadores contiene. Observa que a medida que haces zoom en cualquiera de las ubicaciones del grupo, el número en el grupo disminuye y comienzas a ver los marcadores individuales en el mapa. Alejar el mapa consolida los marcadores en grupos nuevamente.
7. Personalizando el Estilo del Mapa
A veces deseas que el widget de mapa tenga un cierto aspecto y sensación para que cumpla con las necesidades y requisitos de tu aplicación. Los widgets de mapa te permiten importar un JSON personalizado y cambiar su apariencia en consecuencia. Una buena fuente para estilos de Google Maps es Snazzy Maps.
Nota: El estilo personalizado solo funciona en los planes de pago de Ubidots.
Siguiendo los pasos a continuación, podrás cambiar el estilo de tu mapa:
Paso 1: Selecciona mapa de carreteras como el tipo de capa.
Paso 2: Para el estilo de capa selecciona personalizado.
Paso 3: Haz clic en "abrir editor" en la opción "estilo de mapa personalizado".
Paso 4: Ve a Snazzy Maps y elige una visualización.
Paso 5: Copia el array de estilo JS.
Paso 6: Pégalo en el editor de estilo personalizado y haz clic en el botón "guardar".
Paso 7: Termina de editar tu widget de mapa y haz clic en "guardar".
8. Consejos Profesionales
En lugar de usar Google Maps, que es el servicio de mapas predeterminado utilizado por Ubidots, podrías intentar con otros servicios como Mapbox. Si deseas probarlo, consulta este tutorial para aprender a escribir tus propios widgets en Ubidots con el widget HTML Canvas.