Neste post, vamos dar continuidade a nossa primeira aplicação web com mapa.

Minha primeira aplicação web: Busca de Endereços

Desta vez, vamos aprender a como buscar um endereço e apresentá-lo no mapa. Eu sugiro você resgatar o código gerado na primeira parte desta série. Se você não conseguiu ler a primeira parte, você pode acessá-la aqui:

Pegue seu código na Parte 1

Meu conselho é que você guarde este código que vamos gerar, pois vamos utilizá-lo no terceiro e último post desta série, cujo tema será como codificar a funcionalidade para traçar direções de um ponto a outro.

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. 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 street-navigation-vector. Instancie um visualizador de mapa (MapView) e defina as propriedades container, mapa, centro e zoom. E, também, instancie o buscador (Search), conforme o código abaixo:



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

    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");

  });
  </script>


Parabéns!

Você acabou de incluir uma nova funcionalidade na sua aplicação. Agora você pode realizar a busca de endereços e apresentá-los no mapa.

Quer mais um desafio na sua primeira aplicação web?

Como desafio, você poderá realizar o passo abaixo, que é permitir realizar a busca de endereços a partir de uma coordenada X/Y.

Na função principal do seu Javascript, adicione o código abaixo:



 view.on("click", function(evt){
        search.clear();
        view.popup.clear();
        if (search.activeSource) {
          var geocoder = search.activeSource.locator; // World geocode service
          var params = {
            location: evt.mapPoint
          };
          geocoder.locationToAddress(params)
            .then(function(response) { // Show the address found
              var address = response.address;
              showPopup(address, evt.mapPoint);
            }, function(err) { // Show no address found
              showPopup("Nenhum endereço encontrado.", evt.mapPoint);
            });
        }
      });


Adicione também uma nova função, que é para apresentação do pop-up, conforme código abaixo:



      function showPopup(address, pt) {
        view.popup.open({
          title: "Coordenada: " + Math.round(pt.longitude * 100000)/100000 + ";" + Math.round(pt.latitude * 100000)/100000,
          content: address,
          location: pt
        });
      }


Parabéns! Sua aplicação com busca de endereços por coordenada X/Y está pronta!

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"
       ], function(Map, MapView, Search) {

      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");

      view.on("click", function(evt){
      search.clear();
      view.popup.clear();
      if (search.activeSource) {
          var geocoder = search.activeSource.locator; // World geocode service
          var params = {
            location: evt.mapPoint
          };
          geocoder.locationToAddress(params)
            .then(function(response) { // Show the address found
              var address = response.address;
              showPopup(address, evt.mapPoint);
            }, function(err) { // Show no address found
              showPopup("Nenhum endereço encontrado.", evt.mapPoint);
            });
        }
      });
      function showPopup(address, pt) {
        view.popup.open({
          title: "Coordenada: " + Math.round(pt.longitude * 100000)/100000 + ";" + Math.round(pt.latitude * 100000)/100000,
          content: address,
          location: pt
        });
      }
    });
    </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 está achando de construir facilmente sua primeira aplicação web com mapa?

Lembre-se que ainda teremos o terceiro e último post dessa série. E nele, você vai aprender a traçar direções de um ponto a outro.

Então que tal testar essa oportunidade abaixo?

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

ArcGIS API for Python: os conceitos principais – parte 1

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

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: