esri-loader-react

A React component wrapper around esri-loader

Version 2.x of this library is compatible with esri-loader 1.5.0 and higher.

Usage

npm install react react-dom prop-types esri-loader esri-loader-react

Mount the loader component to load the Esri JS API when you will need it in your app. You can pass in the options that get forwarded to the esri-loader loadModules function.

You can still use this component as a means of pre-loading the Esri JS API though it is less useful now that esri-loader version 1.5.0 onward is basically a 1-liner to do this. Instead, the main usage of this component is likely to be ensuring that the Esri JS API is ready to use and the modules you need are available and these can then be used to do something in your UI with a DOM node mounted for you to use. If you don't need to auto inject a container node into your UI then set renderMapContainer={false}. You can pass through children to be rendered too.

import React, {PureComponent} from 'react';
import EsriLoaderReact from 'esri-loader-react';

class AppMain extends PureComponent {

  render() {
    const options = {
      url: 'https://js.arcgis.com/4.6/'
    };

    return (
      <EsriLoaderReact 
        options={options} 
        modulesToLoad={['esri/Map', 'esri/views/MapView']}    
        onReady={({loadedModules: [Map, MapView], containerNode}) => {
          new MapView({
            container: containerNode,
            map: new Map({basemap: 'oceans'})
          });
        }}
      />
    );
  }
}

you can still use the functions from esri-loader elsewhere in your code as needed.

The component has the following properties

EsriLoaderReact.propTypes = {
  renderMapContainer: PropTypes.bool, // default is true
  mapContainerClassName: PropTypes.string, // default is 'map-view'
  modulesToLoad: PropTypes.arrayOf(PropTypes.string),
  options: PropTypes.shape({
    url: PropTypes.string,
    dojoConfig: PropTypes.object
  }),
  onError: PropTypes.func, // (error, info) => also called from componentDidCatch, default is onError: (error, info) => console.error(error),
  onReady: PropTypes.func, // ({loadedModules, containerNode}) => containerNode is null if renderMapContainer !== true
};

Build locally

npm install
npm run build

you can run the demo using npm start

Examples

davetimmins/esri-loader-react

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Error
Looks like something went wrong!

Packages