Basemap Gallery Widget Source

461
3
10-11-2018 03:04 PM
MatthewDowning2
New Contributor III

Hi - I'm developing a JS 4.x app using a web map from our Enterprise Portal. I'm coming across an issue where the Basemap Gallery widget's default source is our Portal. This is an issue because the map is requiring users to sign-in in order to authenticate against our Enterprise Portal. It appears I can change the source of where the widget pulls the basemaps from. (https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapGallery.html#sourc... )

In order to set the source back to arcgis.com it looks like the esri/portal/Portal class needs to be used, is this correct? Has anyone implemented this?

0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Matthew,

   Does this work for you (after you replace your portal item id)?

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>BasemapGallery widget - 4.9</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/4.9/"></script>
  <script>
    require([
      "esri/WebMap",
      "esri/views/MapView",
      "esri/widgets/BasemapGallery",
      "esri/config"
    ], function(
      WebMap, MapView, BasemapGallery, esriConfig
    ) {
      esriConfig.portalUrl = "https://www.arcgis.com"
      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "70d284e133894881b2c9681e2e7c2750"
        }
      });

      var view = new MapView({
        container: "viewDiv",
        map: webmap,
        center: [139.68, 35.68],
        zoom: 3
      });

      var basemapGallery = new BasemapGallery({
        view: view
      });

      // Add the widget to the top-right corner of the view
      view.ui.add(basemapGallery, {
        position: "top-right"
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>
0 Kudos
MatthewDowning2
New Contributor III

No, this doesn't work. I'm using our internal Enterprise Portal (not ArcGIS.com). When you use the Basemap Gallery Widget with esri.Config.portalUrl the Basemap Gallery Widget defaults to the same source as the portalUrl. Turns out it's actually only pulling the thumbnail icons from the portalUrl, the actual basemap tiles are coming from ArcGIS.com.

Even though the web map and feature layers are shared with the 'Everyone' group the application still forces users to sign-in, which is what I am trying to avoid.

The docs (https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapGallery.html#sourc...) for the BasemapGalleryWidget indicate that it's possible to change the source of where the widget gets it's basemaps from. In this case I want to use our internal Enterprise Portal to host the web map but use ArcGIS.com for the basemaps.

// Set the hostname to the on-premise portal
      esriConfig.portalUrl = "https://myCustomPortal.com/portal"

      // Map
      var map = new WebMap({
        portalItem: {
          id: "66d222d3c9b94ae79c24e2f49ad95aa4"
        }
      });


// Create basemap widget
      map.basemapWidget = new Basemaps({
        view: mapView,
        container: "basemapPanelDiv",
        //source: "https://www.arcgis.com/"
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Screenshot attached of the issue below. Note that only the thumbnails used in the widget are being pulled from myCustomPortal.com, the actual basemap tiles are indeed coming from arcgisonline.com

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Matthew,

  Hmm.. that is exactly what my code was suppose to do. Make the map use the basemap gallery use www.arcgis.com instead of your portal. I am not sure why that did not work.

0 Kudos