Select to view content in your preferred language

<Map> component doesn't have children property: Migrating @esri/react-arcgis to @arcgis/core

107
1
Jump to solution
Monday
HariKrishnaInukollu
New Contributor II

Hello Team,

We are using the <Map> Component from the @esri/react-arcgis library and it has the properties like viewProperties, children.

 

 

<Map
    viewProperties={{
       extent,
       zoom: 12,
       popup: {
         dockOptions: {
           buttonEnabled: false,
         },
       },
       constraints: {
         geometry: fullEarthGeometry,
         minScale: zoomedOutEarthScale,
         rotationEnabled: false,
       },
     }}
   >
     {props.children}
     <AnotherComponent />
   </Map>

 

 

Now, we are migrating the @esri/react-arcgis to @ArcGIS/core library, however, the new library doesn't support the above properties like children and viewProperties. Could you please guide me.

 

Thanks,

Hari

0 Kudos
1 Solution

Accepted Solutions
JamesIng
New Contributor III

@HariKrishnaInukollu 
If you're using /core you create a object from the class Map, and then can just access it's properties directly.
Same applies for MapView.
The 'container' property refers to a div with a matching ID.

e.g:

import MapView from "@arcgis/core/views/MapView"


    const mapView = new MapView({
      container: "mapView",
      map: webMap,
      constraints: {
        minScale: 70000,
        maxScale: 1000,
      },
    })

 
So you wouldn't use children any more, as the map is it's own item in the DOM, 
But you can add widgets and such using the .ui property:

import Compass from "@arcgis/core/widgets/Compass"


    mapView.ui.add(
      new Compass({
        view: mapView,
      }),
      { position: "top-left" }
    )

 

James from www.landkind.com

View solution in original post

0 Kudos
1 Reply
JamesIng
New Contributor III

@HariKrishnaInukollu 
If you're using /core you create a object from the class Map, and then can just access it's properties directly.
Same applies for MapView.
The 'container' property refers to a div with a matching ID.

e.g:

import MapView from "@arcgis/core/views/MapView"


    const mapView = new MapView({
      container: "mapView",
      map: webMap,
      constraints: {
        minScale: 70000,
        maxScale: 1000,
      },
    })

 
So you wouldn't use children any more, as the map is it's own item in the DOM, 
But you can add widgets and such using the .ui property:

import Compass from "@arcgis/core/widgets/Compass"


    mapView.ui.add(
      new Compass({
        view: mapView,
      }),
      { position: "top-left" }
    )

 

James from www.landkind.com
0 Kudos