Este documento descreve por que e como implementar o estilo dinâmico baseado em dados dos limites do Google usando a API Maps JavaScript, que é útil para vários casos de uso em setores e segmentos.
Contagem animada de táxis na cidade de Nova York por limite de código postal (simulado, em lapso de tempo):
O estilo baseado em dados é um recurso da Plataforma Google Maps que permite usar polígonos de limites administrativos do Google, aplicar estilo a esses polígonos para exibição nos mapas e combinar seus próprios dados para criar mapas personalizados e avançados que podem ser usados para análise visual e melhor compreensão dos dados. Este documento discute alguns casos de uso que explicam por que e como você pode visualizar seus dados com o estilo baseado em dados em um mapa quase em tempo real integrando feeds de dados dinâmicos.
Com o estilo baseado em dados, é possível criar mapas que mostram a distribuição geográfica dos dados, personalizar dinamicamente o estilo do polígono e interagir com os dados por eventos de clique. Esses recursos podem ser usados para criar mapas informativos e envolventes para vários casos de uso e setores.
Confira alguns exemplos de casos de uso que podem ser aplicáveis a um mapa que mostra atualizações de dados dinâmicos no estilo baseado em dados:
- Compartilhamento de caronas:as atualizações em tempo real podem ser usadas para identificar áreas de alta demanda, em que alguns provedores podem ter preços dinâmicos.
- Transporte:as atualizações em tempo real podem ser usadas para identificar áreas de congestionamento, o que ajuda a determinar as melhores rotas alternativas.
- Eleições:na noite da eleição, os dados de pesquisa em tempo real podem ser usados para visualizar os resultados à medida que acontecem.
- Segurança do trabalhador:as atualizações em tempo real podem ser usadas para acompanhar eventos em tempo real, identificar áreas de alto risco e fornecer reconhecimento situacional aos socorristas em campo.
- Clima:as atualizações em tempo real podem ser usadas para acompanhar o movimento de tempestades, identificar perigos atuais e fornecer avisos e alertas.
- Ambiente:as atualizações em tempo real podem ser usadas para acompanhar o movimento de cinzas vulcânicas e outros poluentes, identificar áreas de degradação ambiental e monitorar o impacto da atividade humana.
Em todas essas situações, os clientes podem desbloquear valor adicional combinando os feeds de dados em tempo real com os limites do Google para visualizar os dados em um mapa de forma rápida e fácil, oferecendo a eles o superpoder de insights quase instantâneos para uma tomada de decisão mais bem informada.
Abordagem arquitetônica da solução
Agora vamos criar um mapa usando o estilo baseado em dados para visualizar dados dinâmicos. Como ilustrado anteriormente, o caso de uso é uma contagem de táxis de Nova York visualizada por código postal. Isso pode ser útil para os usuários entenderem a facilidade de chamar um táxi.
Confira um diagrama de arquitetura de aplicativo da abordagem:
A solução de estilo dinâmico baseado em dados
Agora vamos analisar as etapas necessárias para implementar um mapa coroplético de estilo dinâmico baseado em dados para seu conjunto de dados.
Essa solução permite visualizar um conjunto de dados hipotético de densidade de táxis em tempo real na cidade de Nova York por código postal. Embora esses dados não sejam reais, eles têm aplicações no mundo real e oferecem uma ideia do poder e dos recursos de como os dados dinâmicos podem ser visualizados no mapa com o estilo baseado em dados.
Etapa 1: escolher os dados a serem visualizados e unir a um ID de lugar de limite
A primeira etapa é identificar os dados que você quer mostrar e garantir que eles possam ser correspondidos aos limites do Google. Você pode realizar essa correspondência no lado do cliente chamando o método de callback findPlaceFromQuery para cada postalCode. Observação: os códigos postais nos EUA têm nomes distintos, mas outros níveis administrativos não. É recomendável selecionar o ID de lugar correto para sua consulta em casos em que possa haver resultados ambíguos.
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]);
}
});
}
Se os dados tiverem valores de latitude e longitude, você também poderá usar a API Geocoding com filtragem de componentes para resolver esses valores de lat/lon para valores de ID de lugar da camada de recursos que você quer estilizar. Neste exemplo, você vai estilizar a camada de recursos POSTAL_CODE.
Etapa 2: conectar a dados em tempo real
Há várias maneiras de se conectar a fontes de dados, e a melhor implementação vai depender das suas necessidades específicas e da infraestrutura técnica. Nesse caso, vamos supor que seus dados estejam em uma tabela do BigQuery com duas colunas: "zip_code" e "taxi_count", e você vai consultá-los usando uma função do Firebase Cloud.
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'];
});
}
Em seguida, é necessário manter os dados atualizados. Uma maneira de fazer isso é chamar a consulta acima usando um web worker e definir um timer para atualizar os dados usando a função setInterval. Você pode definir o intervalo para um valor adequado, como atualizar o mapa a cada 15 segundos. Cada vez que o tempo de intervalo passar, o worker da Web vai solicitar valores de taxiCount atualizados por postalCode.
Agora que podemos consultar e atualizar os dados, vamos garantir que a aparência dos polígonos do mapa reflita essas mudanças.
Etapa 3: estilizar o mapa com o estilo baseado em dados
Agora que você tem os valores de dados dinâmicos necessários para criar e aplicar um estilo visual aos limites do código postal na instância da API Maps JavaScript como um objeto JSON, é hora de dar um estilo a ele como um mapa coroplético.
Neste exemplo, você vai estilizar o mapa com base no número de táxis em cada código postal, oferecendo aos usuários uma ideia da densidade e disponibilidade de táxis na área deles. O estilo vai variar dependendo dos valores de contagem de táxis. As áreas com menos táxis terão um estilo roxo aplicado, e o gradiente de cores vai passar por vermelho, laranja e terminar em amarelo de táxi de Nova York para as áreas de maior densidade. Para esse esquema de cores, você vai aplicar esses valores de cor a fillColor e strokeColor. Definir fillOpacity como 0,5 permite que os usuários vejam o mapa subjacente, e definir strokeOpacity como 1,0 permite que eles diferenciem os limites de polígonos da mesma cor:
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,
};
Conclusão
O estilo baseado em dados para limites do Google permite usar seus dados para estilizar o mapa para várias implementações em setores e segmentos. A conexão com dados em tempo real permite comunicar o que está acontecendo, onde está acontecendo e como está acontecendo. Esse recurso tem o potencial de desbloquear o valor dos dados em tempo real e ajudar os usuários a entender melhor em tempo real, no mundo real.
Próximas ações
- Assista ao webinar Como usar o estilo baseado em dados para estilizar os limites do mapa do Google.
- Leve sua visualização um passo adiante com eventos de clique para o estilo baseado em dados.
- Considere adicionar marcadores avançados ao mapa.
Colaboradores
Autor principal:
Jim Leflar | Engenheiro de soluções da Plataforma Google Maps