Error while loading loading map.

Valgenmap · ‎04-14-2021

I'm using React [^17.0.1] and arcgis-js-api [^4.18.1] for the app,

After 'npm start' I'm receiving the below errors,

[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Attribution TypeError: t is not a constructor

[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Zoom TypeError: t is not a constructor

[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Popup TypeError: t is not a constructor

[esri.Basemap] #load() Failed to load basemap (title: 'Basemap', id: 'gray-vector') TypeError: t is not a constructor

Zoom.js:5 Uncaught (in promise) TypeError: Cannot read property 'zoomIn' of null

Code:

import React, { useState, useRef, useEffect } from 'react';
import { Card, CardBody, CardTitle } from 'reactstrap';
import ArcGISMap from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';
import esriConfig from '@arcgis/core/config';

import '../../assets/css/map.css';

const SalesChartCard = () => {
  esriConfig.assetsPath = '../node_modules/@arcgis/core/assets';

  const mapDiv = useRef(null);

  useEffect(() => {
    if (mapDiv.current) {
      /**
       * Initialize application
       */
      const map = new ArcGISMap({
        basemap: 'gray-vector',
      });

      /* eslint-disable no-unused-vars */
      const view = new MapView({
        map,
        container: mapDiv.current,
        extent: {
          spatialReference: {
            wkid: 102100,
          },
          xmax: -13581772,
          xmin: -13584170,
          ymax: 4436367,
          ymin: 4435053,
        },
      });
      /* eslint-enable no-unused-vars */
    }
  }, []);

  const [isInFullScreen, setIsInFullScreen] = useState(false);

  const isInFullScreenFn = () => {
    return (
      (document.fullscreenElement && document.fullscreenElement !== null) ||
      (document.webkitFullscreenElement &&
        document.webkitFullscreenElement !== null) ||
      (document.mozFullScreenElement &&
        document.mozFullScreenElement !== null) ||
      (document.msFullscreenElement && document.msFullscreenElement !== null)
    );
  };

  const toggleFullScreen = () => {
    const isFS = isInFullScreenFn();

    const docElm = document.documentElement;
    if (!isFS) {
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
      }
    } else if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    setIsInFullScreen(!isFS);
  };

  return (
    <Card>
      <button
        className="position-absolute card-top-buttons header-icon btn btn-empty d-none d-sm-inline-block"
        type="button"
        id="fullScreenButton"
        onClick={toggleFullScreen}
      >
        {isInFullScreen ? (
          <i className="simple-icon-size-actual d-block" />
        ) : (
          <i className="simple-icon-size-fullscreen d-block" />
        )}
      </button>
      <CardBody>
        <CardTitle>Map</CardTitle>
        <div className="mapDiv" ref={mapDiv} />
      </CardBody>
    </Card>
  );
};

export default SalesChartCard;

package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "precommit": "lint-staged",
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",
    "postinstall": "npm run copy"
  }

I tried the solution mentioned in this post

NicoleSulzberger · ‎04-21-2021

I am having the same issue. As long as I serve the application from

http://localhost:4200 it works fine, but when I publish it to a subfolder,

http://localhost:4200/storme/web/private/home i am getting errors.

I can see that it tries to load the assets from /storme/web/assets/esri/widgets, but I would expect it to load from /storme/web/private/assets/esri/widgets.

I wonder if it has to do with routing, as the "home" part from my url is part of the routing, and not from the web app base path.

I am setting now the assets path static to /storme/web/private/assets/

AndyGup · ‎04-21-2021

It sounds like your assetsPath isn't configured correctly for the subfolder. Are you using the AMD or ES modules (arcgis-js-api or @arcgis/core)?

Version 4.19 which is releasing in the next few days has a fix for this. At 4.19 the assets will be pulled from CDN by default so there's no need to configure assetsPath unless you need local assets. You can test this by updating to the "next" version and commenting out your config.assetsPath:

npm i @arcgis/core@next

NicoleSulzberger · ‎04-21-2021

we are using the ES modules. Thanks for letting me know, looking forward to the next release then 🙂

Valgenmap · ‎04-27-2021

I have updated the npm packages in the repo, now I am able to see the Map loading in the app.

Now I'm using

"@arcgis/core": "^4.19.1"

Thank you @AndyGup

I am trying to add featureLayer on the Map., but not able to see the feature layer.

Am I following the right track to bring the feature layer into app. Kindly guide me on this.

Here is the below code,

SalesChartCard.js

import React, { useState } from 'react';
import { Card, CardBody, CardTitle } from 'reactstrap';

import IntlMessages from '../../helpers/IntlMessages';

import Map from '../../components/mapcomponent/map';
import MyFeatureLayer from '../../components/mapcomponent/Layers/MyFeatureLayer';

const SalesChartCard = () => {
  const [isInFullScreen, setIsInFullScreen] = useState(false);

  const isInFullScreenFn = () => {
    return (
      (document.fullscreenElement && document.fullscreenElement !== null) ||
      (document.webkitFullscreenElement &&
        document.webkitFullscreenElement !== null) ||
      (document.mozFullScreenElement &&
        document.mozFullScreenElement !== null) ||
      (document.msFullscreenElement && document.msFullscreenElement !== null)
    );
  };

  const toggleFullScreen = () => {
    const isFS = isInFullScreenFn();

    const docElm = document.documentElement;
    if (!isFS) {
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
      }
    } else if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    setIsInFullScreen(!isFS);
  };

  return (
    <Card>
      <div className="position-absolute card-top-buttons">
        <button
          className="header-icon btn btn-empty d-none d-sm-inline-block"
          type="button"
          id="fullScreenButton"
          onClick={toggleFullScreen}
        >
          {isInFullScreen ? (
            <i className="simple-icon-size-actual d-block" />
          ) : (
            <i className="simple-icon-size-fullscreen d-block" />
          )}
        </button>
      </div>
      <CardBody>
        <CardTitle>
          <IntlMessages id="dashboards.map" />
        </CardTitle>
        <Map>
          <MyFeatureLayer />
        </Map>
      </CardBody>
    </Card>
  );
};

export default SalesChartCard;

map.js

/* eslint-disable */
import React, { useRef, useEffect } from 'react';
import ArcGISMap from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';

import '../../assets/css/map.css';

const Map = () => {
  const mapDiv = useRef(null);

  useEffect(() => {
    if (mapDiv.current) {
      /**
       * Initialize application
       */
      const map = new ArcGISMap({
        basemap: 'gray-vector',
      });

      /* eslint-disable no-unused-vars */
      const view = new MapView({
        map,
        container: mapDiv.current,
        center: [-95.7129, 37.0902],
        zoom: 3,
      });
      /* eslint-enable no-unused-vars */
      view.ui.move('zoom', 'bottom-left');
    }
  }, []);
  return <div className="mapDiv" ref={mapDiv} />;
};

export default Map;

MyFeatureLayer.js

import { useEffect, useState } from 'react';
import FeatureLayer from '@arcgis/core/layers/FeatureLayer';

function MyFeatureLayer(props) {
  console.log(props);
  const [myFeatureLayer, setMyFeatureLayer] = useState(null);
  useEffect(() => {
    // eslint-disable-next-line no-shadow
    const myFeatureLayer = new FeatureLayer({
      url:
        'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2',
    });

    setMyFeatureLayer(myFeatureLayer);
    props.map.add(myFeatureLayer);

    return function cleanup() {
      props.map.remove(myFeatureLayer);
    };
  }, [myFeatureLayer, props]);
  return null;
}

export default MyFeatureLayer;

AndyGup · ‎04-27-2021

@Valgenmap I'm not sure what's going on. This code doesn't look right:

        <Map>
          <MyFeatureLayer />
        </Map>

There is a working example you can look at here: https://github.com/Esri/nearby-javascript. And just for reference:

View code - https://github.com/Esri/nearby-javascript/blob/master/src/components/WebMapView.tsx

FeatureLayer - https://github.com/Esri/nearby-javascript/blob/master/src/data/layers.ts#L91

Dogan · ‎05-31-2021

Hi Andy,

I have also similar problem in our application, and could not figure out where is the problem.

Any ideas on that?