topic Re: How to extend MapView class? in ArcGIS JavaScript Maps SDK Questions

How to extend MapView class?

succip — Fri, 28 Jan 2022 00:21:53 GMT

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.

Re: How to extend MapView class?

ReneRubalcava — Fri, 28 Jan 2022 00:06:07 GMT

The views/View class is the base class, it doesn't do anything useful like draw.

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html

You want the views/MapView class. Out of curiosity, what are you trying to accomplish extending the MapView?

Re: How to extend MapView class?

succip — Fri, 28 Jan 2022 00:26:02 GMT

Hi Rene, thanks for your help.

Sorry that's a typo, I am in fact using the MapView class.

I have to set custom events like the mapview.on("layerview-create") and I thought I'd want to keep that in the mapview class instead of in my <App /> component but maybe I should rethink this approach?

Re: How to extend MapView class?

ReneRubalcava — Fri, 28 Jan 2022 00:34:13 GMT

It's not usually a class people extend. Most custom classes are Layers. It's an edge case, but usually you can accomplish stuff like that with specific property watching and updating app state as needed.

https://developers.arcgis.com/javascript/latest/programming-patterns/#properties

You can definitely try, and see if it meets your needs. Exciting stuff!

Re: How to extend MapView class?

ReneRubalcava — Fri, 28 Jan 2022 00:38:59 GMT

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.

Re: How to extend MapView class?

succip — Fri, 28 Jan 2022 16:14:04 GMT

Okay well that confirms it. Thanks again for your help.