GeoPUCMinas

Criação do mapa

A criação do mapa é feita por meio de alguns poucos comandos em JavaScript. Antes disso, no entanto, é importante a definição de um elemento JSON que conterá os valores de cada um dos municípios, da seguinte forma:

var dados = {
  '310010': 6704,
  '310020': 22690,
  '310030': 13311,
  ...
};

Cada item do objeto contém o código do município (de acordo com o IBGE) e o valor da variável medida para esse município. O objeto JSON pode tanto ser escrito na própria página quanto incorporado por meio de um arquivo auxiliar, como no caso do arquivo dados.js usado no exemplo abaixo. O objeto JSON também pode ser construído dinamicamente a partir de uma consulta a uma base de dados.

O exemplo abaixo também apresenta a sequência de comandos para a geração do mapa.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>GeoPUCMinas</title>
    
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="geopucminas/geopucminas.js"></script>
    <link rel="stylesheet" href="geopucminas/geopucminas.css" />
    
    <script src="geopucminas/MG_Geometria.js"></script>

    <style>
      #mapa1 {
        width: 600px;
        height: 530px;
        border: thin black solid;
      }
    </style>
    
    <script src="dados.js"></script>
    
    <script>
      window.load = function() {
        var gpm = new GeoPUCMinas('MG');
        var filtroRegiao = {};
        var opcoesMapa = {
          'títuloDoMapa': 'População (2010)',
          'títuloDaLegenda': [ 'Habitantes' ],
          'títuloNaTabela': [ 'Habitantes' ],
          'método': 'quebras naturais',
          'quantidadeDeClasses': 5,
          'casasDecimais': [0]
        }
        
        gpm.adicionaMapa( 'mapa1', [dados], filtroRegiao, opcoesMapa );
      }
    </script>
    
  </head>
  <body>

    <div id="mapa1"></div>
    <button data-geopucminas="opções" data-mapa="mapa1">
      Opções de apresentação
    </button>
    <button data-geopucminas="tabela" data-mapa="mapa1">
      Tabela de dados
    </button>

  </body>
</html>

A primeira observação importante sobre esses comandos é que eles só podem ser executados após a carga completa dos arquivos. Isso é assegurado por meio da inserção dos comandos em uma função inline que é atribuída ao método window.load.

Dentro da função, o primeiro comando cria um objeto da classe GeoPUCMinas. O construtor desse objeto requer a identificação do estado que será apresentado. Neste exemplo, foi escolhido o estado MG (que, atualmente, é o único possível).

O segundo comando, cria um objeto JSON com o filtro de micro ou mesorregião (neste caso o filtro está vazio e todos os municípios do estado serão apresentados. Um filtro de microrregião pode ser criado da seguinte forma:

var filtroRegiao = { 'meso': '06' };

var filtroRegiao = { 'micro': '18' };

Enquanto o primeiro filtro restringe o mapa à mesorregião Central Mineira, o segundo filtro retringe o mapa à microrregião de Uberlândia. Os valores numéricos representam os códigos das micro e mesorregiões, de acordo com o IBGE.

O comando seguinte define as opções de apresentação do mapa, que são:

O último comando chama o método adicionaMapa, que recebe como parâmetros: o identificador do componente que receberá o mapa, um vetor de variáveis (objetos JSON) que contém os valores de cada município, o filtro de região e as opções de apresentação do mapa.