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} />;
};
Using the ArcGIS API for JavaScript with React
There are two ways to use the ArcGIS API for JavaScript with React.
- Use
@arcgis/webpack-pluginfor basic React applications using webpack. - Use
esri-loaderwith tools likecreate-react-app.
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 { 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 acontainerto 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} />
);
}
}
React.createRef()lets you get a reference to the rendered DOM element you can assign to the View.- In
componentDidMount(), you can assign acontainerto a MapView.
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'),
);