Skip To ContentArcGIS for DevelopersSign In Dashboard

Using the ArcGIS API for JavaScript with React

There are two ways to use the ArcGIS API for JavaScript with React.

Please refer to the webpack and esri-loader documentation for more details.

Installation

Once you have set up your React application, you can use your preferred method of using the ArcGIS API for JavaScript.

@arcgis/webpack-plugin

npm install --save @arcgis/webpack-plugin

esri-loader

npm install --save esri-loader

React Hooks

React is typically used to create UI components for an application. You can create a React component to display your map using React hooks.


import React, { useEffect, useRef } from 'react';
import ArcGISMap from 'esri/Map';
import MapView from 'esri/views/MapView';

export const WebMapView = () => {
    const mapRef = useRef();

    useEffect(
      () => {
        // create map
        const map = new ArcGISMap({
          basemap: 'topo-vector'
        });
    
        // load the map view at the ref's DOM node
        const view = new MapView({
          container: mapRef.current,
          map: map,
          center: [-118, 34],
          zoom: 8
        });

        return () => {
          if (view) {
            // destroy the map view
            view.container = null;
          }
        };
      }
    );

    return <div className="webmap" ref={mapRef} />;
};

import React, { useEffect, useRef } from 'react';
import { loadModules } from 'esri-loader';

export const WebMapView = () => {
    const mapRef = useRef();

    useEffect(
      () => {
        // lazy load the required ArcGIS API for JavaScript modules and CSS
        loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
        .then(([ArcGISMap, MapView]) => {
          const map = new ArcGISMap({
            basemap: 'topo-vector'
          });

          // load the map view at the ref's DOM node
          const view = new MapView({
            container: mapRef.current,
            map: map,
            center: [-118, 34],
            zoom: 8
          });

          return () => {
            if (view) {
              // destroy the map view
              view.container = null;
            }
          };
        });
      }
    );

    return <div className="webmap" ref={mapRef} />;
};
  • With the useRef() hook, you can get a reference to a DOM element that is created with a React component.
  • With the useEffect() hook, you can manage lifecycle events such as assigning a container to an instance of a MapView when the component is rendered.

React Class

Another option is to extend a React class to create React components.


import React from 'react';
import ArcGISMap from 'esri/Map';
import MapView from 'esri/views/MapView';

export class WebMapView extends React.Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef();
  }

  componentDidMount() {
    // create map
    const map = new ArcGISMap({
      basemap: 'topo-vector'
    });
    // load the map view at the ref's DOM node
    this.view = new MapView({
      container: this.mapRef.current,
      map: map,
      center: [-118, 34],
      zoom: 8
    });
  }

  componentWillUnmount() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }

  render() {
    return (
      <div className="webmap" ref={this.mapRef} />
    );
  }
}
import React from 'react';
import { loadModules } from 'esri-loader';

export class WebMapView extends React.Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef();
  }

  componentDidMount() {
    // lazy load the required ArcGIS API for JavaScript modules and CSS
    loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
    .then(([ArcGISMap, MapView]) => {
      const map = new ArcGISMap({
        basemap: 'topo-vector'
      });

      this.view = new MapView({
        container: this.mapRef.current,
        map: map,
        center: [-118, 34],
        zoom: 8
      });
    });
  }

  componentWillUnmount() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }

  render() {
    return (
      <div className="webmap" ref={this.mapRef} />
    );
  }
}

Render

No matter how you created the component above, it is rendered in the same way. First you need to ensure the view's container has a non-zero height:

.webmap {
  height: 400px;
}

You can now render your component like any other React component.

import React from 'react';
import ReactDOM from 'react-dom';

import { WebMapView } from './components/WebMapView';


ReactDOM.render(
    <WebMapView />,
    document.getElementById('root'),
);
Content