topic Re: <Map> component doesn't have children property: Migrating @esri/react-arcgis to @arcgis/core in ArcGIS JavaScript Maps SDK Questions

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

HariKrishnaInukollu — Mon, 17 Jun 2024 17:54:27 GMT

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

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

JamesIng — Mon, 17 Jun 2024 21:14:35 GMT

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

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

HariKrishnaInukollu — Tue, 25 Jun 2024 03:22:44 GMT

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>

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

JamesIng — Tue, 25 Jun 2024 03:47:36 GMT

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