Mapa de calor usando o CrossMapp

Suporte
,
2

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 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

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”:

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”.

// 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.

Referencias

1 curtida