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
Solved! Go to 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
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" }
)
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>
`
@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>
);
}