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>
<div></div>
</template>
<script>
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>
<style scoped>
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?
