En este documento, se describe por qué y cómo implementar el diseño dinámico basado en datos de los límites de Google con la API de Maps JavaScript, que resulta útil para una variedad de casos de uso en distintas industrias y segmentos.
Recuentos de taxis animados en la ciudad de Nueva York según el límite del código postal (simulado, inactivo):
El diseño basado en datos es una función de Google Maps Platform que te permite utilizar los polígonos de límite administrativos de Google, aplicar diseño a dichos polígonos para que se muestren en tus mapas y combinar tus propios datos para crear mapas enriquecidos y personalizados que se pueden utilizar para el análisis visual y una mejor comprensión de los datos. En este documento, se analizarán algunos casos de uso en los que se explican por qué y cómo puedes visualizar tus datos con un 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, personalizar dinámicamente el diseño de los polígonos e interactuar con tus datos a través de los eventos de clic. Estas funciones pueden utilizarse para crear mapas informativos y atractivos para una variedad de industrias y casos de uso.
Estos son algunos ejemplos de casos de uso que podrían aplicarse a un mapa en el que se muestran actualizaciones de datos dinámicos sobre el diseño basado en datos:
- Transporte compartido: Las actualizaciones en tiempo real se pueden utilizar para identificar áreas de alta demanda, en cuyo caso algunos proveedores podrían tener precios con aumento.
- 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 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 se desarrollan en el mismo momento, identificar áreas de alto riesgo y proporcionar conocimiento 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 peligros actuales y proporcionar advertencias y alertas.
- Entorno: Las actualizaciones en tiempo real se pueden usar para hacer un seguimiento del movimiento de 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 combinando sus feeds de datos en tiempo real con los límites de Google para visualizar rápida y fácilmente sus datos en un mapa, lo que les da el superpoder de las estadísticas casi instantáneas para una toma de decisiones mejor fundamentada.
Enfoque de la arquitectura para la solución
Ahora, veamos cómo crear 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 que se visualiza por código postal. Esto puede ser útil para que los usuarios entiendan lo fácil que será pedir un taxi.
Este es un diagrama de la arquitectura de la aplicación del enfoque:
La solución de diseño dinámico basado en datos
Ahora, revisemos los pasos necesarios para implementar un mapa de coropletas de diseño dinámico 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. Aunque pueden no ser datos del mundo real, tienen aplicaciones reales y te dan una idea del poder y las capacidades de cómo los datos dinámicos se pueden visualizar en el mapa con un 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 lado del cliente llamando al método de devolución de llamada findPlaceFromQuery para cada código postal. Ten en cuenta que los códigos postales de EE.UU. tienen nombres distintos, pero no los de otros niveles administrativos. En los casos en que podría haber resultados ambiguos, te recomendamos que te asegures de seleccionar el ID de lugar correcto para tu consulta.
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 en valores de ID de lugar de la capa de componentes a la que te interesa aplicar ajustes de diseño. En este ejemplo, aplicarás diseño a la capa de componentes POSTAL_CODE.
Paso 2: Conéctate a datos en tiempo real
Existen diversas maneras de conectarse a las fuentes de datos, y la mejor implementación dependerá de tus necesidades específicas y 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 los consultarás 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 con un trabajador web y establecer un temporizador para actualizar tus datos usando la función setInterval. Puedes establecer el intervalo en un valor adecuado; por ejemplo, actualizar el mapa cada 15 segundos. Cada vez que pase el tiempo de intervalo, el trabajador web solicitará valores de taxiCount actualizados por código postal.
Ahora que podemos consultar y actualizar los datos, asegurémonos de que el aspecto de los polígonos del mapa refleje estos cambios.
Paso 3: Dale estilo 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 JavaScript de Maps como un objeto JSON, es hora de asignarle cierto estilo como un mapa de coropletas.
En este ejemplo, aplicarás el diseño del mapa en función de la cantidad de taxis en cada código postal, lo que brindará a los usuarios una idea de la densidad y disponibilidad de taxis en su área. El estilo variará según los valores de la cantidad de taxis. Las áreas con la menor cantidad de taxis tendrán un diseño púrpura aplicado, y el gradiente de color se moverá a través del rojo, el naranja y terminará en el amarillo de los taxis de la ciudad de Nueva York para las áreas con mayor densidad. Para este esquema de colores, aplicarás estos valores de color a fillColor y outlineColor. Si estableces fillOpacity en 0.5, los usuarios podrán ver el mapa subyacente y, si estableces buscasOpacity en 1.0, podrás diferenciar 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 límites de Google te permite usar tus datos para diseñar tu mapa y adaptarlo a una variedad de implementaciones en diferentes sectores y segmentos. Conectarse con datos en tiempo real te permite comunicar qué está sucediendo, dónde ocurre y a medida que sucede. Esta función tiene el potencial de desbloquear el valor de tus datos en tiempo real y ayudar a tus usuarios a comprenderlos mejor en tiempo real, en el mundo real.
Acciones siguientes
- Mira el seminario en línea Cómo usar el diseño basado en datos para definir los límites de los mapas de Google.
- Lleva tu visualización un paso más allá con los eventos de clic para un diseño basado en datos.
- Te recomendamos que agregues Marcadores avanzados al mapa.
Colaboradores
Autor principal:
Jim Leflar | Ingeniero de soluciones de Google Maps Platform