How to extend MapView class?

succip

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.

RRubalcava

I tried extending it and same result. I don't think it's going to work as expected. Could need the TypeScript decorators too, but not sure. I would avoid this approach.