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..
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>
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.??
Yes you can use your own URL from your ArcGIS Server.
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
