Mapas de calor (HeatMaps) são uma excelente forma de visualizar a concentração de informações em determinadas regiões de um mapa.
Em vez de exibir apenas marcadores individuais, o mapa de calor utiliza cores e diferentes níveis de intensidade para destacar áreas com maior ou menor quantidade de ocorrências.
Com o TMS FNC Maps, podemos adicionar esse tipo de visualização às nossas aplicações Delphi de maneira simples, utilizando coordenadas geográficas e o método AddHeatMap.
Onde podemos utilizar HeatMaps?
Os mapas de calor podem ser aplicados em diversos tipos de sistemas. Alguns exemplos são:
- Identificação das regiões com maior número de vendas;
- Visualização da concentração de clientes;
- Pontos com maior quantidade de entregas;
- Regiões com maior ocorrência de chamados técnicos;
- Áreas com maior incidência de acidentes;
- Monitoramento de ocorrências policiais;
- Concentração de acessos ou dispositivos;
- Análise de movimentação de veículos;
- Identificação de locais com maior procura por determinados serviços.
Em um sistema de gestão comercial, por exemplo, podemos utilizar o endereço dos clientes para gerar as coordenadas e apresentar no mapa as regiões com maior concentração de vendas.
Criando um HeatMap com TMS FNC Maps
Para criar o mapa de calor, primeiro precisamos montar um array do tipo TTMSFNCMapsCoordinateRecArray.
Cada posição desse array representa um ponto que será apresentado no mapa.
Veja um exemplo:
procedure TForm1.CriarMapaDeCalor;
var
LCoordenadas: TTMSFNCMapsCoordinateRecArray;
LHeatMap: TTMSFNCMapsHeatMap;
begin
SetLength(LCoordenadas, 4);
LCoordenadas[0].Latitude := -23.550520;
LCoordenadas[0].Longitude := -46.633308;
LCoordenadas[0].Weight := 1;
LCoordenadas[1].Latitude := -23.551850;
LCoordenadas[1].Longitude := -46.634700;
LCoordenadas[1].Weight := 2;
LCoordenadas[2].Latitude := -23.553100;
LCoordenadas[2].Longitude := -46.632200;
LCoordenadas[2].Weight := 3;
LCoordenadas[3].Latitude := -23.549200;
LCoordenadas[3].Longitude := -46.631500;
LCoordenadas[3].Weight := 1;
TMSFNCGoogleMaps1.BeginUpdate;
try
LHeatMap := TMSFNCGoogleMaps1.AddHeatMap(LCoordenadas);
LHeatMap.Opacity := 1;
LHeatMap.GradientStartColor := gcGreen;
LHeatMap.GradientMidColor := gcYellow;
LHeatMap.GradientEndColor := gcRed;
finally
TMSFNCGoogleMaps1.EndUpdate;
end;
end;O método AddHeatMap recebe o array de coordenadas e retorna um objeto do tipo TTMSFNCMapsHeatMap, que pode ser utilizado para personalizar a aparência do mapa de calor.
Entendendo o peso de cada coordenada
A propriedade Weight é opcional e define a intensidade de cada ponto. No exemplo anterior, utilizamos pesos diferentes:
LCoordenadas[0].Weight := 1;
LCoordenadas[1].Weight := 2;
LCoordenadas[2].Weight := 3;A coordenada com peso 3 terá uma intensidade maior do que aquela configurada com peso 1. Esse recurso é muito útil quando os dados representam quantidades diferentes.
Também podemos utilizar como peso:
- Quantidade de vendas;
- Valor faturado;
- Número de clientes;
- Quantidade de entregas;
- Número de chamados;
- Quantidade de ocorrências;
- Frequência de visitas.
Personalizando as cores
O TMS FNC Maps permite personalizar as três principais cores utilizadas no gradiente:
LHeatMap.GradientStartColor := gcGreen;
LHeatMap.GradientMidColor := gcYellow;
LHeatMap.GradientEndColor := gcRed;Nesse exemplo, temos:
- Verde para as regiões de menor intensidade;
- Amarelo para a intensidade intermediária;
- Vermelho para as regiões com maior intensidade.
Também podemos alterar a transparência por meio da propriedade Opacity:
LHeatMap.Opacity := 0.8;Valores menores tornam o HeatMap mais transparente, permitindo visualizar melhor os detalhes do mapa exibido abaixo dele.
As propriedades de peso, opacidade e cores do gradiente permitem adaptar o mapa de calor às necessidades visuais e aos dados apresentados pela aplicação.
Adicionando dados dinamicamente
Na maioria dos projetos, as coordenadas utilizadas no mapa de calor serão carregadas de um banco de dados.
Podemos percorrer um DataSet e preencher o array dinamicamente:
procedure TForm1.CarregarHeatMapDoDataSet;
var
LCoordenadas: TTMSFNCMapsCoordinateRecArray;
LHeatMap: TTMSFNCMapsHeatMap;
LIndice: Integer;
begin
SetLength(LCoordenadas, QueryLocais.RecordCount);
LIndice := 0;
QueryLocais.First;
while not QueryLocais.Eof do
begin
LCoordenadas[LIndice].Latitude := QueryLocais.FieldByName('latitude').AsFloat;
LCoordenadas[LIndice].Longitude := QueryLocais.FieldByName('longitude').AsFloat;
LCoordenadas[LIndice].Weight := QueryLocais.FieldByName('quantidade').AsFloat;
Inc(LIndice);
QueryLocais.Next;
end;
TMSFNCGoogleMaps1.BeginUpdate;
try
LHeatMap := TMSFNCGoogleMaps1.AddHeatMap(LCoordenadas);
LHeatMap.Opacity := 0.8;
LHeatMap.GradientStartColor := gcGreen;
LHeatMap.GradientMidColor := gcYellow;
LHeatMap.GradientEndColor := gcRed;
finally
TMSFNCGoogleMaps1.EndUpdate;
end;
end;Assim, o HeatMap pode refletir diretamente os dados reais da aplicação.
Melhorando o desempenho
Ao adicionar vários pontos ao mapa, é recomendado utilizar os métodos BeginUpdate e EndUpdate.
TMSFNCGoogleMaps1.BeginUpdate;
try
// Inclusão e configuração dos elementos
finally
TMSFNCGoogleMaps1.EndUpdate;
end;Esses métodos agrupam as alterações realizadas no mapa, reduzindo a quantidade de chamadas individuais e melhorando o desempenho, principalmente quando trabalhamos com grandes volumes de coordenadas.
Serviços de mapas compatíveis
O recurso de HeatMaps está disponível nos seguintes componentes:
- TTMSFNCGoogleMaps; (Google Maps)
- TTMSFNCHERE; (HERE Maps)
- TTMSFNCOpenLayers;(OpenLayers)
- TTMSFNCLeaflet.(Leaflet)
Isso permite utilizar o recurso com diferentes serviços de mapas, escolhendo aquele que melhor atende às necessidades do projeto.
Uma das vantagens do TMS FNC Maps é justamente oferecer uma camada de abstração para trabalhar com diferentes serviços. Além disso, os componentes FNC podem ser utilizados em diferentes frameworks e plataformas, incluindo aplicações VCL, FireMonkey e TMS WEB Core. O produto apresenta compatibilidade com Windows, macOS, iOS, Android, Linux e os principais navegadores.
▶️Veja o exemplo em vídeo
No canal da Code4Delphi, temos um vídeo mostrando na prática como utilizar mapas de calor com Delphi e TMS FNC Maps.
No exemplo, demonstramos a criação do HeatMap, a inclusão das coordenadas e a personalização das cores utilizadas para representar a intensidade dos pontos. Assista ao vídeo: Mapa de calor com Delphi e TMS FNC Maps
Acesse também o repositório com o código fonte completo do exemplo: https://github.com/Code4Delphi/TMS-FNC-Maps/tree/master/Samples/FNCMapsHeatmaps
Conheça o TMS FNC Maps
O TMS FNC Maps é um conjunto de componentes para integrar mapas, geocodificação, rotas, localização, elevação, cálculo de pedágios e diversos outros recursos geográficos às aplicações Delphi.
Além dos HeatMaps, podemos trabalhar com:
- Marcadores;
- Polígonos;
- Polylines;
- Círculos;
- Retângulos;
- Rotas;
- Arquivos GPX e GeoJSON;
- Geocodificação de endereços;
- Pesquisa de locais;
- Mapas estáticos;
- Diferentes provedores de mapas.
🔗 Links úteis
Saiba mais no site oficial: TMS FNC Maps
Documentação oficial sobre HeatMaps: Documentação do TTMSFNCMaps – HeatMaps
A TMS Software também publicou um conteúdo específico sobre a criação de HeatMaps: Creating Heatmaps in TMS FNC Maps for Delphi
🏷️ Cupom de desconto
Você pode adquirir os componentes da TMS Software utilizando o cupom exclusivo da Code4Delphi: 2026Code4Delphi30
O cupom oferece 30% de desconto nos componentes participantes. A quantidade de utilizações é limitada.
Conclusão
Os mapas de calor transformam grandes quantidades de coordenadas em uma visualização simples e fácil de interpretar.
Com poucas linhas de código, o TMS FNC Maps permite adicionar um HeatMap, definir pesos diferentes para cada localização e personalizar as cores e a transparência da visualização.
