Hello, apologies in advance, I'm a fairly fresh Esri JS developer.
I'm trying to create a custom class extending the MapView class in a React application using the arcgis/core package.
If I use the standard MapView class it works fine, if I create a custom subclass (even with no constructor/super at all), it just displays a blank white page. The same method worked fine for the Map class, but the MapView is giving me trouble. I'm not sure how much of this code I can share, so for the time being I'm hoping someone can confirm that it is indeed possible to extend the MapView class like I would any other?
In summary, the code is being called in the top-level app component, and sends the map/mapview to the mapframe window. I'm sending it from there because I need to share it with a sibling component (side bar).
Here's my cMapView (the extended class)
import View from "@arcgis/core/views/MapView";
export default class cMapView extends MapView {
constructor({ map, extent }) {
super();
this.map = map;
this.extent = extent;
}
}
Here's the top level cApp.jsx component:
import React, { useState } from "react";
import cMap from "../js/cMap";
import cMapFrame from "./cMapFrame";
import cMapView from "../js/cMapView";
import { startingExtent as extent } from "../constants/Constants";
const cApp = () => {
const [map] = useState(new cMap());
const cMapView = new cMapView({
map,
extent,
});
return (
<>
<cMapFrame mapView={cMapView} />
</>
);
};
export default cApp;
And here's the MapFrame.jsx:
import React, { useEffect, useRef } from "react";
const cMapFrame = ({ mapView }) => {
const mapRef = useRef(null);
useEffect(() => {
if (mapRef.current) {
mapView.container = mapRef.current;
}
}, []);
return (
<>
<div ref={mapRef} className="viewDiv" />
</>
);
};
export default cMapFrame;
Thanks in advance for any help anyone can provide, it's been a steep learning curve.
