• Início
  • Conhecimento básico
  • Ferramentas
  • Criando Mapas Interativos
  • Geoprocessamento
  • Módulo II - Ferramentas para criar Mapas Interativos.

    Vamos ver agora os conceitos mínimos de cada linguagem para gerar um mapa interativo. Vamos cobrir superficialmente cada uma delas mas caso queira se aprofundar existem recursos na web suficientes para se aprender mais sobre elas.

    Parte 1 - HTML

    Um documento <html> padrão para adicionarmos um mapa leaflet é constituído basicamente por duas partes (HEAD e BODY) conforme abaixo:

    <!DOCTYPE html>
    <html>
    <head>
     <title>Mapa Leaflet</title>
     <link/>
     <script>
     </script>
     <style>
     </style>
    </head>
    <body>
    <div></div>
    <script>
    </script>
    </body>
    </html>
    

    Na porção HEAD adicionaremos os links para os objetos javaScript e css que constituem o sistema Leaflet bem como definir em style a dimensão do mapa que criaremos e em head colocaremos um elemento <div> para o mapa e o script javaScript que define o nosso mapa.

    Parte 2 - CSS e os elementos do Leaflet

    Aqui criamos o link css e script do leaflet na porção HEAD e também a dimensão do nosso mapa em <style>. Na porção HEAD adicionamos o id mapa em <div>.
    <!DOCTYPE html>
    <html>
    <head>
     <title>Mapa Leaflet</title>
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
       integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
       crossorigin=""/>
     <script  src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
       integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
       crossorigin="">
     </script>
     <style>
     #mapa {
      width: 800px;
      height: 460px;
     }
     </style>
    </head>
    <body>
    <div id=mapa></div>
    <script>
    </script>
    </body>
    </html>
    

    Pronto, nossa base está preparada para adicionarmos o mapa interativo Leaflet.

    Parte 3 - O Servidor Go

    Antes de adicionarmos o mapa vamos preparar o nosso servidor de websites usando Go.

    Caso queira se aprofundar mais sobre a linguagem Go faça o download da apostila que fiz nesse link.

    Vamos mostrar como podemos de maneira rápida criar um servidor em Go e mostrar um mapa Leaflet usando somente Go básico.

    Primeiro criamos o diretório MapaLeaflet que será o ambiente para o servidor Go dentro do diretório $GOPATH/src/ do seu sistema (crie o diretório 'src' caso esse ainda não exista):

    MapaLeaflet
    	|
    	|_ templates
    	|	|
    	|	|_ mapa.html
    	|	|_ layout.html
    	|
    	|_ static
    	|	|
    	|	|_ js
    	|	    |
    	|	    |_ leaflet.js
    	|	    |_ leaflet.css
    	|
    	 servidor.go
    

    Dentro do diretório MapaLeaflet criamos o arquivo servidor.go abaixo:

    package main
    import (
      "net/http"
      "html/template"
      "path/filepath"
    )
    
    func mapa(w http.ResponseWriter, r *http.Request){
     l := filepath.Join("templates", "layout.html")
     f := filepath.Join("templates", filepath.Clean(r.URL.Path))
     tpl, _ := template.ParseFiles(l, f)
     tpl.ExecuteTemplate(w, "layout", nil)
    }
    
    func main() {
      fs := http.FileServer(http.Dir("static"))
      http.Handle("/static/", http.StripPrefix("/static/", fs))
      http.HandleFunc("/mapa.html", mapa)
      println("Servidor Rodando...")
      http.ListenAndServe(":8080", nil)
    }
    

    Carregue os arquivos leaflet dentro do diretório MapaLeaflet/static/js/ baixando eles deste link

    Descompacte o arquivo ZIP e coloque os arquivos leaflet.css e leaflet.css dentro do diretório MapaLeaflet/static/js/ bem como o diretório images.

    Agora vamos criar os dois arquivos layout.html e mapa.html dentro da pasta MapaLeaflet/templates/.

    layout.html

    {{define "layout"}}
    <!DOCTYPE html>
    <html>
    <head>
     <title>Mapa Leaflet</title>
     <link rel="stylesheet" href="static/js/leaflet.css"/>
     <script  src="static/js/leaflet.js"></script>
     <style>
     #mapa {
      width: 800px;
      height: 460px;
     }
     </style>
    </head>
    <body>
    <div id=mapa></div>
    <script>
      {{template "body"}}
    </script>
    </body>
    </html>
    {{end}}
    

    mapa.html

    {{define "body"}}
      var map = L.map('mapa').setView([-3.09, -60.0], 12);
    {{end}}
    

    Vamos testar nosso primeiro servidor de mapa leaflet digitando no monitor, dentro do diretório MapaLeaflet:

    você@seu.computador:~/go/src/MapaLeaflet$ go install MapaLeaflet
    você@seu.computador:~/go/src/MapaLeaflet$ $GOPATH/bin/MapaLeaflet
    Servidor Rodando...
    

    Ao digitar localhost:8080/mapa.html no navegador deveremos ver:

    Não parece muito atraente mas essa é a base de onde criaremos nossos mapas usando Leaflet e Go. Antes disso vamos dar uma olhada nos conceitos básicos de Postgis.

    Parte 4 - Postgis

    Dados espaciais (geográficos e geométricos) são melhores armazenados usando a extensão postgis do PostgreSQL.

    Dados espaciais são fundamentais onde informações pontuais, áreas e imagens são usadas constantemente para representar valores e características. Essas informações devem estar armazenadas de forma eficiente e acessível no geobanco também.

    Uma vez instalado PostgreSQL e Postgis, o processo de criação de um banco de dados chamado leaflet com a extensão postgis é bem simples:

    você@seu.computador:~$ createdb leaflet -O user --encoding=utf-8 
    você@seu.computador:~$ psql leaflet -c "CREATE EXTENSION postgis;" 
    CREATE EXTENSION
    

    Vamos entrar no banco de dados leaflet e listar as tabelas existentes usando \d. (Para sair digite \q):
    você@seu.computador:~$ psql leaflet
    psql (11.5 (Ubuntu 11.5-0ubuntu0.19.04.1))
    Type "help" for help.
    
    leaflet=# \d
                 List of relations
     Schema |       Name        | Type  | Owner 
    --------+-------------------+-------+-------
     public | geography_columns | view  | andre
     public | geometry_columns  | view  | andre
     public | raster_columns    | view  | andre
     public | raster_overviews  | view  | andre
     public | spatial_ref_sys   | table | andre
    (5 rows)
    
    leaflet=# 
    

    A extensão Postgis cria as seguintes tabelas (‘tables’) e visões (‘views’) no geobanco:

    - geometry_columns: Visão que armazena informações de elementos 
    geométricos do tipo vector
    - geography_columns: Visão que armazena informações de elementos geográficos 
    do tipo vector
    - raster_columns: Visão que armazena informações gerais de elementos do tipo raster.
    - raster_overviews: Visão que armazena informações de ‘overviews’ de elementos do 
    tipo raster.
    - spatial_ref_sys: Tabela contendo informações dos sistemas de referência de 
    coordenadas (SRID). 

    Cobrimos aqui somente uma pequena parte para podermos dar continuidade no tópico de criarmos Mapas Interativos. Sugiro as seguintes apostilas para se aprofundar no assunto e para criar uma base sólida quando abordarmos banco de dados e geoprocessamento.

    Fundamentos de R.
    R e banco de dados espaciais.