{"id":1744,"date":"2026-07-10T17:45:07","date_gmt":"2026-07-10T20:45:07","guid":{"rendered":"https:\/\/code4delphi.com.br\/blog\/?p=1744"},"modified":"2026-07-12T17:43:36","modified_gmt":"2026-07-12T20:43:36","slug":"mapas-de-calor-no-delphi","status":"publish","type":"post","link":"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/","title":{"rendered":"Mapas de calor no Delphi"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Mapas de calor (<strong>HeatMaps<\/strong>) s\u00e3o uma excelente forma de visualizar a concentra\u00e7\u00e3o de informa\u00e7\u00f5es em determinadas regi\u00f5es de um mapa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em vez de exibir apenas marcadores individuais, o mapa de calor utiliza cores e diferentes n\u00edveis de intensidade para destacar \u00e1reas com maior ou menor quantidade de ocorr\u00eancias.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com o <strong>TMS FNC Maps<\/strong>, podemos adicionar esse tipo de visualiza\u00e7\u00e3o \u00e0s nossas aplica\u00e7\u00f5es Delphi de maneira simples, utilizando coordenadas geogr\u00e1ficas e o m\u00e9todo AddHeatMap.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"745\" height=\"756\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/mapa-calor-delphi.png\" alt=\"\" class=\"wp-image-1762\" style=\"aspect-ratio:0.9854695293862503;width:303px;height:auto\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/mapa-calor-delphi.png 745w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/mapa-calor-delphi-296x300.png 296w\" sizes=\"auto, (max-width: 745px) 100vw, 745px\" \/><\/figure>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Sum\u00e1rio<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Alternar tabela de conte\u00fado\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#Onde_podemos_utilizar_HeatMaps\" >Onde podemos utilizar HeatMaps?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#Criando_um_HeatMap_com_TMS_FNC_Maps\" >Criando um HeatMap com TMS FNC Maps<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#Entendendo_o_peso_de_cada_coordenada\" >Entendendo o peso de cada coordenada<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#Personalizando_as_cores\" >Personalizando as cores<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#Adicionando_dados_dinamicamente\" >Adicionando dados dinamicamente<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#Melhorando_o_desempenho\" >Melhorando o desempenho<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#Servicos_de_mapas_compativeis\" >Servi\u00e7os de mapas compat\u00edveis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#%E2%96%B6%EF%B8%8FVeja_o_exemplo_em_video\" >\u25b6\ufe0fVeja o exemplo em v\u00eddeo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#Conheca_o_TMS_FNC_Maps\" >Conhe\u00e7a o TMS FNC Maps<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#%F0%9F%94%97_Links_uteis\" >\ud83d\udd17 Links \u00fateis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#%F0%9F%8F%B7%EF%B8%8F_Cupom_de_desconto\" >\ud83c\udff7\ufe0f Cupom de desconto<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/code4delphi.com.br\/blog\/mapas-de-calor-no-delphi\/#Conclusao\" >Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Onde_podemos_utilizar_HeatMaps\"><\/span>Onde podemos utilizar HeatMaps?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Os mapas de calor podem ser aplicados em diversos tipos de sistemas. Alguns exemplos s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Identifica\u00e7\u00e3o das regi\u00f5es com maior n\u00famero de vendas;<\/li>\n\n\n\n<li>Visualiza\u00e7\u00e3o da concentra\u00e7\u00e3o de clientes;<\/li>\n\n\n\n<li>Pontos com maior quantidade de entregas;<\/li>\n\n\n\n<li>Regi\u00f5es com maior ocorr\u00eancia de chamados t\u00e9cnicos;<\/li>\n\n\n\n<li>\u00c1reas com maior incid\u00eancia de acidentes;<\/li>\n\n\n\n<li>Monitoramento de ocorr\u00eancias policiais;<\/li>\n\n\n\n<li>Concentra\u00e7\u00e3o de acessos ou dispositivos;<\/li>\n\n\n\n<li>An\u00e1lise de movimenta\u00e7\u00e3o de ve\u00edculos;<\/li>\n\n\n\n<li>Identifica\u00e7\u00e3o de locais com maior procura por determinados servi\u00e7os.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Em um sistema de gest\u00e3o comercial, por exemplo, podemos utilizar o endere\u00e7o dos clientes para gerar as coordenadas e apresentar no mapa as regi\u00f5es com maior concentra\u00e7\u00e3o de vendas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Criando_um_HeatMap_com_TMS_FNC_Maps\"><\/span>Criando um HeatMap com TMS FNC Maps<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para criar o mapa de calor, primeiro precisamos montar um array do tipo <code>TTMSFNCMapsCoordinateRecArray<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cada posi\u00e7\u00e3o desse array representa um ponto que ser\u00e1 apresentado no mapa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veja um exemplo:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>procedure TForm1.CriarMapaDeCalor;\nvar\n  LCoordenadas: TTMSFNCMapsCoordinateRecArray;\n  LHeatMap: TTMSFNCMapsHeatMap;\nbegin\n  SetLength(LCoordenadas, 4);\n\n  LCoordenadas&#91;0&#93;.Latitude := -23.550520;\n  LCoordenadas&#91;0&#93;.Longitude := -46.633308;\n  LCoordenadas&#91;0&#93;.Weight := 1;\n\n  LCoordenadas&#91;1&#93;.Latitude := -23.551850;\n  LCoordenadas&#91;1&#93;.Longitude := -46.634700;\n  LCoordenadas&#91;1&#93;.Weight := 2;\n\n  LCoordenadas&#91;2&#93;.Latitude := -23.553100;\n  LCoordenadas&#91;2&#93;.Longitude := -46.632200;\n  LCoordenadas&#91;2&#93;.Weight := 3;\n\n  LCoordenadas&#91;3&#93;.Latitude := -23.549200;\n  LCoordenadas&#91;3&#93;.Longitude := -46.631500;\n  LCoordenadas&#91;3&#93;.Weight := 1;\n\n  TMSFNCGoogleMaps1.BeginUpdate;\n  try\n    LHeatMap := TMSFNCGoogleMaps1.AddHeatMap(LCoordenadas);\n    LHeatMap.Opacity := 1;\n    LHeatMap.GradientStartColor := gcGreen;\n    LHeatMap.GradientMidColor := gcYellow;\n    LHeatMap.GradientEndColor := gcRed;\n  finally\n    TMSFNCGoogleMaps1.EndUpdate;\n  end;\nend;<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F286C4\">procedure<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">TForm1.CriarMapaDeCalor<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">var<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas: TTMSFNCMapsCoordinateRecArray;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LHeatMap: TTMSFNCMapsHeatMap;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">begin<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  SetLength(LCoordenadas, <\/span><span style=\"color: #BF9EEE\">4<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\">&#93;.Latitude := -<\/span><span style=\"color: #BF9EEE\">23.550520<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\">&#93;.Longitude := -<\/span><span style=\"color: #BF9EEE\">46.633308<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\">&#93;.Weight := <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">&#93;.Latitude := -<\/span><span style=\"color: #BF9EEE\">23.551850<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">&#93;.Longitude := -<\/span><span style=\"color: #BF9EEE\">46.634700<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">&#93;.Weight := <\/span><span style=\"color: #BF9EEE\">2<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">2<\/span><span style=\"color: #F6F6F4\">&#93;.Latitude := -<\/span><span style=\"color: #BF9EEE\">23.553100<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">2<\/span><span style=\"color: #F6F6F4\">&#93;.Longitude := -<\/span><span style=\"color: #BF9EEE\">46.632200<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">2<\/span><span style=\"color: #F6F6F4\">&#93;.Weight := <\/span><span style=\"color: #BF9EEE\">3<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">3<\/span><span style=\"color: #F6F6F4\">&#93;.Latitude := -<\/span><span style=\"color: #BF9EEE\">23.549200<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">3<\/span><span style=\"color: #F6F6F4\">&#93;.Longitude := -<\/span><span style=\"color: #BF9EEE\">46.631500<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">3<\/span><span style=\"color: #F6F6F4\">&#93;.Weight := <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  TMSFNCGoogleMaps1.BeginUpdate;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">try<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LHeatMap := TMSFNCGoogleMaps1.AddHeatMap(LCoordenadas);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LHeatMap.Opacity := <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LHeatMap.GradientStartColor := gcGreen;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LHeatMap.GradientMidColor := gcYellow;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LHeatMap.GradientEndColor := gcRed;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">finally<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    TMSFNCGoogleMaps1.EndUpdate;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">end<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">end<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">O m\u00e9todo <strong>AddHeatMap <\/strong>recebe o array de coordenadas e retorna um objeto do tipo <strong>TTMSFNCMapsHeatMap<\/strong>, que pode ser utilizado para personalizar a apar\u00eancia do mapa de calor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Entendendo_o_peso_de_cada_coordenada\"><\/span>Entendendo o peso de cada coordenada<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A propriedade Weight \u00e9 opcional e define a intensidade de cada ponto. No exemplo anterior, utilizamos pesos diferentes:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>LCoordenadas&#91;0&#93;.Weight := 1;\nLCoordenadas&#91;1&#93;.Weight := 2;\nLCoordenadas&#91;2&#93;.Weight := 3;<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F6F6F4\">LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\">&#93;.Weight := <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">&#93;.Weight := <\/span><span style=\"color: #BF9EEE\">2<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">LCoordenadas&#91;<\/span><span style=\"color: #BF9EEE\">2<\/span><span style=\"color: #F6F6F4\">&#93;.Weight := <\/span><span style=\"color: #BF9EEE\">3<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A coordenada com<strong> peso 3<\/strong> ter\u00e1 uma intensidade maior do que aquela configurada com <strong>peso 1<\/strong>. Esse recurso \u00e9 muito \u00fatil quando os dados representam quantidades diferentes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m podemos utilizar como peso:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quantidade de vendas;<\/li>\n\n\n\n<li>Valor faturado;<\/li>\n\n\n\n<li>N\u00famero de clientes;<\/li>\n\n\n\n<li>Quantidade de entregas;<\/li>\n\n\n\n<li>N\u00famero de chamados;<\/li>\n\n\n\n<li>Quantidade de ocorr\u00eancias;<\/li>\n\n\n\n<li>Frequ\u00eancia de visitas.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personalizando_as_cores\"><\/span>Personalizando as cores<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O TMS FNC Maps permite personalizar as tr\u00eas principais cores utilizadas no gradiente:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>LHeatMap.GradientStartColor := gcGreen;\nLHeatMap.GradientMidColor := gcYellow;\nLHeatMap.GradientEndColor := gcRed;<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F6F6F4\">LHeatMap.GradientStartColor := gcGreen;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">LHeatMap.GradientMidColor := gcYellow;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">LHeatMap.GradientEndColor := gcRed;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Nesse exemplo, temos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verde para as regi\u00f5es de menor intensidade;<\/li>\n\n\n\n<li>Amarelo para a intensidade intermedi\u00e1ria;<\/li>\n\n\n\n<li>Vermelho para as regi\u00f5es com maior intensidade.<br><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m podemos alterar a transpar\u00eancia por meio da propriedade <strong>Opacity<\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>LHeatMap.Opacity := 0.8;<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F6F6F4\">LHeatMap.Opacity := <\/span><span style=\"color: #BF9EEE\">0.8<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Valores menores tornam o HeatMap mais transparente, permitindo visualizar melhor os detalhes do mapa exibido abaixo dele.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As propriedades de peso, opacidade e cores do gradiente permitem adaptar o mapa de calor \u00e0s necessidades visuais e aos dados apresentados pela aplica\u00e7\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adicionando_dados_dinamicamente\"><\/span>Adicionando dados dinamicamente<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Na maioria dos projetos, as coordenadas utilizadas no mapa de calor ser\u00e3o carregadas de um banco de dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos percorrer um <strong>DataSet <\/strong>e preencher o array dinamicamente:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>procedure TForm1.CarregarHeatMapDoDataSet;\nvar\n  LCoordenadas: TTMSFNCMapsCoordinateRecArray;\n  LHeatMap: TTMSFNCMapsHeatMap;\n  LIndice: Integer;\nbegin\n  SetLength(LCoordenadas, QueryLocais.RecordCount);\n\n  LIndice := 0;\n  QueryLocais.First;\n  while not QueryLocais.Eof do\n  begin\n    LCoordenadas&#91;LIndice&#93;.Latitude := QueryLocais.FieldByName('latitude').AsFloat;\n    LCoordenadas&#91;LIndice&#93;.Longitude := QueryLocais.FieldByName('longitude').AsFloat;\n    LCoordenadas&#91;LIndice&#93;.Weight := QueryLocais.FieldByName('quantidade').AsFloat;\n    Inc(LIndice);\n    QueryLocais.Next;\n  end;\n\n  TMSFNCGoogleMaps1.BeginUpdate;\n  try\n    LHeatMap := TMSFNCGoogleMaps1.AddHeatMap(LCoordenadas);\n    LHeatMap.Opacity := 0.8;\n    LHeatMap.GradientStartColor := gcGreen;\n    LHeatMap.GradientMidColor := gcYellow;\n    LHeatMap.GradientEndColor := gcRed;\n  finally\n    TMSFNCGoogleMaps1.EndUpdate;\n  end;\nend;<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F286C4\">procedure<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">TForm1.CarregarHeatMapDoDataSet<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">var<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LCoordenadas: TTMSFNCMapsCoordinateRecArray;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LHeatMap: TTMSFNCMapsHeatMap;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LIndice: <\/span><span style=\"color: #F286C4\">Integer<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">begin<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  SetLength(LCoordenadas, QueryLocais.RecordCount);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  LIndice := <\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  QueryLocais.First;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">while<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">not<\/span><span style=\"color: #F6F6F4\"> QueryLocais.Eof <\/span><span style=\"color: #F286C4\">do<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">begin<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LCoordenadas&#91;LIndice&#93;.Latitude := QueryLocais.FieldByName(<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">latitude<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">).AsFloat;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LCoordenadas&#91;LIndice&#93;.Longitude := QueryLocais.FieldByName(<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">longitude<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">).AsFloat;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LCoordenadas&#91;LIndice&#93;.Weight := QueryLocais.FieldByName(<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">quantidade<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">).AsFloat;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    Inc(LIndice);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    QueryLocais.Next;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">end<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  TMSFNCGoogleMaps1.BeginUpdate;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">try<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LHeatMap := TMSFNCGoogleMaps1.AddHeatMap(LCoordenadas);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LHeatMap.Opacity := <\/span><span style=\"color: #BF9EEE\">0.8<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LHeatMap.GradientStartColor := gcGreen;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LHeatMap.GradientMidColor := gcYellow;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    LHeatMap.GradientEndColor := gcRed;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">finally<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    TMSFNCGoogleMaps1.EndUpdate;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">end<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">end<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, o HeatMap pode refletir diretamente os dados reais da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Melhorando_o_desempenho\"><\/span>Melhorando o desempenho<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ao adicionar v\u00e1rios pontos ao mapa, \u00e9 recomendado utilizar os m\u00e9todos BeginUpdate e <strong>EndUpdate<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>TMSFNCGoogleMaps1.BeginUpdate;\ntry\n  \/\/ Inclus\u00e3o e configura\u00e7\u00e3o dos elementos\nfinally\n  TMSFNCGoogleMaps1.EndUpdate;\nend;<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F6F6F4\">TMSFNCGoogleMaps1.BeginUpdate;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">try<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #7B7F8B\">\/\/ Inclus\u00e3o e configura\u00e7\u00e3o dos elementos<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">finally<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  TMSFNCGoogleMaps1.EndUpdate;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">end<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Esses m\u00e9todos agrupam as altera\u00e7\u00f5es realizadas no mapa, reduzindo a quantidade de chamadas individuais e melhorando o desempenho, principalmente quando trabalhamos com grandes volumes de coordenadas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Servicos_de_mapas_compativeis\"><\/span>Servi\u00e7os de mapas compat\u00edveis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O recurso de HeatMaps est\u00e1 dispon\u00edvel nos seguintes componentes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>TTMSFNCGoogleMaps; (<strong>Google Maps<\/strong>)<\/li>\n\n\n\n<li>TTMSFNCHERE; (<strong>HERE Maps<\/strong>)<\/li>\n\n\n\n<li>TTMSFNCOpenLayers;(<strong>OpenLayers<\/strong>)<\/li>\n\n\n\n<li>TTMSFNCLeaflet.(<strong>Leaflet<\/strong>)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Isso permite utilizar o recurso com diferentes servi\u00e7os de mapas, escolhendo aquele que melhor atende \u00e0s necessidades do projeto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma das vantagens do TMS FNC Maps \u00e9 justamente oferecer uma camada de abstra\u00e7\u00e3o para trabalhar com diferentes servi\u00e7os. Al\u00e9m disso, os componentes FNC podem ser utilizados em diferentes frameworks e plataformas, incluindo aplica\u00e7\u00f5es VCL, FireMonkey e TMS WEB Core. O produto apresenta compatibilidade com Windows, macOS, iOS, Android, Linux e os principais navegadores.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E2%96%B6%EF%B8%8FVeja_o_exemplo_em_video\"><\/span>\u25b6\ufe0fVeja o exemplo em v\u00eddeo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">No canal da Code4Delphi, temos um v\u00eddeo mostrando na pr\u00e1tica como utilizar mapas de calor com Delphi e TMS FNC Maps.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No exemplo, demonstramos a cria\u00e7\u00e3o do HeatMap, a inclus\u00e3o das coordenadas e a personaliza\u00e7\u00e3o das cores utilizadas para representar a intensidade dos pontos. Assista ao v\u00eddeo: <a href=\"https:\/\/www.youtube.com\/watch?v=qHuAcHfiUpI\" target=\"_blank\" rel=\"noreferrer noopener\">Mapa de calor com Delphi e TMS FNC Maps<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><iframe loading=\"lazy\" title=\"Mapas com Delphi 09 - Mapa de calor (Heatmaps)\" width=\"740\" height=\"416\" src=\"https:\/\/www.youtube.com\/embed\/qHuAcHfiUpI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Acesse tamb\u00e9m o reposit\u00f3rio com o c\u00f3digo fonte completo do exemplo: <a href=\"https:\/\/github.com\/Code4Delphi\/TMS-FNC-Maps\/tree\/master\/Samples\/FNCMapsHeatmaps\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/Code4Delphi\/TMS-FNC-Maps\/tree\/master\/Samples\/FNCMapsHeatmaps<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conheca_o_TMS_FNC_Maps\"><\/span>Conhe\u00e7a o TMS FNC Maps<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O TMS FNC Maps \u00e9 um conjunto de componentes para integrar mapas, geocodifica\u00e7\u00e3o, rotas, localiza\u00e7\u00e3o, eleva\u00e7\u00e3o, c\u00e1lculo de ped\u00e1gios e diversos outros recursos geogr\u00e1ficos \u00e0s aplica\u00e7\u00f5es Delphi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m dos HeatMaps, podemos trabalhar com:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Marcadores;<\/li>\n\n\n\n<li>Pol\u00edgonos;<\/li>\n\n\n\n<li>Polylines;<\/li>\n\n\n\n<li>C\u00edrculos;<\/li>\n\n\n\n<li>Ret\u00e2ngulos;<\/li>\n\n\n\n<li>Rotas;<\/li>\n\n\n\n<li>Arquivos GPX e GeoJSON;<\/li>\n\n\n\n<li>Geocodifica\u00e7\u00e3o de endere\u00e7os;<\/li>\n\n\n\n<li>Pesquisa de locais;<\/li>\n\n\n\n<li>Mapas est\u00e1ticos;<\/li>\n\n\n\n<li>Diferentes provedores de mapas.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%94%97_Links_uteis\"><\/span>\ud83d\udd17 Links \u00fateis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Saiba mais no site oficial: <a href=\"https:\/\/www.tmssoftware.com\/site\/tmsfncmaps.asp\" target=\"_blank\" rel=\"noreferrer noopener\">TMS FNC Maps<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Documenta\u00e7\u00e3o oficial sobre HeatMaps: <a href=\"https:\/\/download.tmssoftware.com\/doc\/tmsfncmaps\/components\/ttmsfncmaps\/#heatmaps\" target=\"_blank\" rel=\"noreferrer noopener\">Documenta\u00e7\u00e3o do TTMSFNCMaps \u2013 HeatMaps<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A TMS Software tamb\u00e9m publicou um conte\u00fado espec\u00edfico sobre a cria\u00e7\u00e3o de HeatMaps: <a href=\"https:\/\/www.tmssoftware.com\/site\/blog.asp?post=1280\" target=\"_blank\" rel=\"noreferrer noopener\">Creating Heatmaps in TMS FNC Maps for Delphi<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%8F%B7%EF%B8%8F_Cupom_de_desconto\"><\/span>\ud83c\udff7\ufe0f Cupom de desconto<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode adquirir os componentes da TMS Software utilizando o cupom exclusivo da Code4Delphi: <strong>2026Code4Delphi30<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O cupom oferece <strong>30% de desconto<\/strong> nos componentes participantes. A quantidade de utiliza\u00e7\u00f5es \u00e9 limitada.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span>Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Os mapas de calor transformam grandes quantidades de coordenadas em uma visualiza\u00e7\u00e3o simples e f\u00e1cil de interpretar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com poucas linhas de c\u00f3digo, o TMS FNC Maps permite adicionar um HeatMap, definir pesos diferentes para cada localiza\u00e7\u00e3o e personalizar as cores e a transpar\u00eancia da visualiza\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mapas de calor (HeatMaps) s\u00e3o uma excelente forma de visualizar a concentra\u00e7\u00e3o de informa\u00e7\u00f5es em determinadas&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"footnotes":""},"categories":[1,98],"tags":[60,164,165,163],"class_list":["post-1744","post","type-post","status-publish","format-standard","hentry","category-geral","category-tms","tag-delphi","tag-heatmap","tag-mapa-calor","tag-mapas"],"_links":{"self":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1744"}],"version-history":[{"count":15,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1744\/revisions"}],"predecessor-version":[{"id":1763,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1744\/revisions\/1763"}],"wp:attachment":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}