Hi,
I'm trying to incorporate an ESRI map into an existing Vue.JS application and I'm having trouble utilising PortalItem to load a specific, public map from AGOL.
To test, I've setup a fresh Vue app using esri-loader as per instructions here. All I have done is change the provided code to use WebMap instead of ArcGisMap object.
Vue | ArcGIS API for JavaScript 4.17
This is my WebMap component code, which loads perfectly fine and I see the streets-vector basemap as expected. A full repo the reproduces the issue on my end is here:
With the above, the MapView loads with zoom buttons, no base map loads nor does any other content. The PortalItem ID should be valid, as it is the same ID as used here ArcGIS API for JavaScript Sandbox. If I remove portalItem and use the basemap parameter, the map loads fine.
Any indications as to why I'd be getting this with Vue.js?
Change this line to import esri/WebMap
loadModules([/* Update here */ 'esri/WebMap', 'esri/views/MapView'], { css: true })
Hi Rene,
Looks like I had pasted a mismatched copy of the code. My samples had also updated loadmodules to show WebMap.
Still the same result. As mentioned, WebMap works fine using the basemap parameter, but doesn't work with Portalitem.
I will try to post a repo up that reproduces it.
I've updated the first post with the correct code that repro's it. A repo with the issue can be found here Bitbucket