In my html page i have add arcgis BasemapGallery and one operational layer (URL of my arcgis server services REST API) over the base map. now my query is i want to change the operational layer using the Combo-box drop-down which is open over the base m

ChandanKori — Fri, 07 Aug 2015 05:15:32 GMT

In my html page i have add arcgis BasemapGallery and one operational layer (URL of my arcgis server services REST API) over the base map. now my query is i want to change the operational layer using the Combo-box drop-down which is open over the base map on change event..

Re: In my html page i have add arcgis BasemapGallery and one operational layer (URL of my arcgis server services REST API) over the base map. now my query is i want to change the operational layer using the Combo-box drop-down which is open over the ba

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:24:15 GMT

Chandan,

It would just be a matter of knowing the id of the operational layer so that you can use map.removeLayer(layerId); and then adding the selected layer using map.AddLayer.

Here is a sample:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title></title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    #map{
      padding:0;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    var map;
    var layers = [];
    var handle;
    require([
      "dojo/on",
      "esri/map",
      "esri/dijit/BasemapGallery",
      "esri/arcgis/utils",
      "dojo/parser",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "esri/dijit/util/busyIndicator",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/TitlePane",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      on,
      Map,
      BasemapGallery,
      arcgisUtils,
      parser,
      FeatureLayer,
      Memory,
      busyIndicator
    ) {
      parser.parse();

      map = new Map("mapDiv", {
        basemap: "topo",
        center: [-105.255, 40.022],
        zoom: 5
      });

      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });

      var TimeZone = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/1", {
        id: "OperationalLayer",
        mode: FeatureLayer.MODE_SNAPSHOT,
        outFields: ["*"]
      });
      layers.push(TimeZone);

      var Regions = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/2", {
        id: "OperationalLayer",
        mode: FeatureLayer.MODE_SNAPSHOT,
        outFields: ["*"]
      });
      layers.push(Regions);

      handle = busyIndicator.create(mapDiv);

      var store2 = new Memory({data:[]});
      dijit.byId("opLayerSelect").set('store',store2);
      var data = [];
      data.push({id:0, name:"World Time Zones", layer:"TimeZone"});
      data.push({id:1, name:"World Regions", layer:"Regions"});
      store2 = new Memory({data:data});
      dijit.byId("opLayerSelect").set('store',store2);
      dijit.byId("opLayerSelect").set('value', data[0].name);
      dijit.byId("opLayerSelect").item = dijit.byId("opLayerSelect").store.query({name:"World Time Zones"})[0];

      app = {
        changeOpLyr: function(){
          var store = dijit.byId("opLayerSelect").store;
          var cbSelVal = dijit.byId("opLayerSelect").get('value');
          var layerIndx = store.query({name:cbSelVal})[0]["id"];
          if(map.getLayer("OperationalLayer")){
            map.removeLayer(map.getLayer("OperationalLayer"));
          }
          handle.show();
          map.addLayer(layers[layerIndx]);
          var lyrEvt = on(layers[layerIndx], "update-end", function(){
            handle.hide();
            lyrEvt.remove();
          });
        }
      }
    });
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer"
       data-dojo-props="design:'headline', gutters:false"
       style="width:100%;height:100%;margin:0;">

    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select Operational Layer:
      <input id="opLayerSelect" data-dojo-type="dijit/form/ComboBox"  onchange="app.changeOpLyr()" data-dojo-props="maxHeight: 200, searchAttr:'name'" />
    </div>

    <div id="mapDiv"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'"
         style="padding:0;">

      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane"
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</body>

</html>

Re: In my html page i have add arcgis BasemapGallery and one operational layer (URL of my arcgis server services REST API) over the base map. now my query is i want to change the operational layer using the Combo-box drop-down which is open over the ba

ChandanKori — Mon, 10 Aug 2015 06:00:29 GMT

Thanks

rscheitlin

In this code you use the feature layer "Time Zone" as a url of "arcgisonline.com", so here can i use the url of my ArcGIS Server Services REST API URL.??

Re: In my html page i have add arcgis BasemapGallery and one operational layer (URL of my arcgis server services REST API) over the base map. now my query is i want to change the operational layer using the Combo-box drop-down which is open over the ba

RobertScheitlin__GISP — Mon, 10 Aug 2015 11:54:16 GMT

Chandan,

Yes you can use your own URL from your ArcGIS Server.

topic In my html page i have add arcgis BasemapGallery and one operational layer (URL of my arcgis server services REST API) over the base map. now my query is i want to change the operational layer using the Combo-box drop-down which is open over the base m in ArcGIS JavaScript Maps SDK Questions

In my html page i have add arcgis BasemapGallery and one operational layer (URL of my arcgis server services REST API) over the base map. now my query is i want to change the operational layer using the Combo-box drop-down which is open over the base m

Re: In my html page i have add arcgis BasemapGallery and one operational layer (URL of my arcgis server services REST API) over the base map. now my query is i want to change the operational layer using the Combo-box drop-down which is open over the ba

Re: In my html page i have add arcgis BasemapGallery and one operational layer (URL of my arcgis server services REST API) over the base map. now my query is i want to change the operational layer using the Combo-box drop-down which is open over the ba

Thanks

rscheitlin

Re: In my html page i have add arcgis BasemapGallery and one operational layer (URL of my arcgis server services REST API) over the base map. now my query is i want to change the operational layer using the Combo-box drop-down which is open over the ba