Vue.js / EsriLoader - using portalItem in WebMap

72
3
10-22-2020 03:45 AM
Highlighted
New Contributor

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(
      ([WebMapMapView]) => {
        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: [-11834],
          zoom: 8,
        });
      }
    );
  },
  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.destroy();
    }
  },
};
</script>

<style scoped>
div {
  padding0;
  margin0;
  width100%;
  height100%;
}
</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?

Reply
0 Kudos
3 Replies
Highlighted
Frequent Contributor

Change this line to import esri/WebMap

loadModules([/* Update here */ 'esri/WebMap', 'esri/views/MapView'], { css: true })
Reply
0 Kudos
Highlighted
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.

Reply
0 Kudos
Highlighted
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 

Reply
0 Kudos