nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dynamic basemap gallery

KyttMacManus

Hi everyone,

I am in the process of modifying the BasemapGallery Widget in WAB 1.2 Developer edition so that it might dynamically update the array of available basemaps based on communication with a separate controller widget.

I am getting tripped up on something that should be easy. Namely, the syntax for providing a basemap array.

Does anyone have an example of the JSON syntax that would be used to manually configure the config.json file for the BasemapGallery widget?

Thanks for the help!

Najděte více příspěvků označených jako

Accepted answers

RobertScheitlin__GISP

Kytt,

Sure here is some example JSON:

{
  "basemapGallery": {
    "basemaps": [
      {
        "layers": [
          {
            "id": "layer0",
            "layerType": "ArcGISTiledMapServiceLayer",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer"
          },
          {
            "id": "World_Dark_Gray_Reference_8618",
            "layerType": "ArcGISTiledMapServiceLayer",
            "url": "http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Reference/MapServer",
            "visibility": true,
            "opacity": 1,
            "isReference": true
          }
        ],
        "title": "Dark Gray Canvas",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/25869b8718c0419db87dad07de5b02d8/info/thumbnail/DGCanvasBase.png",
        "spatialReference": {
          "wkid": 102100
        }
      },
      {
        "layers": [
          {
            "id": "World_Imagery_2017",
            "visibility": true,
            "opacity": 1,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
          }
        ],
        "title": "Imagery",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/86de95d4e0244cba80f0fa2c9403a7b2/info/thumbnail/tempimagery.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "World_Imagery_6611",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
          },
          {
            "id": "World_Boundaries_and_Places_1145",
            "isReference": true,
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"
          }
        ],
        "title": "Imagery with Labels",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/413fd05bbd7342f5991d5ec96f4f8b18/info/thumbnail/imagery_labels.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "World_Light_Gray_Base_1486",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"
          },
          {
            "id": "World_Light_Gray_Reference_8656",
            "isReference": true,
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer"
          }
        ],
        "title": "Light Gray Canvas",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/8b3b470883a744aeb60e5fff0a319ce7/info/thumbnail/light_gray_canvas.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "NatGeo_World_Map_2536",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"
          }
        ],
        "title": "National Geographic",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/509e2d6b034246d692a461724ae2d62c/info/thumbnail/natgeo.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "Ocean_Basemap_2089",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer"
          },
          {
            "url": "http://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer",
            "id": "World_Ocean_Reference_1261",
            "isReference": true,
            "visibility": true,
            "opacity": 1
          }
        ],
        "title": "Oceans",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/48b8cec7ebf04b5fbdcaf70d09daff21/info/thumbnail/tempoceans.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "visibility": true,
            "opacity": 1,
            "type": "OpenStreetMap"
          }
        ],
        "title": "OpenStreetMap",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/5d2bfa736f8448b3a1708e1f6be23eed/info/thumbnail/temposm.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "World_Street_Map_8421",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
          }
        ],
        "title": "Streets",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/d8855ee4d3d74413babfb0f41203b168/info/thumbnail/world_street_map.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "World_Terrain_Base_3",
            "layerType": "ArcGISTiledMapServiceLayer",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
          },
          {
            "id": "World_Reference_Overlay_5790",
            "layerType": "ArcGISTiledMapServiceLayer",
            "isReference": true,
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
          }
        ],
        "title": "Terrain with Labels",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/aab054ab883c4a4094c72e949566ad40/info/thumbnail/terrain_labels.jpg",
        "spatialReference": {
          "wkid": 102100,
          "latestWkid": 3857
        }
      },
      {
        "layers": [
          {
            "id": "defaultBasemap",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
          }
        ],
        "title": "Topographic",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/6e03e8c26aad4b9c92a87c1063ddb0e3/info/thumbnail/topo_map_2.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "USA_Topo_Maps_4699",
            "layerType": "ArcGISTiledMapServiceLayer",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
          }
        ],
        "title": "USA Topo Maps",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/931d892ac7a843d7ba29d085e0433465/info/thumbnail/usa_topo.jpg",
        "spatialReference": {
          "wkid": 102100,
          "latestWkid": 3857
        }
      },
      {
        "layers": [
          {
            "id": "layer0",
            "layerType": "ArcGISTiledMapServiceLayer",
            "opacity": 1,
            "visibility": true,
            "url": "http://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer"
          }
        ],
        "title": "USGS National Map",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/6d9fa6d159ae4a1f80b9e296ed300767/info/thumbnail/national_map.jpg",
        "spatialReference": {
          "wkid": 102100
        }
      }
    ]
  }
}

All comments

RobertScheitlin__GISP

Kytt,

Sure it is a scope issue you need to use lang.hitch (see line 5 and don't forget to include the require for lang):

return declare([BaseWidget], {  
  baseClass: 'jimu-widget-slidercontrol',  
  postCreate: function() {  
     // wire event listeners to grab slider position value onChange  
     slider.on("change", lang.hitch(this, function(){  
          this.publishData({message: "Deactivate_DrawTool"});  
     }));       
};

KyttMacManus

Thanks for the reply Robert.

When I try your line of code inside my widget in the context of

return declare([BaseWidget], {
  baseClass: 'jimu-widget-slidercontrol',
  postCreate: function() {
     this.publishData({message: "Deactivate_DrawTool"});
};

it works great

however I also want to publish data inside an event listener that is part of the postCreate function

return declare([BaseWidget], {
  baseClass: 'jimu-widget-slidercontrol',
  postCreate: function() {
     this.publishData({message: "Deactivate_DrawTool"});
     / wire event listeners to grab slider position value onChange
     slider.on("change", function(){
          this.publishData({message: "Deactivate_DrawTool"});
     )};     
};

I get the following error in Google Chrome

"Uncaught TypeError: this.publishData is not a function"

Do you know what I might be doing wrong?

Basic JS question I am sure!

I appreciate your help.

RobertScheitlin__GISP

Kytt,

Normally my publishData looks like this:

this.publishData({message: "Deactivate_DrawTool"});

KyttMacManus

Another newbie problem, but I am having real trouble figuring out the correct scope for the "publishData" method of the BaseWidget Class

I have created a function in my custom widget that looks like the following

postData: function(data) {
  this.publishData({
  data
  });
  console.log("POSTED");
  },

I now want to call postData within a function that is nested inside the BaseWidget "postCreate" standard function.

It looks something like this:

function parseServiceResults(results, messages) {
  // grab results json 
  basemaps = results[1].value;
  postData(basemaps);

I can't get it to work. I understand that it is somehow related to scope and the "this" keyword, but I can't figure out what I am doing wrong.

Any advice would be much appreciated.

Thank you for your help!

KyttMacManus

Thank you for the prompt reply Robert, much appreciated. I think this will help other newbies like myself because I was not able to locate this code easily although I did search.

Thanks again!

RobertScheitlin__GISP

Kytt,

Sure here is some example JSON:

{
  "basemapGallery": {
    "basemaps": [
      {
        "layers": [
          {
            "id": "layer0",
            "layerType": "ArcGISTiledMapServiceLayer",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer"
          },
          {
            "id": "World_Dark_Gray_Reference_8618",
            "layerType": "ArcGISTiledMapServiceLayer",
            "url": "http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Reference/MapServer",
            "visibility": true,
            "opacity": 1,
            "isReference": true
          }
        ],
        "title": "Dark Gray Canvas",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/25869b8718c0419db87dad07de5b02d8/info/thumbnail/DGCanvasBase.png",
        "spatialReference": {
          "wkid": 102100
        }
      },
      {
        "layers": [
          {
            "id": "World_Imagery_2017",
            "visibility": true,
            "opacity": 1,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
          }
        ],
        "title": "Imagery",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/86de95d4e0244cba80f0fa2c9403a7b2/info/thumbnail/tempimagery.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "World_Imagery_6611",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
          },
          {
            "id": "World_Boundaries_and_Places_1145",
            "isReference": true,
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"
          }
        ],
        "title": "Imagery with Labels",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/413fd05bbd7342f5991d5ec96f4f8b18/info/thumbnail/imagery_labels.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "World_Light_Gray_Base_1486",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"
          },
          {
            "id": "World_Light_Gray_Reference_8656",
            "isReference": true,
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer"
          }
        ],
        "title": "Light Gray Canvas",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/8b3b470883a744aeb60e5fff0a319ce7/info/thumbnail/light_gray_canvas.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "NatGeo_World_Map_2536",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"
          }
        ],
        "title": "National Geographic",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/509e2d6b034246d692a461724ae2d62c/info/thumbnail/natgeo.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "Ocean_Basemap_2089",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer"
          },
          {
            "url": "http://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer",
            "id": "World_Ocean_Reference_1261",
            "isReference": true,
            "visibility": true,
            "opacity": 1
          }
        ],
        "title": "Oceans",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/48b8cec7ebf04b5fbdcaf70d09daff21/info/thumbnail/tempoceans.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "visibility": true,
            "opacity": 1,
            "type": "OpenStreetMap"
          }
        ],
        "title": "OpenStreetMap",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/5d2bfa736f8448b3a1708e1f6be23eed/info/thumbnail/temposm.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "World_Street_Map_8421",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
          }
        ],
        "title": "Streets",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/d8855ee4d3d74413babfb0f41203b168/info/thumbnail/world_street_map.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "World_Terrain_Base_3",
            "layerType": "ArcGISTiledMapServiceLayer",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
          },
          {
            "id": "World_Reference_Overlay_5790",
            "layerType": "ArcGISTiledMapServiceLayer",
            "isReference": true,
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
          }
        ],
        "title": "Terrain with Labels",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/aab054ab883c4a4094c72e949566ad40/info/thumbnail/terrain_labels.jpg",
        "spatialReference": {
          "wkid": 102100,
          "latestWkid": 3857
        }
      },
      {
        "layers": [
          {
            "id": "defaultBasemap",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
          }
        ],
        "title": "Topographic",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/6e03e8c26aad4b9c92a87c1063ddb0e3/info/thumbnail/topo_map_2.jpg",
        "spatialReference": {
          "wkid": "102100"
        }
      },
      {
        "layers": [
          {
            "id": "USA_Topo_Maps_4699",
            "layerType": "ArcGISTiledMapServiceLayer",
            "opacity": 1,
            "visibility": true,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
          }
        ],
        "title": "USA Topo Maps",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/931d892ac7a843d7ba29d085e0433465/info/thumbnail/usa_topo.jpg",
        "spatialReference": {
          "wkid": 102100,
          "latestWkid": 3857
        }
      },
      {
        "layers": [
          {
            "id": "layer0",
            "layerType": "ArcGISTiledMapServiceLayer",
            "opacity": 1,
            "visibility": true,
            "url": "http://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer"
          }
        ],
        "title": "USGS National Map",
        "thumbnailUrl": "//calhoun.maps.arcgis.com/sharing/rest/content/items/6d9fa6d159ae4a1f80b9e296ed300767/info/thumbnail/national_map.jpg",
        "spatialReference": {
          "wkid": 102100
        }
      }
    ]
  }
}

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.