Never-ending Pumpkin Mulch

    react-arcgis-wmws

    0.2.4 • Public • Published

    react-arcgis-wmws

    React ArcGIS Online WebMap / WebScene Component

    Purpose

    A proof of concept component for displaying and interacting with ArcGIS Online WebMaps and WebScenes, using the more modern ES modules based @arcgis/core library for the ArcGIS JS API v 4.x

    Installation

    npm i react-arcgis-wmws

    Peer dependencies

    • react >=16.8
    • react-dom >=16.8
    • @arcgis/core >=4.18

    Use

    Viewer displaying a WebMap

    import {Viewer} from 'react-arcgis-wmws';
    <Viewer
      dimension="2d"
      itemId="f2e9b762544945f390ca4ac3671cfa72"
      style={{height:60vh}}
    />

    Viewer displaying a WebScene

    import {Viewer} from 'react-arcgis-wmws';
    <Viewer
      dimension="3d"
      itemId="1c7a06421a314ac9b7d0fae22aa367fb"
      style={{height:60vh}}
    />

    Table displaying feature data from a URL

    import {TableView} from 'react-arcgis-wmws';
    <TableView
      url="https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Chicago_Covid_Daily_Cases_Deaths_and_Hospitalizations/FeatureServer/0"
      style={{height:60vh}}
    />

    Table displaying feature data from an ItemId

    import {TableView} from 'react-arcgis-wmws';
    <TableView
      itemId="6aa49be79248400ebd28f1d0c6af3f9f"
      style={{height:60vh}}
    />

    API

    react-arcgis-wmws exposes two named exports:

    1. Viewer
    2. TableView

    Viewer component exposes the following attributes:

    • dimension = "2d" | "3d" (required)
    • itemId = ArcGIS Online item ID string for a public WebMap or WebScene (required - ids for other item types will not work)
    • dockPopup = boolean - OPTIONAL default true - Should the popup be docked by default or not
    • showLegend = boolean - OPTIONAL default false - Should a legend be shown
    • env = "prod" (default) | "qa" | "uat" | "dev" - OPTIONAL (only useful to developers / applications with access to ArcGIS Online development or QA environments)

    TableView component exposes the following attributes:

    • itemId = ArcGIS Online item ID string for a public FeatureLayer or SceneLayer
    • url = Fully qualified URL string to a public FeatureLayer or SceneLayer
    • layer = Actual FeatureLayer or SceneLayer object
    • env = "prod" (default) | "qa" | "uat" | "dev" - OPTIONAL (only used in conjunction with itemId and only useful to developers / applications with access to ArcGIS Online development or QA environments)

    TableView Requires 1 and only 1 of the following attributes itemId, url, or layer. Adding more than 1 of these will cause some of them to be ignored and can also result in errors.

    import and require are both supported

    Only import can be used since this relies on a peer of an ES module only package

    import {Viewer} from 'react-arcgis-wmws

    NOTE

    Both Viewer and TableView components MUST be given a real height (something that eventually resolves to a pixel value). You can achieve this by giving it an inline-style or assigning an id and using css to style the component. You can not use class(es) on either the Viewer or TableView component, they will be completely removed and overwritten by the @arcgis/core library.

    Integration in your project

    The Viewer component wraps the MapView and SceneView classes from the ArcGIS JS API. These classes bring the full power and weight of the ArcGIS JS API in order to display whatever what was configured to show in the map / scene. The TableView component wraps the FeatureTable widget. The initial basic styling is included in both the Viewer and TableView components directly. However, dynamically loaded styles, workers, and scripts can not be reasonably included directly in these components. This is why "@arcgis/core" is a peer dependency.

    In order for the dynamic loading of the required parts of the ArcGIS JS API to work, you have 2 choices:

    1. Load the files from a CDN.
    2. Load the files from your own website.

    Option #1 is the simplest and just requires that you include a CSS import statement pointing to the CSS file for the version of the ArcGIS JS API you are using and the appropriate color theme. For example, for version 4.19, you could use the following statement:

    @import "https://js.arcgis.com/4.19/@arcgis/core/assets/esri/themes/light/main.css";

    If you choose to host and manage the @arcgis/core assets yourself you will need to do 2 things:

    1. Copy the files from @arcgis/core/assets into an available location where you serve static files from.
    2. Set the assetsPath property of @arcgis/core/config.

    You can follow along or do something similar to the instructions at @arcgis/core - Manage assets locally for your own project.

    Development

    1. Clone the repo
    git clone git@github.com:mpriour/react-arcgis-wmws.git
    -or-
    git clone https://github.com/mpriour/react-arcgis-wmws.git
    1. cd into react-arcgis-wmws
    2. run npm i
    3. make changes to the "library"
    4. test using Storybook -npm run storybook
    5. test that it builds -npm run build
    6. make a pull request to the repo

    Install

    npm i react-arcgis-wmws

    DownloadsWeekly Downloads

    3

    Version

    0.2.4

    License

    ISC

    Unpacked Size

    16.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • mpriour