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

[HariKrishnaInukollu]

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

[JamesIng · Accepted solution]

@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" }
    )

[HariKrishnaInukollu]

Thanks @JamesIng for the reply, since I have the current implementation in react JSX. Could you please provide it in React JSX?

`

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

`

[JamesIng]

@HariKrishnaInukollu 
Your implementation is likely to be different depending on what other children or components your hoping to render, but this is effectively a basic translation of your example above into React using the esri JS framework.

I've just created various constants to fill in the blank variables.

import React, { useEffect, useState } from "react";
import MapView from "@arcgis/core/views/MapView";
import WebMap from "@arcgis/core/Map";
import esriConfig from "@arcgis/core/config";
import { ESRI_API_KEY } from "../../constants";
import AnotherComponent from "./AnotherComponent";

export default function MapViewer({}) {
  useEffect(() => {
    const fullEarthGeometry = {
      type: "polygon",
      rings: [
        [
          [-180, 90],
          [180, 90],
          [180, -90],
          [-180, -90],
          [-180, 90]
        ]
      ]
    };
    const zoomedOutEarthScale = 591657527.591555;
    const extent = {
      xmin: -180,
      ymin: -90,
      xmax: 180,
      ymax: 90,
      spatialReference: {
        wkid: 4326
      }
    };
    const setupMap = () => {
      esriConfig.apiKey = ESRI_API_KEY;
      const map = new WebMap({
        basemap: "arcgis-imagery"
      });
      const view = new MapView({
        container: "mapView",
        map: map,
        zoom: 12,
        constraints: {
          geometry: fullEarthGeometry,
          minScale: zoomedOutEarthScale,
          rotationEnabled: false
        },
        popup: {
          dockOptions: {
            buttonEnabled: false
          }
        },
        extent
      });
      view.ui.move(["zoom"], "top-right");
    };
    setupMap();
  }, []);

  return (
    <div id="map-wrapper">
      <div id="mapView"></div>
      <AnotherComponent />
    </div>
  );
}