En este documento, se describe por qué y cómo implementar diseños basados en datos dinámicos de los límites de Google con la API de Maps JavaScript, que es útil para una variedad de casos de uso en industrias y segmentos.
Recuentos animados de taxis en la ciudad de Nueva York según el límite del código postal (simulación, dentro del tiempo):
.
El diseño basado en datos es una función de Google Maps Platform que te permite utilizar los polígonos de límites administrativos de Google, aplicar diseño a esos polígonos para que se muestren en tus mapas y combinar tus propios datos para crear mapas detallados y personalizados que se pueden usar para el análisis visual y la comprensión mejorada de tus datos. En este documento, se analizan algunos casos de uso en los que se explican por qué y cómo se pueden visualizar tus datos con el diseño basado en datos en un mapa casi en tiempo real a través de la integración de feeds de datos dinámicos.
El diseño basado en datos te permite crear mapas que muestran la distribución geográfica de los datos, personalizan el diseño de polígono de forma dinámica y también interactúan con tus datos a través de eventos de clic. Estas funciones se pueden usar para crear mapas informativos y atractivos para una variedad de industrias y casos de uso.
A continuación, se incluyen algunos ejemplos de casos de uso que podrían aplicarse a un mapa en el que se muestran actualizaciones de datos dinámicas con un diseño basado en datos:
- Transporte compartido: Las actualizaciones en tiempo real se pueden usar para identificar áreas de alta demanda, en cuyo caso es posible que algunos proveedores tengan precios de aumento repentino.
- Transporte: Las actualizaciones en tiempo real se pueden usar para identificar áreas de congestión, lo que ayudará a determinar las mejores rutas alternativas.
- Elecciones: Durante la noche de las elecciones, se pueden usar datos de encuestas de datos en tiempo real para visualizar los resultados a medida que ocurren.
- Seguridad de los trabajadores: Las actualizaciones en tiempo real se pueden usar para hacer un seguimiento de los eventos a medida que ocurren, identificar áreas de alto riesgo y proporcionar conciencia de la situación a los responsables de la respuesta en el campo.
- Clima: Las actualizaciones en tiempo real se pueden usar para hacer un seguimiento del movimiento de las tormentas, identificar los peligros actuales y proporcionar advertencias y alertas.
- Entorno: Las actualizaciones en tiempo real se pueden usar para hacer un seguimiento del movimiento de las cenizas volcánicas y otros contaminantes, identificar áreas de degradación ambiental y supervisar el impacto de la actividad humana.
En todas estas situaciones, los clientes pueden obtener valor adicional si combinan sus feeds de datos en tiempo real con los límites de Google para visualizar sus datos en un mapa de forma rápida y fácil, lo que les da el superpoder de las estadísticas casi instantáneas para tomar decisiones mejor fundamentadas.
Enfoque arquitectónico para la solución
Ahora, veamos la creación de un mapa con el diseño basado en datos para visualizar datos dinámicos. Como se ilustró anteriormente, el caso de uso es un recuento de taxis de la ciudad de Nueva York visualizado por código postal. Esto puede ser útil para que los usuarios comprendan lo fácil que será pedir un taxi.
A continuación, se muestra un diagrama de arquitectura de aplicaciones del enfoque:
La solución de diseño dinámico basado en datos
Ahora, revisemos los pasos necesarios para implementar un mapa de coropletas dinámico de diseño basado en datos en tu conjunto de datos.
Esta solución te permite visualizar un conjunto de datos hipotético sobre la densidad de taxis en tiempo real en la ciudad de Nueva York por código postal. Si bien es posible que no sean datos del mundo real, tienen aplicaciones en el mundo real y te proporcionan una idea de la potencia y las capacidades de cómo se pueden visualizar los datos dinámicos en el mapa con el diseño basado en datos.
Paso 1: Elige los datos que deseas visualizar y unir a un ID de lugar de límite
El primer paso es identificar los datos que quieres mostrar y asegurarte de que coincidan con los límites de Google. Puedes realizar esta coincidencia del cliente si llamas al método de devolución de llamada findPlaceFromQuery para cada postalCode. Ten en cuenta que los códigos postales de EE.UU. tienen nombres diferentes, pero otros niveles administrativos no lo hacen. Asegúrate de seleccionar el ID de lugar correcto para tu consulta en los casos en que puedan haber resultados ambiguos.
const request = {
query: postalCode,
fields: ['place_id'],
};
function findPlaceId() {
placesService.findPlaceFromQuery(request, function (results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(results[0]);
}
});
}
Si tus datos tienen valores de latitud y longitud, también puedes usar la API de Geocoding con el filtrado de componentes para resolver esos valores de latitud y longitud con los valores de ID de lugar de la capa del elemento en la que deseas aplicar diseño. En este ejemplo, aplicarás diseño a la capa del componente POSTAL_CODE.
Paso 2: Conéctate a los datos en tiempo real
Hay varias formas de conectarse a las fuentes de datos, y la mejor implementación dependerá de tus necesidades específicas y de tu infraestructura técnica. En este caso, supongamos que tus datos se encuentran en una tabla de BigQuery con dos columnas: “zip_code” y “taxi_count”, y que realizarás la consulta a través de una Firebase Cloud Function.
async function queryNycTaxis() {
// Queries the NYC Taxis dataset.
// Create a client
const bigqueryClient = new BigQuery();
// The SQL query to run
const sqlQuery = 'SELECT zip_code, taxi_count
FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
const options = {
query: sqlQuery,
// Location must match that of the dataset(s)
// referenced in the query.
location: 'US',
};
// Run the query
const [rows] = await bigqueryClient.query(options);
rows.forEach(row => {
const postalCode = row['zip_code'];
const taxiCount = row['taxi_count'];
});
}
A continuación, deberás asegurarte de mantener los datos actualizados. Una forma de hacerlo es llamar a la consulta anterior usando un trabajador web y configurar un cronómetro para actualizar tus datos usando la función setInterval. Puedes establecer el intervalo en un valor adecuado, como actualizar el mapa cada 15 segundos. Cada vez que transcurra el intervalo, el trabajador web solicitará valores actualizados de taxiCount por código postal.
Ahora que podemos consultar y actualizar los datos, asegurémonos de que la apariencia de los polígonos del mapa refleje estos cambios.
Paso 3: Aplica diseño a tu mapa con un diseño basado en datos
Ahora que tienes los valores de datos dinámicos necesarios para crear y aplicar un estilo visual a los límites del código postal en tu instancia de Maps JavaScript como un objeto JSON, es hora de darle algo de estilo como un mapa de coropletas.
En este ejemplo, aplicarás diseño al mapa en función de la cantidad de taxis en cada código postal, lo que da a tus usuarios una idea de la densidad y la disponibilidad de taxis en su área. El estilo variará según los valores de cantidad de taxis. A las áreas con la menor cantidad de taxis se les aplicará un diseño púrpura, y el gradiente de color se moverá por rojo y naranja, y terminará en el taxi de NYC en amarillo para las áreas de mayor densidad. Para este esquema de colores, aplicarás estos valores de color a fillColor y StrokeColor. Si se establece el valor fillOpacity en 0.5, los usuarios podrán ver el mapa subyacente, y si se establece aquíOpacity en 1.0, podrán diferenciar entre los límites de polígonos del mismo color:
const featureLayer = map.getFeatureLayer(
google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
const placeFeature = featureStyleFunctionOptions.feature;
// taxiCount per (postal_code) PlaceID
const taxiCount = zips[placeFeature.placeId];
let fillColor;
let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
fillColor = "#571845";
strokeColor = "#571845";
} else if (taxiCount < 13) {
fillColor = "#900c3e";
strokeColor = "#900c3e";
} else if (taxiCount < 21) {
fillColor = "#c60039";
strokeColor = "#c60039";
} else if (taxiCount < 34) {
fillColor = "#fe5733";
strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) {
fillColor = "#fec30f";
strokeColor = "#fec30f";
}
return {
fillColor,
strokeColor,
fillOpacity: 0.5,
strokeOpacity: 1.0,
};
Conclusión
El diseño basado en datos aplicable a los límites de Google permite utilizar tus datos para definir el diseño de tu mapa en una variedad de implementaciones en diferentes sectores y segmentos. Conectarse a los datos en tiempo real te permite comunicar qué está sucediendo, dónde está sucediendo y a medida que sucede. Esta función tiene el potencial de aprovechar el valor de tus datos en tiempo real y ayudar a los usuarios a comprenderlos mejor en tiempo real, en el mundo real.
Acciones siguientes
- Mira el seminario en línea Cómo utilizar el diseño basado en datos para definir el diseño de los límites de los mapas de Google.
- Lleva tu visualización un paso más allá con los eventos de clic para el diseño basado en datos.
- Te recomendamos agregar Marcadores avanzados a tu mapa.
Colaboradores
Autor principal:
Jim Leflar | Ingeniero de soluciones de Google Maps Platform