Esri / react-arcgis

A few components to help you get started using the ArcGIS API for JavaScript and esri-loader with React
Apache License 2.0
318 stars 79 forks source link

Using custom MapImageLayer #203

Closed richardboss closed 2 years ago

richardboss commented 3 years ago

I have been trying to add my own API layer on the map but I cant get it to work.

`import { Component } from "react"; import { Basemap, MapImageLayer, Map } from "react-arcgis"; import { loadModules } from "esri-loader";

class App extends Component { constructor(props) { super(props);

this.state = {
  map: this.props.map
};

this.props.view.set({
  map: this.state.map,
  center: [26, 61.5],
  zoom: 6
});

}

componentDidMount() { loadModules(["esri/layers/MapImageLayer"]) .then(([MapImageLayer]) => { const newMapImageLayer = new MapImageLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", title: "MapImageLayer" });

    //Attempt nr 1
    this.state.map.add(newMapImageLayer);

    //Attempt nr 2
    this.setState({
      map: new Map({
          basemap: "dark-gray-vector",
          layers: [newMapImageLayer]
      })
  })
  })
  .catch((err) => console.error(err));

}

render() { return null; } }

export default App; `

I have tried many other ways but the two I am showing here are not adding the layer. I also get this error: [esri.support.LayersMixin] #add() The item being added is not a Layer or a Promise that resolves to a Layer.

I have also tried to do it in codeSandBox: box

tomwayson commented 2 years ago

See the "If you want to access the map and view instances directly after they are loaded, pass in an onLoad handler:" section of the readme.

Closing as we are archiving this repo