quarta-feira, 20 de abril de 2016

Mapa com API ArcGis JavaScript


Fala galera!

Em meu TCC (Trabalho de Conclusão de Curso) minha equipe e eu fizemos uma aplicação que necessitava de interação com um mapa. E depois de muitas pesquisas cheguei a uma API (Application programming Interface) que foi ideal para o que precisávamos.

Mapa com API ArcGis JavaScript

O ArcGis JavaScript da empresa Esri, além de ter uma documentação super completa e com vários códigos de exemplo, é muito simples de trabalhar.

Neste post pretendo passar à vocês um pouco do conhecimento que possuo desta maravilhosa API e assim codificarmos um mapa de exemplo (pretendo futuramente fazer um mapa que utilizará mais recursos disponíveis). A princípio, vamos fazer um mapa "base" nada além do que somente abrir um mapa na tela.

Para iniciarmos nossa codificação, precisamos montar uma estrutura básica de fonte html, conforme abaixo:



Agora adicione o script e a tag dentro do <head>. O script carrega a API ArcGis JavaScript e quando houver uma atualização da API, será necessário alterar o número correspondente a versão. A folha de estilo (stylesheet) contém estilos específicos para componentes e widgets Esri.



Será preciso adicionar um segundo script, desta forma, não será necessário utilizar uma URL se referenciando ao módulo correspondente do ArcGis. O código JavaScript será adicionado dentro dele.



A função require especifica qual módulo utilizaremos no mapa, neste caso, será o módulo ["esri/map"], por conta disso, será definido no parâmetro da função (function) a classe Map que cria um local e uma estrutura DOM para adicionar as camadas, gráficos, informações de janela e outros controles.
Esta classe é responsável por adicionar o mapa à página. Além dessa classe, a API disponibiliza várias outros módulos com classes e objetos que possuem diferentes objetivos. Consulte aqui a lista completa.

O parâmetro do require "dojo/domReady!" é um plugin que vai esperar até que o carregamento do DOM tenha encerrado, ou seja, somente após o carregamento de todos os módulos - em nosso caso "esri/map" - o domReady será executado e a página carregada por completo. É indicado que o domReady seja sempre o último do vetor no qual se encontra. Mais detalhes aqui.

Após definirmos quais módulos utilizaremos, vamos a parte mais interessante, o mapa. Dentro do script você deixar seu código igual a este:

  

Vamos precisar de um objeto (map) que será responsável por todas configurações do mapa que utilizaremos. A string no primeiro parâmetro da classe Map (mapDiv) é o nome dado à div, onde o mapa será apresentado na página.

O segundo parâmetro é um vetor (semelhante a um arquivo JSON) que possui o atributo e seu valor correspondente, todos separados por vírgula.

O atributo center é um vetor com duas posições, onde definimos a longitude e a latitude do mapa. Estas coordenadas serão utilizadas como ponto inicial no carregamento do mapa.

O atributo zoom é a aproximação do mapa, ou seja, a distância de visualização. Quanto menor, menor o zoom. O atributo basemap é o tipo do mapa a ser mostrado na página. Além do street, temos outras opções como: satellite, hybrid, topo, gray, oceans, osm e national-geographic.

Após ter definido os atributos corretos e adicionado o código javascript completo, é hora de adicionar o mapa à página. Não poderia ser mais simples, basta adicionar a tag <div> ao corpo dá página e definir sua id com o mesmo nome do parâmetro da classe Map (mapDiv). Se for preciso, você pode utilizar o id para fazer a sua formatação em CSS para deixar o mapa em tela cheia ou em um local específico da página. Bom galera, por enquanto vou terminar esse tutorial por aqui e deixarei como uma pequena introdução a um próximo mapa com mais funções e características específicas.

O código completo está em nosso repositório no GitHub.

Até mais! ;)

Renan Rodrigues Ramos Desenvolvedor

Sou desenvolvedor, amo desenvolvimento de software, músico e apaixonado por filmes e seriados.