Neste documento, descrevemos por que e como implementar o estilo baseado em dados dinâmico dos limites do Google usando a API Maps JavaScript, que é útil para vários casos de uso em setores e segmentos diferentes.
Contagem de táxis animados em Nova York por limite de CEP (simulação, tempo decorrido):
O estilo baseado em dados é um recurso da Plataforma Google Maps que permite usar polígonos de limites administrativos do Google, estilizar esses polígonos para mostrar nos mapas e combinar seus próprios dados para criar mapas avançados e personalizados que podem ser usados para análise visual e melhor compreensão dos dados. Neste documento, abordaremos 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 seus dados por meio de eventos de clique. Esses recursos podem ser usados para criar mapas informativos e interessantes em diversos casos de uso e setores.
Veja alguns exemplos de casos de uso que podem ser aplicados a um mapa que exibe atualizações de dados dinâmicos no estilo com base em dados:
- Transporte por aplicativo:as atualizações em tempo real podem ser usadas para identificar áreas com alta demanda. Nesse caso, alguns provedores podem ter preços dinâmicos.
- Transporte:atualizações em tempo real podem ser usadas para identificar áreas de congestionamento, o que ajuda a determinar os melhores trajetos alternativos.
- Eleições: no noite das eleições, dados de pesquisas de dados em tempo real podem ser usados para visualizar os resultados à medida que eles acontecem.
- Segurança dos trabalhadores:as atualizações em tempo real podem ser usadas para rastrear eventos que acontecem em tempo real, identificar áreas de alto risco e proporcionar conscientização situacional aos socorristas em campo.
- Clima:atualizações em tempo real podem ser usadas para rastrear o movimento de tempestades, identificar perigos atuais e fornecer alertas e alertas.
- Ambiente:atualizações em tempo real podem ser usadas para rastrear 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 agregar mais valor combinando os feeds de dados em tempo real com os limites do Google para visualizar os dados com rapidez e facilidade em um mapa. Com isso, eles têm o superpoder dos insights quase instantâneos para uma tomada de decisões mais bem informada.
Abordagem arquitetônica da solução
Agora vamos mostrar como criar um mapa usando o estilo orientado a dados para visualizar dados dinâmicos. Conforme 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 como é fácil chamar um táxi.
Veja um diagrama da arquitetura do aplicativo da abordagem:
A solução de estilo dinâmico orientado por dados
Agora vamos mostrar as etapas necessárias para implementar um mapa coroplético de estilo dinâmico baseado em dados no 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 não sejam dados reais, eles têm aplicações reais e oferecem uma noção do poder e dos recursos de como os dados dinâmicos podem ser visualizados no mapa com o estilo orientado a dados.
Etapa 1: escolher os dados que serão visualizados e associados a um ID de lugar de limite
A primeira etapa é identificar os dados que você quer mostrar e garantir que eles correspondam aos limites do Google. Para fazer essa correspondência no lado do cliente, chame o método de callback findPlaceFromQuery para cada CEPCode. Os códigos postais nos EUA têm nomes diferentes, mas os outros níveis administrativos não. Você precisa selecionar o ID de lugar correto para sua consulta nos 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, também será possível usar a API Geocoding com filtragem de componentes a fim de resolver esses valores de latitude/longitude para o ID do lugar da camada de elementos que você quer estilizar. Neste exemplo, você estilizará a camada de elemento POSTAL_CODE.
Etapa 2: conecte-se a dados em tempo real
Há várias maneiras de se conectar a fontes de dados, e a melhor implementação dependerá das suas necessidades específicas e da infraestrutura técnica. Neste caso, vamos supor que seus dados estejam em uma tabela do BigQuery com duas colunas: "zip_code" e "taxi_count", e você os consultará 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, certifique-se de 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 com um valor adequado, como atualizar o mapa a cada 15 segundos. Sempre que o tempo de intervalo passar, o web worker solicitará valores atualizados de taxiCount 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: personalizar seu mapa com a estilização baseada em dados
Agora que você tem os valores de dados dinâmicos necessários para criar e aplicar um estilo visual aos limites de códigos postais na sua instância do Maps JavaScript como um objeto JSON, é hora de dar a eles um estilo como um mapa coroplético.
Neste exemplo, você estilizará o mapa com base no número de táxis em cada código postal, o que dá aos usuários uma ideia da densidade e da disponibilidade de táxis na área. O estilo varia de acordo com os valores da contagem dos táxis. As áreas com o menor número de táxis terão um estilo roxo, e o gradiente de cor vai passar de vermelho e laranja e terminar em amarelo de táxi de Nova York para as áreas de maior densidade. Para esse esquema de cores, você aplicará esses valores de cor a fillColor e strokeColor. A definição de fillOpacity como 0.5 permite que os usuários vejam o mapa subjacente, e a definição de strokeOpacity como 1.0 permite que eles diferenciem os limites de polígonos de cores iguais:
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
Com o estilo baseado em dados para limites do Google, é possível usar seus dados para estilizar seu mapa em diversas implementações em diferentes setores e segmentos. Ao se conectar a dados em tempo real, você pode comunicar o que está acontecendo, onde estão acontecendo e conforme eles estão acontecendo. Esse recurso tem o potencial de revelar o valor dos seus dados em tempo real e ajudar seus usuários a entendê-los melhor em tempo real, no mundo real.
Próximas ações
- Assista ao webinar Como usar o estilo baseado em dados para estilizar limites de mapas do Google.
- Aprimore ainda mais sua visualização com os eventos de clique para definir 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