esri / esri-react-boot Goto Github PK

View Code? Open in Web Editor NEW

44.0 14.0 29.0 7.11 MB

Esri ArcGIS JS API + React utilizing Redux and Saga

License: Apache License 2.0

HTML 3.91% JavaScript 89.30% CSS 6.79%

esri-react-boot's Introduction

Esri ArcGIS JS API + React + Redux

Detailed documentation can be found on the wiki: https://github.com/Esri/esri-react-boot/wiki

Features

Ready to deploy React application
Loads Esri's ArcGIS JS API
Map component that supports 2D/3D
Built in Authentication with ArcGIS REST JS
Includes Calcite-React with UI examples

Tech

This project uses a number of open source libraries. We encourage you to become familiar with these libraries before you begin here.

Library	Source
React	https://reactjs.org/
Redux	https://redux.js.org/
Create-React-App	https://facebook.github.io/create-react-app/
Redux-Saga	https://github.com/redux-saga/redux-saga
esri-loader	https://github.com/Esri/esri-loader
ArcGIS JS API	https://developers.arcgis.com/javascript/
ArcGIS REST JS	https://github.com/Esri/arcgis-rest-js
Styled-Components	https://www.styled-components.com/
Calcite-React	https://github.com/Esri/calcite-react

Usage

The project utilizes Node & Node Package Manager to install dependencies and run a local development server. As part of Create-React-App you'll need to install Node (includes NPM) before you can run the Esri-React-Boot:

Node - https://nodejs.org/en/

Installing

Clone the repository and install the dependencies:

$ npm install

Running

Build and run live server:

$ npm start

defaults to http://localhost:3000

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

esri-react-boot's People

Contributors

Stargazers

Watchers

esri-react-boot's Issues

state of map loaded

Hi thanks for such a great work. when ı start the project map loaded but in state doesnt change always false ?

Problems accessing portal with auth

I'm working on a web app that uses a single sign on event in order to allow access to multiple ArcGIS portal items. The general workflow I'm going for is this:

User signs into portal specified in config.json file
Once signed in, authorization info is sent to Redux and stored in "auth" (boilerplate)
An authorization token is pulled from Redux (auth.token) and sent to IdentityManager to access a portal item without having to sign in again

I'm running into problems with the third step. For some reason, when I include step 3 and try to use the initial login to the app, I get the following error:

SyntaxError: JSON Parse error: Unexpected identifier "<CLIENT ID>"
(Where CLIENT ID is the clientID specified in the config.json file)

I'm using the boilerplate code, except I've adapted it slightly to utilize the Javascript 4.18 modules to be more Reactive. I've included my code for Map.js below.

Any guidance on the best workflow to utilize the initial portal sign in to access portal items without a second login?

Map.js:

import React, { useRef, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useSelector } from 'react-redux';

import WebMap from '@arcgis/core/WebMap';
import MapView from '@arcgis/core/views/MapView';
import IdentityManager from '@arcgis/core/identity/IdentityManager';

import MapContext from 'context/MapContext';

const MapContainer = styled.div(({ style, theme }) => ({
  width: '100%',
  height: '100%',
  color: theme.lightGrey1,
  ...style
}));
const Map = ({ children, mapConfig, clientId }) => {
  const mapDiv = useRef(null);
  const auth = useSelector(state => state.auth);
  const [viewObj, setView] = useState(null);
  const [mapObj, setMap] = useState(null);

  useEffect(() => {
    if (auth.token) {
      const portalItem = {
        id: <PORTAL ID>,
        portal: {
          portalUrl: <PORTAL URL>,
          authMode: 'immediate'
        }
      };

      IdentityManager.registerToken(auth.token);

      const map = new WebMap({ ...mapConfig, portalItem });

      if (mapDiv.current) {
        const view = new MapView({
          map,
          container: mapDiv.current,
          ui: {
            components: ['zoom']
          }
        });
        setView(view);
        setMap(map);
      }
    }
  }, [auth]);

  return (
    <MapContext.Provider value={{ viewObj, mapObj }}>
      <MapContainer ref={mapDiv}>{children}</MapContainer>
    </MapContext.Provider>
  );
};

Map.defaultProps = {
  children: null,
  mapConfig: {},
  clientId: ''
};

Map.propTypes = {
  children: PropTypes.any,
  mapConfig: PropTypes.object,
  clientId: PropTypes.string
};

export default Map;

Alternatively, I've been able to get the following workflow to work, but it's not ideal:

Remove portalUrl from config.json
Use OAuthInfo and IdentityManager.registerOAuthInfos()

The problem with this approach is that you don't have a global login accessible in Redux

Import Esri JS API via Webpack plugin

I want to see if using arcgis-webpack-plugin makes for a better development experience.

React Router - Upgrade to v5?

Just had an issue trying to get routes to render properly using <Link> components. The route would render on a full page refresh, but not when using the <Link to="/myroute" /> component in a Header. After some research that really didn't get me anywhere, I just tried upgrading to "react-router-dom": "5.0.0" and the Link components started working. Wish I could be more helpful about what the actual problem was, but hopefully this can be of use to anyone else experiencing the same thing.

Prevent Map Component from re-render if state change

I found this comment inside the project but still i didn't figure out how can i prevent map from reload

Conceptually, this component creates a "portal" in React by
closing its render method off from updates (by simply rendering a div and
never accepting re-renders) then reconnecting itself to the React lifecycle
by listening for any new props (using componentWillReceiveProps)

I want to send location as props to map then map zoom to this location
my issue that the map component keep re-rendering every time the location change

"mapConfig": {
    "basemap": "arcgis-topographic",
    "center": [-118.805, 34.027],
    "zoom": 13
  }

Consistency issues found while following Esri Events video https://www.youtube.com/watch?v=GTXL8YfGS9M

Following basic examples from:
https://www.youtube.com/watch?v=GTXL8YfGS9M

esri-react-boot/src/components/esri/map/Map.js
Line 48 change to:
this.props.config.mapConfig,

(the Map.js example did not work without this change)

Line 84 change to:
this.props.mapLoaded();

esri-react-boot/src/components/esri/map/SceneViewExample.js
Line 48 change to:
this.props.config.mapConfig,