Vamos dar continuidade a nossa primeira aplicação web?

Neste post vamos dar continuidade a nossa primeira aplicação web com mapa. Desta vez vamos aprender a como traçar direções de um ponto a outro. Este é o último post da série Minha Primeira Aplicação Web com Mapa, se você não conseguiu ler os anteriores, você pode consultá-los nos links abaixo:

  1. Parte 1.

  2. Parte 2.

Minha Primeira Aplicação Web: Traçando direções

Antes de começar, você precisará ter um usuário do ArcGIS for Developer, para criá-lo você poderá seguir os passos apresentados neste link: Passo a passo do ArcGIS for Developers.

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 <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), do visualizador de mapa (MapView) e o buscador (Search).

Instancie um novo mapa (Map) e defina a propriedade de mapa base como streets-navigation-vector.

Instancie um visualizador de mapa (MapView) e defina as propriedades container, mapa, centro e zoom. E, também, instancie o buscador (Search) e a classe de Direções (Directions), conforme o código abaixo:



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

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

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

// Search widget
    var search = new Search({
      view: view
    });

    view.ui.add(search, "top-right");

// Direcions widget – Adicione ESTA funcionalidade
    var directions = new Directions({
      view: view
    });
    view.ui.add(directions, "top-right");

  });
  </script>


Parabéns!

Você acabou de incluir uma nova funcionalidade na sua aplicação. Agora você pode traçar direções de um ponto a outro.

Ao visualizar a sua aplicação, para utilizar o serviço de rota, será solicitado o usuário e senha, criados anteriormente, conforme descrito no início deste post.

Criando minha primeira aplicação web com mapa – parte 3

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



<!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/Search",
        "esri/widgets/Directions"
      ], function(Map, MapView, Search, Directions) {

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

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

    // Search widget
      var search = new Search({
        view: view
      });

      view.ui.add(search, "top-right");

     // Direcions widget – Adicione ESTA funcionalidade
      var directions = new Directions({
        view: view
      });
      view.ui.add(directions, "top-right");
    });
    </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>


Que legal, você chegou ao final da série Minha Primeira Aplicação Web com Mapa. Eu espero que tenha gostado. Continue nos acompanhando no Portal GEO e nas redes sociais, muitas novidades estão a caminho.

Agora que você já está craque, dá uma olha aqui:

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:

Criando minha primeira aplicação web com mapa – parte 1

Criando minha primeira aplicação web com mapa – parte 2

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

ArcGIS API for Python: os conceitos principais – parte 1

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: