Select to view content in your preferred language

Vue.js / EsriLoader - using portalItem in WebMap

10-22-2020 03:45 AM
New Contributor


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:



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(
      ([WebMapMapView]) => {
        const map = new WebMap({
          //This one works
          // basemap: 'topo-vector'  

          //Portal Item does not seem to work - portalItem taken from this sandbox code
          portalItem: { 
            id: "f2e9b762544945f390ca4ac3671cfa72"

        this.view = new MapView({
          container: this.$el,
          map: map,
          center: [-11834],
          zoom: 8,
  beforeDestroy() {
    if (this.view) {
      // destroy the map view

<style scoped>
div {

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?

0 Kudos
3 Replies
Frequent Contributor II

Change this line to import esri/WebMap

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

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.

0 Kudos
New Contributor

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

0 Kudos