Opt GIS

Utilizando a API JavaScript ArcGIS com React.js

Oi pessoal neste breve tutorial que eu preparei para vocês vamos aprender como criar um boilerplate simples para utilizar a API JavaScript ArcGIS com React.js bem como vamos aprender como criar um widget simples de zoom. Vamos utilizar a biblioteca esri-loader que ajuda na utilização da API JavaScript ArcGIS com frameworks e bundlers e também vamos utilizar styled-components para criar os estilos.

Não foi fornecido texto alternativo para esta imagem

Pré-requisitos

Criação do Boilerplate

Escolher uma pasta de sua preferência e executar o comando:

npx create-react-app boilerplate-esri-javascript-api-react

Este comando vai instalar todas as dependências de uma aplicação React.js. Quando a instalação terminar é preciso navegar até a pasta que foi criada (boilerplate-esri-javascript-api-react) e deletar os seguintes arquivos:

  • src/logo.svg;
  • src/setupTest.js;
  • src/reportWebVitals.js;
  • src/index.css;
  • src/App.test.js.

Estes arquivos são padrão e não serão utilizados neste boilerplate. Após deletar os arquivos é preciso atualizar alguns arquivos:

  • src/index.js
Código em JavaScript
  • src/App.js
Código em JavaScript
  • src/App.css
Código em CSS

Para finalizar o boilerplate é preciso instalar a biblioteca esri-loader com o seguinte comando:

npm install –save esri-loader

Após estas etapas nosso boilerplate esta finalizado e pode ser utilizado para iniciar projetos que utilizem a API JavaScript ArcGIS com React.js.

Exemplo de Mapa e Widget Personalizado

Para iniciar nosso exemplo é preciso copiar o boilerplate para alguma pasta de seu interesse pois ele é um modelo inicial para começar uma aplicação, em seguida para este exemplo é preciso criar as seguintes pastas:

  • src/components
  • src/contexts

Dentro da pasta components vamos criar os componentes BaseMap e ZoomWidget e na pasta contexts vamos criar um contexto para que o objeto map e view fiquem disponíveis para toda a aplicação.

Como os estilos dos componentes serão criados com JavaScript precisamos instalar o styled-components com seguinte comando:

npm install –save styled-components

Para finalizar o exemplo por favor assistam ao vídeo onde é explicado o código que também pode ser baixado no seguinte link:

Repositório com os códigos do tutorial.

Escrito por

Diego Rodrigues 

Função: Analista Desenvolvedor
https://www.linkedin.com/in/Diego Rodrigues/

Sugestões para você

Criando Web Maps com ArcGIS API for Python Essa semana apresentei um Talks para os colegas da OPT GIS onde mostrei as capacidades da ArcGIS API for Python na …
O ArcGIS Pro 2.7 chegou e vem trazendo muitas novidades! Vamos falar de uma das novidades dessa nova versão do ArcGIS Pro, o Mobile Geodatabase. …