Integrating ESRI Maps into your React App

ESRI maps are widely used in web application development because they provide a comprehensive set of tools for creating and working with maps. React is a popular JavaScript library for building user interfaces. In this blog, we will discuss how to add an ESRI map to a React application.

Pre-requisite:

1. Before diving into these steps, Let’s bootstrap the react application by running the following command

npx create-react-app react-esri-demo

Step 1: Install @arcgis/core:

The first step is to install the @arcgis/core. You can install it using npm (Node Package Manager) by running the following command in your project directory:

npm install @arcgis/core

Step 2: Create a Map Component

Create a new component for your map. In this component, we will use the @arcgis/core to create and display the map.

// MapComponent.js

import MapView from "@arcgis/core/views/MapView";
import Map from "@arcgis/core/Map";

const MapComponent = () => {

  const mapDiv = useRef(null);

  useEffect(() => {
    if (mapDiv.current) {
      /**
       * Initialize application
       */
      const webmap = new Map({
        basemap: "dark-gray-vector"
      });

      const view = new MapView({
        container: mapDiv.current, // The id or node representing the DOM element containing the view.
        map: webmap, // An instance of a Map object to display in the view.
        center: [-117.1490,32.7353],
        scale: 10000000 // Represents the map scale at the center of the view.
      });

      return () => view && view.destroy()

    }
  }, []);

  return <div className="mapDiv" ref={mapDiv} style={{height: '100vh', width: "100%"}}></div>;
}

export default MapComponent;

Code Explanation:

We create a new MapView instance with necessary arguments and render the MapComponent when it succesfully mounts for the first time and destroy the MapView instance when the component unmounts

Step 3: Render the Map Component

Finally, render the map component in your main application component:

// App.js

import React, { Component } from 'react';
import MapComponent from './MapComponent';

class App extends Component {
  render() {
    return (
      <div>
        <h1>My React App</h1>
        <Map />
      </div>
    );
  }
}

export default App;

Now run yarn start in your terminal and open the localhost:3000 in your browser and see the magic 🎉

Conclusion:

Thank you for reading. I hope it was helpful, and let me know your thoughts in the comments. Also, if you would like to connect, I am available on Twitter.

Happy Hacking 🚀.

See you, everyone, in my next blog 👋.