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
