Vue.js / EsriLoader - using portalItem in WebMap

RyanVeenstra — Thu, 22 Oct 2020 10:45:21 GMT

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:

Bitbucket

</template>

import { loadModules } from "esri-loader";

export default {

name: "web-map",

mounted() {

// lazy load the required ArcGIS API for JavaScript modules and CSS

loadModules(["esri/Map", "esri/views/MapView"], { css: true }).then(

([WebMap, MapView]) => {

const map = new WebMap({

//This one works

// basemap: 'topo-vector'

//Portal Item does not seem to work - portalItem taken from this sandbox code

// https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webmap-basic

portalItem: {

id: "f2e9b762544945f390ca4ac3671cfa72",

});

this.view = new MapView({

container: this.$el,

map: map,

center: [-118, 34],

zoom: 8,

});

}

);

beforeDestroy() {

if (this.view) {

// destroy the map view

this.view.destroy();

}

};

</script>

div {

padding: 0;

margin: 0;

width: 100%;

height: 100%;

}

</style>

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?

Re: Vue.js / EsriLoader - using portalItem in WebMap

ReneRubalcava — Thu, 22 Oct 2020 18:46:43 GMT

Change this line to import esri/WebMap

loadModules([/* Update here */ 'esri/WebMap', 'esri/views/MapView'], { css: true })‍

Re: Vue.js / EsriLoader - using portalItem in WebMap

RyanVeenstra — Thu, 22 Oct 2020 20:34:05 GMT

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.

Re: Vue.js / EsriLoader - using portalItem in WebMap

RyanVeenstra — Thu, 22 Oct 2020 23:15:04 GMT

I've updated the first post with the correct code that repro's it. A repo with the issue can be found here Bitbucket

topic Re: Vue.js / EsriLoader - using portalItem in WebMap in ArcGIS JavaScript Maps SDK Questions

Vue.js / EsriLoader - using portalItem in WebMap

Re: Vue.js / EsriLoader - using portalItem in WebMap

Re: Vue.js / EsriLoader - using portalItem in WebMap

Re: Vue.js / EsriLoader - using portalItem in WebMap