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.
Animação das contagens de táxis na cidade de Nova York por limite de código postal (simulação, tempo transcorrido):
A estilização baseada em dados é um recurso da Plataforma Google Maps que permite usar os polígonos de limites administrativos do Google, estilizar esses polígonos para exibição em mapas e combinar seus próprios dados para criar mapas detalhados e personalizados 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 é possível 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, você pode 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 envolventes para uma variedade de casos de uso e setores.
Confira alguns exemplos de casos de uso que podem ser aplicados a um mapa que exibe atualizações dinâmicas de dados no estilo baseado em dados:
- Compartilhamento de viagens:é possível usar atualizações em tempo real para identificar áreas com alta demanda. Nesse caso, alguns provedores podem ter preços fixos.
- 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:na noite da eleição, dados de sondagem em tempo real podem ser usados para visualizar os resultados em tempo real.
- Segurança dos trabalhadores:atualizações em tempo real podem ser usadas para rastrear eventos em tempo real, identificar áreas de alto risco e fornecer conscientização da situação aos socorristas em campo.
- Clima:é possível usar atualizações em tempo real para rastrear o movimento de tempestades, identificar perigos no momento e fornecer alertas e alertas.
- Meio 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 em um mapa de forma rápida e fácil. Assim, eles têm o superpoder dos insights quase instantâneos para tomar decisões melhores.
Abordagem arquitetônica da solução
Agora, vamos ver como criar um mapa usando o estilo baseado em dados para visualizar dados dinâmicos. Conforme ilustrado anteriormente, o caso de uso é uma contagem de táxis de Nova York visualizados por código postal. Isso pode ser útil para os usuários entenderem como é fácil chamar um táxi.
Confira um diagrama da arquitetura de aplicativo da abordagem:
A solução de estilo baseado em dados dinâmicos
Agora vamos ver as etapas necessárias para implementar um mapa de coroplético dinâmico de estilo baseado em dados no seu conjunto de dados.
Com essa solução, é possível visualizar um conjunto de dados hipotético da densidade de táxis em tempo real na cidade de Nova York por código postal. Embora não sejam dados reais, eles têm aplicações reais e oferecem uma noção da eficiência e capacidades de como os dados dinâmicos podem ser visualizados no mapa com o estilo baseado em dados.
Etapa 1: escolher os dados para visualizar e mesclar a um ID de lugar limite
A primeira etapa é identificar os dados que você quer exibir e garantir que eles correspondam aos limites do Google. Você pode realizar essa correspondência no lado do cliente chamando o método de callback findPlaceFromQuery para cada código postal. Os códigos postais nos EUA têm nomes diferentes, mas outros níveis administrativos não têm. É importante selecionar o ID de lugar correto para a consulta nos casos em que pode 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 seus dados têm valores de latitude e longitude, você também pode usar a API Geocoding com filtragem de componentes para resolver esses valores de latitude/longitude como valores de ID do lugar da camada de elementos que quer estilizar. Neste exemplo, você definirá o estilo da camada de elementos POSTAL_CODE.
Etapa 2: conectar-se aos 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 sua 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á por meio de uma função do Cloud do Firebase.
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, mantenha 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 apropriado, como atualizar o mapa a cada 15 segundos. Sempre que o tempo do intervalo passar, o web worker solicitará valores de taxiCount atualizados por código postal.
Agora que podemos consultar e atualizar os dados, vamos garantir que a aparência dos polígonos do mapa reflitam essas mudanças.
Etapa 3: estilizar seu 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 CEP na instância do Maps JavaScript como um objeto JSON, é hora de atribuir um estilo a ela, como um mapa de 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 disponibilidade de táxis na área deles. O estilo varia de acordo com os valores de contagem dos táxis. As áreas com menos táxis terão um estilo roxo aplicado, e o gradiente de cor passará por vermelho, laranja e terminará em amarelo de Nova York nas áreas de maior densidade. Para este 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 configuração de strokeOpacity como 1.0 permite diferenciar 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
Com o estilo baseado em dados para os limites do Google, você pode usar seus dados para estilizar seu mapa em diversas implementações em vários setores e segmentos. Conectar-se a dados em tempo real permite comunicar o que está acontecendo, onde está acontecendo e como acontece. Esse recurso tem o potencial de extrair o valor dos seus dados em tempo real e ajudar os 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 definir o estilo dos limites do mapa do Google.
- Aumente ainda mais sua visualização com eventos de clique para estilização baseada em dados.
- Considere adicionar Marcadores Avançados ao seu mapa.
Colaboradores
Autor principal:
Jim Leflar | Engenheiro de soluções da Plataforma Google Maps