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!

[RobertScheitlin__GISP · Accepted solution]

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/MapServe..."
          }
        ],
        "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
        }
      }
    ]
  }
}

[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!

[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!

[RobertScheitlin__GISP]

Kytt,

   Normally my publishData looks like this:

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,

  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]

Thank you Robert Scheitlin, GISP, much appreciated!

I hope that this is helpful to other newbie JS hackers like myself!

*sometimes its better just to ask*