Explore the blend of ArcGIS API & React

Basic Implementation Using ArcGIS API for JavaScript with React

Quick Summary: ArcGIS API for JavaScript with React combines Esri’s mapping capabilities with React’s component-based approach. It allows developers to build powerful mapping applications with ease. Users can access various geospatial functions and create responsive applications for web and mobile devices by integrating the ArcGIS API into React projects.


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.


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


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">
                    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}> 
                    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.
                    loadModules(["esri/views/MapView", "esri/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"],{
                        const map = new Map({
  • Map With an API Key :
  • loadModules(["esri/views/MapView","esri/Map","esri/config"],{
                        esriConfig.apiKey = "YOUR_API_KEY";
                        const map=new Map({

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

All the above code will be written in useEffect hook.


Integrating ArcGIS API for JavaScript with React provides a powerful and efficient geospatial data visualization and analysis toolset. This basic implementation showcases the seamless combination of React’s component-based architecture and ArcGIS’s robust mapping capabilities.

Leveraging React’s virtual DOM and ArcGIS’s extensive geospatial functionalities allows developers to create dynamic and interactive mapping applications.

By adhering to ethical practices and acknowledging the importance of plagiarism-free content, we ensure the integrity of our work and respect the contributions of others in the field. Embracing this integration opens opportunities to create innovative and engaging web-based GIS applications that focus on authenticity and originality.


ArcGIS API for JavaScript with React combines Esri’s ArcGIS API for JavaScript and the React library, enabling developers to build interactive mapping applications using React components.

Install the required packages, create a new React project, and then integrate ArcGIS API for JavaScript within your React components.

You can integrate ArcGIS API for JavaScript into your existing React project by following the installation and configuration steps.

By combining ArcGIS API for JavaScript with React, you get the benefits of a powerful mapping API and the component-based architecture of React, allowing for easy management of UI components and states.

ArcGIS API for JavaScript has different licensing options. While it offers a free developer subscription for testing and development, production use may require a paid license.