Basic Implementation Using ArcGIS API for JavaScript with React

Introduction

Are you looking to build powerful web applications with maps? If so, check out the ArcGIS API for JavaScript with React!

The ArcGIS API for JavaScript is a highly adaptable library that offers a wide range of capabilities. It allows you to add interactive maps to your web applications easily. React is a modern JavaScript framework that makes creating quick and scalable user interfaces simple.

These two technologies together make an effective tool for building web applications that feature interactive maps. In this blog post, we will show you how to get started with basic implementation using ArcGIS API for JavaScript with React.

If you’re looking for a powerful and easy-to-use library for adding interactive maps to your web applications, you should check out the ArcGIS API for JavaScript with React. And to get better solutions, you will need to find the best React.JS Development Services. Also, you need to understand the Key Feature Of ReactJS will explain to you how ReactJS can help you to build the best applications.

What is GIS

GIS is all about interacting with maps using geographic data like where things are and how things are like there.

GIS provides a facility to understand the patterns between data. Eventually, it makes it easier to extract and understand all the related data.

Basics

To work with GIS in React ArcGIS provides an API for Javascript.

The concept of React is your UI should be a function of the state. Whereas Central philosophy of ArcGIS Javascript API is to give up an item ID and Dom node and they’ll give you the world, Literally.

On the ArcGIS side, First, we have to create a Map with initial properties like

• basemap
• portalItem etc

Secondly, we create a View that takes a reference to the map, container to display the map, and other additional properties. The view will be having properties like

• map
• container
• center
• zoom etc

Steps

1. Create a React app

npx create-react-app gisdemo

cd gisdemo

npm start

2. Install-Package in your Application

npm install esri-loader

3. Create React Functional Component Map.js in the components folder and Call it in App.js

import './App.css';
                    import Map from '../components/Map';
                    function App() {
                    return (
                    <div className="App">
                    <Map/>
                    </div>
                    );
                    }
                    export default App;

4. Create Container for map Using React Hooks

As discussed earlier API needs a container to Display the map. In React one has to use a Reference to a div. It can be achieved using useRef Hook. and for this you need to understand the Concept Of ReactJS Hooks.

import React,{useEffect,useRef} from 'react';
                    import { loadModules } from "esri-loader";
                    function Map() {
                    let view;
                    const MapElement = useRef(null);
                    return (
                    <div style={{height:800}} ref={MapElement}> 
                    </div>
                    );
                    }
                    export default Map;

5. Load the Modules using esri-loader Package

• Map should be initialized right after the component is rendered. Therefore if you are using a Class component then the initialization will be placed in the lifecycle method componentDidMount() method.
• In React Hooks the code will be written in useEffect Hook.
• Load the required modules using loadModules Method and pass the CSS value as true.

useEffect(
                    ()=>{ 
                    loadModules(["esri/views/MapView", "esri/Map"],{
                    css:true
                    }).then(([MapView,Map])=>{ 
                    //Map will be created here 
                    });
                    });

6. Creating map Using React Hooks :

• Basemap values can be
  • dark-gray
  • dark-gray-vector
  • topo-vector
  • streets-navigation-vector
  • hybrid
  • topo
  • oceans
  • streets-relief-vector
  • satellite
  • streets
  • gray-vector
  • streets-night-vector
  • osm
  • streets-vector
  • terrain
  • national-geographic
  • gray
• Map Without an Api Key :

• loadModules(["esri/views/MapView","esri/Map"],{
              
                      css:true
              
                      }).then(([MapView,Map])=>{
              
                      const map = new Map({
              
                      basemap:'topo-vector',
              
                      });
              
                      });

• Map With an API Key :
  • • • • To get API Key :
        • ArcGIS Maps SDK for JavaScript

• loadModules(["esri/views/MapView","esri/Map","esri/config"],{
                      css:true
                      }).then(([MapView,Map,esriConfig])=>{ 
                      esriConfig.apiKey = "YOUR_API_KEY";
                      const map=new Map({
                      basemap:'topo-vector'
                      portalItem:{
                      id:"d7e8cd6ae3854af6b2ed3a34609b8165"
                      }
                      });
                      });
                      });

7. Creating View

• The initialization code will be the same as ArcGIS code samples.
• The only thing to keep in mind is to assign the current value of a reference to the container.
• View can be of two types :
  • MapView (2D) – “esri/views/MapView”
  • SceneView (3D) – “esri/views/SceneView”

• view = new MapView({
                      zoom: 14, //Zoom Level can be Between 0 to 23
                      center: [-118.24, 34.05], //longitude, latitude
                      container:MapElement.current,
                      map: map //map created above
                      });

8. Adding GeoJson or KML layer to your Map

• One can add layers on the map using stored Geographical Data
• You can pass the URL of the Kml or GeoJSON file as a parameter and add that layer to the map.
• Modules to Load For GeoJSON Layer :
  • “esri/layers/GeoJSONLayer” – GeoJSONLayer

const geoJsonLayer = new GeoJSONLayer({
                    url : "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson"
                    });
                    map.add(geoJsonLayer)

• Modules to Load For KML Layer :
  • “esri/layers/KMLLayer” – KMLLayer
  • If you want to add a KML file from your Device,
    • Expose a web server on Port like 5500 of your local machine to the internet.
    • You can use ngrok for that and get the url for your kml file stored on a local machine.

let layer = new KMLLayer({
                    url: "http://99b2-43-224-10-137.ngrok.io/ITCompanies.kml"
                    });
                    map.add(layer)

All the above code will be written in useEffect hook.