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ê

Conhecendo o React Leaflet

Conhecendo o React Leaflet Olá pessoal neste breve tutorial vamos aprender como utilizar o React Leaflet em um projeto bem como vamos praticar alguns exemplos …
Escolha a forma mais assertiva de visualizar os seus dados!   Quando falamos de apresentação de dados temos algumas formas. Eis que não há a …