Map Component: Switching maps triggers error with null viewpoint

327
2
Jump to solution
04-18-2024 09:54 PM
GeoGalvanic
New Contributor

Hello,

 

I'm trying out some of the new map components with ESM in NPM. I'm changing the WebMap of the map component programmatically and it's reporting an error.

 

Taking this minimal sample:

 

 

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Null target geometry example</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
    <script type="module" src="/public/dist/arcgis-map-components.bundle.js"></script>
  </head>
  <body>
    <arcgis-map id="map-component">
    </arcgis-map>
  </body>
</html>

 

 

 

 

The typescript src for arcgis-map-components.bundle.js:

 

 

 

import { defineCustomElements as defineMapElements } from "@arcgis/map-components/dist/loader";
import WebMap from "@arcgis/core/WebMap";

/**
 * Define and lazy load the component package.
 */
defineMapElements();

const myWebmap = new WebMap({
    basemap: "dark-gray",
});

/**
 * Use `document.querySelector()` to get a reference to the `arcgis-map` component.
 * Add an event listener for the `arcgis-map` component's `viewReadyChange` event.
 */
document
  .querySelector("arcgis-map")
  .addEventListener("arcgisViewReadyChange", async (event) => {
    /**
     * Get a reference to the `WebMap`
     * from the `event.detail` object.
     */
    event.target.view.map = myWebmap; 
    // Add more functionality here.
  }, {once: true});

 

 

 

 

This base example does work however it is reporting a TypeError. 

TypeError: Cannot read properties of null (reading 'targetGeometry')

Chasing down the error shows that it occurs in:

 

 

 

function isNotSameViewpoint(viewpoint, viewpoint2) {
    return (viewpoint2 === undefined || viewpoint.targetGeometry !== 
        viewpoint2.targetGeometry || viewpoint.rotation !== 
        viewpoint2.rotation || viewpoint.scale !== viewpoint2.scale);
}

 

 

 

The new webmap object seems to have null viewpoint (makes sense maybe, it's not in the view yet). The comparison above only checks if viewpoint is undefined and not null, so it errors out when the comparison tries to access the targetGeometry property.

 

I'm trying to make a codepen to reproduce the issue, but it is instead resulting in a separate error code:

"Accessor#set" "Assigning an instance of 'esri.WebMap' which is not a subclass of 'esri.Map'"

Codepen here: https://codepen.io/geogalvanic/pen/eYoPqdO?editors=1111 

Edit: Somehow the below seems to be working now without me making any changes.

If the spatial reference of the webmap is changed to anything other than web mercator, e.g. via: 

 

 

 

const mySr = new SpatialReference({wkid: 4326})

const myWebmap = new WebMap({
    basemap: "dark-gray",
    initialViewProperties: {
        spatialReference: mySr,
    }
});

 

 

 

then the loading of the webmap no longer works, and it only reports the above error. The view window simply becomes a white screen.

 

I've tried multiple spatial references, adding a layer with a matching spatial reference to the view and using vew.goTo() with its geometry. The view always ends up becoming inert.

 

On a side note, I'm finding that the map component being a combination of the SDK's WebMap and MapView classes is ultimately just making it frustrating to deal with on the programming end. I think it would ultimately be a better experience to have separate components for the views and the maps, especially because the 

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

The other Accessor you were seeing is because you were mixing cdn and esm classess. When you import the JS Core AMD CDN, you can't import from the ESM CDN.

We do provide a helper to import modules in AMD that is closer to ESM imports.

Fixed your codepen here.

https://codepen.io/odoe/pen/oNOQzMw?editors=0011

View solution in original post

2 Replies
ReneRubalcava
Frequent Contributor

Pushed a fix for that this week, and it went into the "next" version recently. Glad you got the fix.

0 Kudos
ReneRubalcava
Frequent Contributor

The other Accessor you were seeing is because you were mixing cdn and esm classess. When you import the JS Core AMD CDN, you can't import from the ESM CDN.

We do provide a helper to import modules in AMD that is closer to ESM imports.

Fixed your codepen here.

https://codepen.io/odoe/pen/oNOQzMw?editors=0011