Neste post vamos aprender a como criar a sua primeira aplicação web utilizando um mapa 2D e permitindo trocar o mapa base (plano de fundo).

Meu conselho é que você guarde este código que vamos gerar, pois vamos utilizá-lo nos posts seguintes, os quais abordaremos os temas de como codificar a funcionalidade para buscar um endereço e apresentar no mapa e como codificar a funcionalidade para traçar direções de um ponto a outro.

Preparado para construir sua primeira aplicação web?

Vamos lá!

A primeira coisa que você precisará é ter um editor de texto e criar um arquivo com o nome MyAppArcGISforDevelopers.html. Esta será a sua página HTML. Ou se você preferir realizar de forma mais dinâmica, sugiro que você acesse o CodePen e crie um novo Pen para editar o HTML.

Depois que seu arquivo estiver criado ou um novo Pen foi aberto, você poderá adicionar o seguinte código:



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>


Dentro da tag <head>, você poderá adicionar as referências para o CSS e para a API Javascript do ArcGIS.



<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.13/"></script>



Ainda dentro da <head>, adicione a tag <script> e a expressão require para carregar os módulos de mapa (Map) e do visualizador de mapa (MapView).

Instancie um novo mapa (Map) e defina a propriedade de mapa base como topo-vector. Instancie um visualizador de mapa (MapView) e defina as propriedades container, mapa, centro e zoom, conforme o código abaixo:



  <script>
  require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView) {

    var map = new Map({
      basemap: "topo-vector"
    });

    var view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-43.2105, -22.9519], // longitude, latitude
      zoom: 14
    });
  });
  </script>



Você perceberá que a sua primeira aplicação web com mapa já está criada!

Parabéns!

Sua aplicação traz como centro do mapa o Cristo Redentor, no Corcovado, Rio de Janeiro.

Agora vamos dar a possibilidade de outros usuários alterarem o mapa base. A primeira coisa a fazer é adicionar no require o módulo BasemapGallery, que ficará da seguinte forma:



require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/BasemapGallery"
    ], function(Map, MapView, BasemapGallery) {



No final da função principal, instancie o BasemapGallery e o configure para carregar os mapas base do ArcGIS Online. Veja o exemplo de código abaixo:



      var basemapGallery = new BasemapGallery({
        view: view,
        source: {
          portal: {
            url: "https://www.arcgis.com",
            useVectorBasemaps: true  // Load vector tile basemaps
          }
        }
      });


Adicione o widget no topo direito da tela:



view.ui.add(basemapGallery, "bottom-left");


Good Job! Execute a sua primeira aplicação web de mapa.

Caso tenha alguma dúvida, confira o código na integra:



<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.13/"></script>
    <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/BasemapGallery"
      ], function(Map, MapView, BasemapGallery) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-43.2105, -22.9519], // longitude, latitude
        zoom: 14
      });

      var basemapGallery = new BasemapGallery({
        view: view,
        source: {
          portal: {
            url: "https://www.arcgis.com",
            useVectorBasemaps: true  // Load vector tile basemaps
          }
        }
      });

      view.ui.add(basemapGallery, "bottom-left");

    });
    </script>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>



O que achou da sua primeira aplicação web? Já está pronto para mais um tutorial?

No próximo post, você vai aprender a buscar um endereço e apresentá-lo no mapa.

E o que falar dessa oportunidade aqui embaixo?

Developer: Teste essa aplicação em JavaScript no ArcGIS


Fique por dentro de todas as novidades do Portal GEO. Faça grátis sua inscrição!

Veja também:

Motivos que farão você migrar seu desenvolvimento para o ArcGIS for Developers

ArcGIS API for Python: os conceitos principais – parte 1

ArcGIS API for Python: os conceitos principais – parte 2

Veja todos os nossos artigos para Developers


Você gostou desse artigo?

O Portal GEO está sempre trabalhando para trazer novidades, tendências e o que há de melhor em dicas do universo GIS. Clique abaixo e faça sua inscrição gratuita para receber com comodidade todos os nossos artigos, que tenho certeza, vão te apoiar em seu cotidiano profissional e pessoal, te deixando sempre bem informado: