Basic Implementation Using ArcGIS API for JavaScript with React

Let’s discover ArcGIS (Geographic Information System) with React JS.

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.

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 :
  • https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/

• 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.

Conclusion :

By using esri-loader, integration with react becomes very simplified. You just have to include modules and use it accordingly.