# Mapa de calor usando o CrossMapp

**URL:** <https://community.latromi.com.br/t/mapa-de-calor-usando-o-crossmapp/1313>\
**Category:** Ajuda & Suporte\
**Tags:** charts, javascript, form\
**Created:** [Agosto 26, 2024, 1:00pm UTC](https://community.latromi.com.br/t/mapa-de-calor-usando-o-crossmapp/1313 "2024-08-26T13:00:57Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Diego\_Alves](https://community.latromi.com.br/user_avatar/community.latromi.com.br/diego_alves/32/1248_2.png) [@Diego\_Alves](https://community.latromi.com.br/u/Diego_Alves)\
**Post date:** [Agosto 26, 2024, 1:00pm UTC](https://community.latromi.com.br/t/mapa-de-calor-usando-o-crossmapp/1313/1 "2024-08-26T13:00:57Z")

</div>

Ola,

É possivel fazer a criação de mapas de calor usando o CrossMap ou ate mesmo o AmCharts?  
A demanda é mostrar onde tem mais picos de velocidade formando um mapa de calor na região, como o exemplo abaixo:

 ![image](https://community.latromi.com.br/uploads/default/original/2X/1/14cf425744005cb5911d108215d51c993d4fe65d.jpeg)

---

<div class="post-metadata">

**Author:** ![Diego\_Ramos](https://community.latromi.com.br/user_avatar/community.latromi.com.br/diego_ramos/32/1819_2.png) [@Diego\_Ramos](https://community.latromi.com.br/u/Diego_Ramos)\
**Post date:** [Setembro 9, 2024, 12:55pm UTC](https://community.latromi.com.br/t/mapa-de-calor-usando-o-crossmapp/1313/2 "2024-09-09T12:55:08Z")

</div>

Bom dia @Diego_Alves,

Para adicionar um mapa térmico, seria necessário efetuar a construção do mapa via arquivo JS, para usar os options do Google maps API ([Neste tópico](https://community.latromi.com.br/t/rota-trajeto-editavel-usando-o-google-maps/1098) tem um exemplo de criação do mapa via JS)

# Introdução

Nesta demonstração da implementação iremos usar **tabela** , **código JS** e **API do Google Maps**

# Banco de dados

Para facilitar manipulação dos valores criaremos uma tabela de coordenadas para gravar algumas localizações de exemplo para o mapa de calor

```sql
CREATE TABLE IF NOT EXISTS samples.coordenadas
(
    sequencia serial NOT NULL PRIMARY KEY,
    latitude numeric(9,6),
    longitude numeric(9,6)
)

```

# Código Javascript

O carregamento do mapa usa os scripts da API do Google Maps, sendo necessário informar a **Chave de API** neste processo.

Neste exemplo, a chave está sendo obtida da variável do Formulário chamada “ **apiKey** ”:

```js
var apiKey = ev.form.getVariableValue('apiKey');
latromi.extensions.loadScripts(['https://maps.googleapis.com/maps/api/js?libraries=visualization&key=' + apiKey], initMap);

```

Após o carregamento dos script, a função de inicialização pode ser chamada conforme exemplo abaixo.

Perceba que as coordenadas estão sendo obtidas a apartir da variável do Formulário chamada “ **coordenadas** ”.

```js
// Função de callback para inicialização do mapa.
// Essa função é chamada logo após a conclusão do carregamento das bibliotecas do Google Maps.
function initMap() {
    var form = latromi.formManager.getFormInstance(); // Caso esteja em um formulário
    // Initializa o mapa, passando o elemento "div" onde ele será renderizado
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 6,
        center: { lat: -29.5, lng: -53.5 } // Localização padrão de abertura do mapa (Centralizado no RS)
    });
    heatmap = new google.maps.visualization.HeatmapLayer({
        data: parseStoredCoordinates(form.getVariableValue('coordenadas')),
        map: map
    });
}
  
// Converter uma string no formato:
// [(lat, lng),(lat, lng),(lat, lng)...]
// Para um array de objeto js
function parseStoredCoordinates(text) {
    var result = [];

    if (text) {
        const reg = /[-+]?\d+(\.\d+)?,\s?[-+]?\d+(\.\d+)?\b/g;
        while ((match = reg.exec(text)) !== null) {
            var coordArray = match[0].split(',');
            result.push(new google.maps.LatLng(
                parseFloat(coordArray[0]),
                parseFloat(coordArray[1])
            ));
        }
    }
    return result;
}

```

Exemplo **em funcionamento** [demo](https://demo.latromi.com.br/web/exemplos/mapas/calor).

# Referencias

- [Exemplo API Google Maps para utilização do mapa de calor](https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap#maps_layer_heatmap-javascript)