Map not loading

I am working on adding the react-arcgis library to my application but I am not able to get the map to complete the initial load.

As of right now it just renders "Loading..." at the top of the screen and never completes beyond that. If I remove the stylesheet link in the index.html page, the map will render but just infinitely scroll.

My package.json is using

"@esri/react-arcgis": "^4.0.0",
"react": "^16.7.0"

My index.html looks like so:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
    <style>
      html,
      body,
      #root {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

And my React component is

import * as React from "react";
import { Map } from "@esri/react-arcgis";

export class App extends React.Component<{}, {}> {
    public render() {
        return (
            <div>
                <Map />
            </div>
        );
    }
}

Hi, can you please help us with the above issue. Also, even if I do include the css file the map will infinitely scroll and eventually the browser just lags and stop responding

i think you just need to tell react-arcgis which DOM node to associate with the map like we do in the demo app inside the repo.

react-arcgis/demo/src/index.js

Lines 22 to 23 in b122207

    
           </Map>, 
        
           document.getElementById('root')

@jgravois I also tried that but the same problem occurs, sometimes the map loads but the scrolling continues. Sometimes it doesn't. Is there any in-depth documentation of these methods with examples somewhere?

@jgravois yeah I do have that in my code as well. I forgot to post that part of the code in my original answer but here is my creation of the react components

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { HashRouter } from "react-router-dom";
import { App } from "./app/App";
import configureStore from "../stores/configureStore";

const configuredStore = configureStore();

const app = (
    <Provider store={configuredStore}>
        <HashRouter>
            <App />
        </HashRouter>
    </Provider>
);

ReactDOM.render(app, document.getElementById("root"));

Yet the rendered page just says "Loading...".

@masonch and @puranjayjain

It appears this library requires the DOM node that will contain the map/scene view to have a height that is explicitly declared.

In your case @masonch all you should have to do is either remove the extra <div> around the <Map /> component or add a CSS class or inline styles that apply and explicit height/width like so:

CSS:

.app {
  height: 100%;
  width: 100%;
}

App component:

import * as React from "react";
import { Map } from "@esri/react-arcgis";

export class App extends React.Component<{}, {}> {
    public render() {
        return (
            <div className="app">
                <Map />
            </div>
        );
    }
}

Here's a working code sandbox: https://codesandbox.io/s/j23x65l9ov

@tomwayson Ah the style trick did the magic, the map seems to be rendering now correctly. We should mention that in the docs too though. Thank you!

@tomwayson Yeah adding a style fixed the render for me. I will go ahead and close this issue.

if you two have any specific suggestions to improve the documentation, a pull request would be most welcome.

By default the components from react-arcgis fill their containing element. Unfortunately this means that without a containing element having some dimensions, the map will be 0x0. It looks like it isn't loading at all though, which probably means an error bubbling out of the API isn't being handled properly.

I'll take a look and see if we can do some better messaging around this.

I'd rather not change the default because it would be a breaking change for some people, even though I think the most common use-case is likely just to fill the entire screen with the map.