Skip to content
This repository has been archived by the owner. It is now read-only.
🌱 Legend control for ArcGIS JS v4 using React and Redux
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src add link to esri equiv Apr 19, 2018
docs v3 release Jan 3, 2018
src deps update Jan 7, 2018
tests switch to nwb #13 Jun 19, 2017
.gitattributes 👾 Added .gitattributes May 11, 2016
.gitignore switch to nwb #13 Jun 19, 2017
.travis.yml switch to nwb #13 Jun 19, 2017 switch to nwb #13 Jun 19, 2017 add link to esri equiv Apr 19, 2018
legend.gif update gif Jan 23, 2017
nwb.config.js deps update Nov 9, 2017
package-lock.json add link to esri equiv Apr 19, 2018
package.json add link to esri equiv Apr 19, 2018

ArcGIS JS API V4 Legend


Combined legend and layer list control for the ArcGIS JS API V4.6+ that uses React and Redux

legend gif

Run locally

grab this repo (fork / download) then run npm install wait a while and then get running with npm start then go to http://localhost:3000. You can also append a webmap query paramter to load a webmap from ArcGIS Online http://localhost:3000?webmap=8e42e164d4174da09f61fe0d3f206641.


If you are using 4.3 or lower of the ArcGIS JS API then make sure you use version 1.x of this control, version 2.x is for the ArcGIS API v4.4 to v4.6., version 3.x is for v4.6 or higher

You can now achieve similar functionality using the base ArcGIS JS API with this example so consider that as an alternative to this component

To add to your site first make sure you have the dependencies installed, we assume you are using React, Redux and Esri Loader. For the full list refer to the package.json peerDependencies.

npm install esri-loader prop-types react react-dom react-redux redux redux-thunk arcgis-react-redux-legend

you can also use this with Preact by including preact-compat, see preact-legend

Now add the reducer

import {combineReducers} from 'redux';
import {reducer as mapLegendReducer} from 'arcgis-react-redux-legend';

const reducer = combineReducers(
    mapLegendConfig: mapLegendReducer

then where you are creating your map control you need to add the MapLegend component and initialise it

import {MapLegend,setInitialLegend} from 'arcgis-react-redux-legend';

// bootstrap the Esri API using esri-loader and create your view
// mapId should be the unique name / id to identify the map. 
// You can add multiple maps and legends so long as the mapId is unique
this.props.dispatch(setInitialLegend(view, mapId));
// in your render function, use the ref to pass to the Esri JS API when creating the map and view
<div ref={node => (this.mapView = node)}>
  <MapLegend mapId={mapId} title='My awesome legend' />

setInitialLegend will listen for your view being ready and also watch the scale changing so that the legend scale dependency updates accordingly.

For a complete example check out the source in the docs folder for map-view

Currently supports MapImageLayers, FeatureLayers, GraphicsLayers, StreamLayers, SceneLayers, PointCloudLayers, and MapNotesLayers.

You can’t perform that action at this time.