- React App w/ TS
- Using 4.18.1 API via ESM (ES Modules)
After using `npm start` everything works normal and the map shows up. However, following a refresh, esri throws a ton of errors into the console saying mostly:
intl:message-bundle-error
It almost seems like some elements cannot be loaded upon a refresh and I am unsure why.
[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Attribution s {name: "intl:message-bundle-error", details: {…}, message: "Errors occurred while loading "esri/widgets/Attribution/t9n/Attribution""}
[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Zoom s {name: "intl:message-bundle-error", details: {…}, message: "Errors occurred while loading "esri/widgets/Zoom/t9n/Zoom""}
There are a few others, but I wont keep posting the same error.
Code
const Map = (props: any) => {
const classes = useStyles();
const mapDiv = useRef(null);
useEffect(() => {
if (mapDiv.current) {
const geoJSONLayer = new GeoJSONLayer({
url: process.env.PUBLIC_URL + "/example.json",
outFields: ["*"]
});
const map = new ArcGISMap({
basemap: "topo",
ground: "world-elevation",
layers: [geoJSONLayer]
});
const view: any = new SceneView({
container: mapDiv.current!,
map: map,
camera: {
position: {
x: -117.2894323197821, //Longitude
y: 33.1323345199911, //Latitude
z: 3000 //Meters
},
tilt: 0
}
});
view.when(function () {
// allow navigation above and below the ground
map.ground.navigationConstraint = {
type: "none"
};
// to see through the ground, set the ground opacity to 0.4
// map.ground.opacity = 0.4;
});
}
}, []);
return (
<>
<div className={classes.mapImage} ref={mapDiv}>
</div>
</>
);
}
