Front-END - Usar API do google maps no Custom HTML

WEGnology Tips / Dicas da Plataforma
#1

Para mostrar a posição geográfica de dispositivos, é possível fazer uso dos mapas padrões da plataforma IoT WEGnology como o GPS History Block e o GPS Heatmap Block.

Mas você pode usar a API Javascript do Google Maps em um bloco Custom HTML, que possibilita criar mapas customizados.

IMPORTANTE:
Para este passo-a-passo é preciso ter familiaridade com HTML, CSS, e JavaScript.

Obtendo os dados de GPS

Antes de mostrar os dispositivos no mapa, você precisa configurar o dispositivo com um atributo do tipo GPS.
Neste atributo deverá ser configurada a coordenada geográfica desejada.

Data Queries

Para iniciar, adicione um Custom HTML Block a um Dashboard existente.

Neste Bloco Custom HTML, você precisa acessar dados usando JavaScript. Você pode configurar quais dados serão consultados usando a Configuração “Queries”:

Para este exemplo, configure o bloco usando uma Gauge Query e ajuste o seguinte:

  • Query Name : Use gps como o nome da Query (será usado mais tarde.)
  • Device IDs / Tags : Para este exemplo, selecione um Device.
  • Duration : Selecione “Last received data point.”
  • Attribute : Selecione um atributo tipo “GPS Attribute” válido (comentado antes).
  • Aggregation : Selecione “Last.”

A interface deverá mostrar como resultado da query, o dado da coordenada GPS lido no atributo, semelhante ao mostrado a seguir:


{
  "size": {
           "width": 390.844,
           "height": 290
        },
 "dashboard": {
     "theme": "light",
     "time": 1593385788532
  },
  "ctx": {},
  "queries": {
         "gps": {
            "time": "2020-06-28T23:09:35.000Z",
            "value": "39.798,-86.045"
         }
    }
}

Em queries.gps.value, você irá obter o dado GPS. Agora você poderá mostrar ele num mapa.

Configurando a página do Custom HTML

No bloco Custom HTML, você deve definir o conteúdo HTML, JavaScript e CSS que compõe o cabeçalho e o corpo da sua página e descrever como visualizar os dados da sua consulta usando JavaScript.

Conteúdo “Custom Head”

Em “Custom Head Content”, copie e cole o seguinte:

<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0" />
<meta charset="utf-8" />
<style>
   /* Sempre defina explicitamente a altura do mapa para definir o tamanho do 
     elemento div que contém o mapa. */
   #map {
      height: 100%;
    }

    /* Opcional: Faz a página preencher a janela. */

    html,
   body {
       height: 100%;
      margin: 0;
      padding: 0;
    }
 </style>

Aqui, podemos aproveitar HTML e CSS – eles permitem layouts personalizados e estilizam o bloco HTML personalizado. Sinta-se à vontade para alterar conforme desejar.

Conteúdo do “Custom Body”

Em “Custom Body Content”, copie e cole o seguinte:

<div id="map"></div>
<script>
var map
function initMap() {
   var drawChart = function() {
   if (!DashboardBlock.input.queries.gps) {
        console.log("The value at DashboardBlock.input.queries.gps not found")
       return
     }
     // os valores retornam como uma String no formato "lat,lng"
      var gps = DashboardBlock.input.queries.gps.value.split(',')
      var latLng = { lat: parseFloat(gps[0]), lng: parseFloat(gps[1]) }
      map = new google.maps.Map(document.getElementById('map'), {
     center: latLng,
    zoom: 7,
    })

    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: 'Hello World!',
      })

   }

   DashboardBlock.on('change', drawChart)

  }
</script>

<script 
   src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&callback=initMap"
async 
defer 
></script>

O trecho de código acima faz o seguinte:

  • carrega a biblioteca JavaScript do Google Maps,
  • lê o valor do GPS,
  • coloca o valor do GPS no mapa do Google
  • o mantém atualizado com as atualizações do Dashboard.

Para ajudar a explicar o que está acontecendo, vamos examinar o trecho acima, algumas linhas por vez.

Conteúdo de “Body Content”

Aqui podemos configurar um elemento div HTML div com o id do map para o Google Map:


<div id="map"></div>

Então, podemos carregar a biblioteca JavaScript do Google Maps com o seguinte:


<script>
var map
function initMap() {
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&callback=initMap"
async
defer
></script>

Na URL, configure a chave (key) e o retorno de chamada (call-back). Na URL, o retorno de chamada é definido como initMap. Isso chamará a função initMap quando o mapa for carregado.

Para configurar uma chave (key) adequada, você deve obter uma API key no Google Maps Console.

A seguir, nós podemos nos aprofundar na função initMap que está estruturada assim:


var drawChart = function() {
}

DashboardBlock.on('change', drawChart)

DashboardBlock é um “emissor de eventos” especial que podemos usar para detectar alterações no Dashboard. Cada vez que o evento “change“ é acionado, a função “ drawChart “ será chamada. Você pode ver os outros eventos disponíveis na Documentação do Bloco Custom HTML

O Google Maps espera um objeto que represente dados de GPS semelhantes a este:


{ lat: -34.397, lng: 150.644 }

Podemos acessar o valor do GPS em “DashboardBlock.input.queries.gps.value “ e criar o objeto GPS adequado para o Google Maps:


// valores retornam uma string no formato "lat,lng"

var gps = DashboardBlock.input.queries.gps.value.split(',')

var latLng = { lat: parseInt(gps[0]), lng: parseInt(gps[1]) }

Acima, agora temos um objeto GPS adequado em “latLng”. A seguir, podemos usá-lo para configurar o mapa:


map = new google.maps.Map(document.getElementById('map'), {
center: latLng,
zoom: 7,
})

var marker = new google.maps.Marker({
position: latLng,
map: map,
title: 'Hello World!',
})

Feito isso, você terá um bloco que visualiza os dispositivos em um Dashboard da Plataforma IoT WEGnology® usando o Google Maps.

Para explorar o que é possível com o Google Maps, veja em Exemplos Google Maps.

1 Curtida
Usar API do google maps no Custom HTML