Hi Javascript Guru's,
As stated in a post a few days ago I am trying to learn javascript and i am pretty sure I am not understanding scope in terms of dojo. My goal is to create a layout that looks something like this.
I look at my code and it seems like it should create it but i am obviously missing something. All my javascript tools work if i don't add in a dojo layout and just use a standard div. It seems that what ever i am missing skips the whole tool bar and non map javascript and css.
Any help would be appreciated!
Thanks,
Matt
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>ArcGIS API for JavaScript | Basic Search</title> <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } #BasemapToggle { position: absolute; top: 55px; right: 74px; z-index: 2; } #search { display: block; position: absolute; z-index: 2; top: 55px; left: 74px; background-color: white; } .zoominIcon { background-image: url(images/nav_zoomin.png); width: 16px; height: 16px; } .zoomoutIcon { background-image: url(images/nav_zoomout.png); width: 16px; height: 16px; } .zoomfullextIcon { background-image: url(images/nav_fullextent.png); width: 16px; height: 16px; } .zoomprevIcon { background-image: url(images/nav_previous.png); width: 16px; height: 16px; } .zoomnextIcon { background-image: url(images/nav_next.png); width: 16px; height: 16px; } .panIcon { background-image: url(images/nav_pan.png); width: 16px; height: 16px; } .deactivateIcon { background-image: url(images/nav_decline.png); width: 16px; height: 16px; } .Turnoff { background-image: url(images/nav_decline.png); width: 16px; height: 16px; } </style> <script>dojoConfig = {parseOnLoad: true}</script> <script src="https://js.arcgis.com/3.15/"></script> <script> require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"]); </script> <script> var map; require([ "esri/map", "esri/dijit/Search", "esri/dijit/BasemapToggle", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "esri/toolbars/navigation", "dojo/on", "dojo/parser", "dijit/registry", "dijit/Toolbar", "dijit/form/Button", "dojo/domReady!" ], function (Map, Search, BasemapToggle, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, Navigation, on, parser, registry) { parser.parse(); var navToolbar; var map = new Map("map", { basemap: "topo", center: [-120.435, 46.159], // lon, lat zoom: 7 }); var toggle = new BasemapToggle({ map: map, basemap: "satellite" }, "BasemapToggle"); var s = new Search({ map: map }, "search"); s.startup(); toggle.startup(); var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServ...", { "id": "oilAndGasLayer", "opacity": 0.75 }); map.addLayer(oilAndGasLayer).visible=false; var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...", { "id": "rivers", "opacity": 0.75 }); map.addLayer(layer).visible=false; //initialize query task queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map..."); //initialize query query = new Query(); query.returnGeometry = true; query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"]; //initialize InfoTemplate infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}"); //create symbol for selected features symbol = new SimpleMarkerSymbol(); symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE); symbol.setSize(20); symbol.setColor(new Color([255,255,0,0.5])); function executeQueryTask(population) { //set query based on what user typed in for population; query.where = "POP1990 > " + population; //execute query queryTask.execute(query,showResults); } function showResults(featureSet) { //remove all graphics on the maps graphics layer map.graphics.clear(); //Performance enhancer - assign featureSet array to a single variable. var resultFeatures = featureSet.features; //Loop through each feature returned for (var i=0, il=resultFeatures.length; i<il; i++) { //Get the current feature from the featureSet. //Feature is a graphic var graphic = resultFeatures; graphic.setSymbol(symbol); //Set the infoTemplate. graphic.setInfoTemplate(infoTemplate); //Add graphic to the map graphics layer. map.graphics.add(graphic); } } navToolbar = new Navigation(map); on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler); registry.byId("zoomin").on("click", function () { navToolbar.activate(Navigation.ZOOM_IN); }); registry.byId("zoomout").on("click", function () { navToolbar.activate(Navigation.ZOOM_OUT); }); registry.byId("zoomfullext").on("click", function () { navToolbar.zoomToFullExtent(); }); registry.byId("zoomprev").on("click", function () { navToolbar.zoomToPrevExtent(); }); registry.byId("zoomnext").on("click", function () { navToolbar.zoomToNextExtent(); }); registry.byId("pan").on("click", function () { navToolbar.activate(Navigation.PAN); }); registry.byId("deactivate").on("click", function () { navToolbar.deactivate(); }); registry.byId("Turnoff").on("click", function () { if (oilAndGasLayer.visible === true) { oilAndGasLayer.hide(); } else { oilAndGasLayer.show(); } }); function extentHistoryChangeHandler () { registry.byId("zoomprev").disabled = navToolbar.isFirstExtent(); registry.byId("zoomnext").disabled = navToolbar.isLastExtent(); } on(dojo.byId('btnExec'), 'click', function(){ executeQueryTask(dojo.byId('population').value); }); on(dojo.byId('btnExec2'), 'click', function(){ if (layer.visible === true) { layer.hide(); } else { layer.show(); } }); //closing of main function }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;"> <div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'"> <div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">Zoom In</div> <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div> <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div> <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div> <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div> <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div> <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div> <div data-dojo-type="dijit/form/Button" id="Turnoff" data-dojo-props="iconClass:'deactivateIcon'">Turn OffLayer</div> </div> <div id="search" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"> US city population greater than :<input type="text" id="population" value="500000" /> <input type="button" value="Get Details" id="btnExec"/> <input type="button" value="Turn of Purple" id="btnExec2"/> </div> <div id="map" class="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" > <div id="BasemapToggle"></div> </div> </div> </body> </html>
Solved! Go to Solution.
Matthew,
You do not want to use parser.parse and dojo config parse on load together in your code.
I fixed some other code issues as well (like not using a dojo content container as the div that you are adding the search dijit to):
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>ArcGIS API for JavaScript | Basic Search</title> <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css" /> <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css" /> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } #BasemapToggle { position: absolute; top: 55px; right: 74px; z-index: 2; } #search { display: block; position: absolute; z-index: 2; top: 55px; left: 74px; background-color: white; } .zoominIcon { background-image: url(images/nav_zoomin.png); width: 16px; height: 16px; } .zoomoutIcon { background-image: url(images/nav_zoomout.png); width: 16px; height: 16px; } .zoomfullextIcon { background-image: url(images/nav_fullextent.png); width: 16px; height: 16px; } .zoomprevIcon { background-image: url(images/nav_previous.png); width: 16px; height: 16px; } .zoomnextIcon { background-image: url(images/nav_next.png); width: 16px; height: 16px; } .panIcon { background-image: url(images/nav_pan.png); width: 16px; height: 16px; } .deactivateIcon { background-image: url(images/nav_decline.png); width: 16px; height: 16px; } .Turnoff { background-image: url(images/nav_decline.png); width: 16px; height: 16px; } </style> <script src="https://js.arcgis.com/3.15/"></script> <script> var map; require([ "esri/map", "esri/dijit/Search", "esri/dijit/BasemapToggle", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "esri/toolbars/navigation", "dojo/on", "dojo/parser", "dijit/registry", "dijit/Toolbar", "dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function (Map, Search, BasemapToggle, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, Navigation, on, parser, registry) { parser.parse(); var navToolbar; var map = new Map("map", { basemap: "topo", center: [-120.435, 46.159], // lon, lat zoom: 7 }); var toggle = new BasemapToggle({ map: map, basemap: "satellite" }, "BasemapToggle"); toggle.startup(); var s = new Search({ map: map }, "search"); s.startup(); var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServ...", { "id": "oilAndGasLayer", "opacity": 0.75 }); map.addLayer(oilAndGasLayer).visible = false; var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...", { "id": "rivers", "opacity": 0.75 }); map.addLayer(layer).visible = false; //initialize query task queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map..."); //initialize query query = new Query(); query.returnGeometry = true; query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"]; //initialize InfoTemplate infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}"); //create symbol for selected features symbol = new SimpleMarkerSymbol(); symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE); symbol.setSize(20); symbol.setColor(new Color([255, 255, 0, 0.5])); function executeQueryTask(population) { //set query based on what user typed in for population; query.where = "POP1990 > " + population; //execute query queryTask.execute(query, showResults); } function showResults(featureSet) { //remove all graphics on the maps graphics layer map.graphics.clear(); //Performance enhancer - assign featureSet array to a single variable. var resultFeatures = featureSet.features; //Loop through each feature returned for (var i = 0, il = resultFeatures.length; i < il; i++) { //Get the current feature from the featureSet. //Feature is a graphic var graphic = resultFeatures; graphic.setSymbol(symbol); //Set the infoTemplate. graphic.setInfoTemplate(infoTemplate); //Add graphic to the map graphics layer. map.graphics.add(graphic); } } navToolbar = new Navigation(map); on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler); registry.byId("zoomin").on("click", function () { navToolbar.activate(Navigation.ZOOM_IN); }); registry.byId("zoomout").on("click", function () { navToolbar.activate(Navigation.ZOOM_OUT); }); registry.byId("zoomfullext").on("click", function () { navToolbar.zoomToFullExtent(); }); registry.byId("zoomprev").on("click", function () { navToolbar.zoomToPrevExtent(); }); registry.byId("zoomnext").on("click", function () { navToolbar.zoomToNextExtent(); }); registry.byId("pan").on("click", function () { navToolbar.activate(Navigation.PAN); }); registry.byId("deactivate").on("click", function () { navToolbar.deactivate(); }); registry.byId("Turnoff").on("click", function () { if (oilAndGasLayer.visible === true) { oilAndGasLayer.hide(); } else { oilAndGasLayer.show(); } }); function extentHistoryChangeHandler() { registry.byId("zoomprev").disabled = navToolbar.isFirstExtent(); registry.byId("zoomnext").disabled = navToolbar.isLastExtent(); } on(dojo.byId('btnExec'), 'click', function () { executeQueryTask(dojo.byId('population').value); }); on(dojo.byId('btnExec2'), 'click', function () { if (layer.visible === true) { layer.hide(); } else { layer.show(); } }); //closing of main function }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;"> <div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'"> <div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">Zoom In</div> <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div> <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div> <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div> <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div> <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div> <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div> <div data-dojo-type="dijit/form/Button" id="Turnoff" data-dojo-props="iconClass:'deactivateIcon'">Turn OffLayer</div> </div> <div id="searchDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"> <div id="search"></div> US city population greater than : <input type="text" id="population" value="500000" /> <input type="button" value="Get Details" id="btnExec" /> <input type="button" value="Turn of Purple" id="btnExec2" /> </div> <div id="map" class="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> <div id="BasemapToggle"></div> </div> </div> </body> </html>
I have an example on Plunker that has a similar layout that you might want to use as a reference.
The first thing I would do is use your browser's debugging tools (F12 activates these in Chrome, Firefox, and IE) and see if any errors are occurring in your JavaScript code. It's possible an exception might be happening before the toolbar setup code happens.
Another thing to try (if you're not seeing an error in the browser's error console) is to use dojo/ready to ensure all of your Dojo components and DOM elements have loaded before doing anything else. (If you put all of your JavaScript at the bottom of the <body> element, you usually don't need to use dojo/ready, though.)
The only error i am seeing is:
TypeError: registry.byId(...) is undefined
http://localhost/test_js/queryLayer_w_template.html
Line 216
This is whats leading me to believe that it is scope related as its defined when i don't have the layout.
I will also take a look at your code.
Thanks,
Matt
Matthew,
You do not want to use parser.parse and dojo config parse on load together in your code.
I fixed some other code issues as well (like not using a dojo content container as the div that you are adding the search dijit to):
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>ArcGIS API for JavaScript | Basic Search</title> <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css" /> <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css" /> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } #BasemapToggle { position: absolute; top: 55px; right: 74px; z-index: 2; } #search { display: block; position: absolute; z-index: 2; top: 55px; left: 74px; background-color: white; } .zoominIcon { background-image: url(images/nav_zoomin.png); width: 16px; height: 16px; } .zoomoutIcon { background-image: url(images/nav_zoomout.png); width: 16px; height: 16px; } .zoomfullextIcon { background-image: url(images/nav_fullextent.png); width: 16px; height: 16px; } .zoomprevIcon { background-image: url(images/nav_previous.png); width: 16px; height: 16px; } .zoomnextIcon { background-image: url(images/nav_next.png); width: 16px; height: 16px; } .panIcon { background-image: url(images/nav_pan.png); width: 16px; height: 16px; } .deactivateIcon { background-image: url(images/nav_decline.png); width: 16px; height: 16px; } .Turnoff { background-image: url(images/nav_decline.png); width: 16px; height: 16px; } </style> <script src="https://js.arcgis.com/3.15/"></script> <script> var map; require([ "esri/map", "esri/dijit/Search", "esri/dijit/BasemapToggle", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "esri/toolbars/navigation", "dojo/on", "dojo/parser", "dijit/registry", "dijit/Toolbar", "dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function (Map, Search, BasemapToggle, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, Navigation, on, parser, registry) { parser.parse(); var navToolbar; var map = new Map("map", { basemap: "topo", center: [-120.435, 46.159], // lon, lat zoom: 7 }); var toggle = new BasemapToggle({ map: map, basemap: "satellite" }, "BasemapToggle"); toggle.startup(); var s = new Search({ map: map }, "search"); s.startup(); var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServ...", { "id": "oilAndGasLayer", "opacity": 0.75 }); map.addLayer(oilAndGasLayer).visible = false; var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...", { "id": "rivers", "opacity": 0.75 }); map.addLayer(layer).visible = false; //initialize query task queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map..."); //initialize query query = new Query(); query.returnGeometry = true; query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"]; //initialize InfoTemplate infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}"); //create symbol for selected features symbol = new SimpleMarkerSymbol(); symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE); symbol.setSize(20); symbol.setColor(new Color([255, 255, 0, 0.5])); function executeQueryTask(population) { //set query based on what user typed in for population; query.where = "POP1990 > " + population; //execute query queryTask.execute(query, showResults); } function showResults(featureSet) { //remove all graphics on the maps graphics layer map.graphics.clear(); //Performance enhancer - assign featureSet array to a single variable. var resultFeatures = featureSet.features; //Loop through each feature returned for (var i = 0, il = resultFeatures.length; i < il; i++) { //Get the current feature from the featureSet. //Feature is a graphic var graphic = resultFeatures; graphic.setSymbol(symbol); //Set the infoTemplate. graphic.setInfoTemplate(infoTemplate); //Add graphic to the map graphics layer. map.graphics.add(graphic); } } navToolbar = new Navigation(map); on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler); registry.byId("zoomin").on("click", function () { navToolbar.activate(Navigation.ZOOM_IN); }); registry.byId("zoomout").on("click", function () { navToolbar.activate(Navigation.ZOOM_OUT); }); registry.byId("zoomfullext").on("click", function () { navToolbar.zoomToFullExtent(); }); registry.byId("zoomprev").on("click", function () { navToolbar.zoomToPrevExtent(); }); registry.byId("zoomnext").on("click", function () { navToolbar.zoomToNextExtent(); }); registry.byId("pan").on("click", function () { navToolbar.activate(Navigation.PAN); }); registry.byId("deactivate").on("click", function () { navToolbar.deactivate(); }); registry.byId("Turnoff").on("click", function () { if (oilAndGasLayer.visible === true) { oilAndGasLayer.hide(); } else { oilAndGasLayer.show(); } }); function extentHistoryChangeHandler() { registry.byId("zoomprev").disabled = navToolbar.isFirstExtent(); registry.byId("zoomnext").disabled = navToolbar.isLastExtent(); } on(dojo.byId('btnExec'), 'click', function () { executeQueryTask(dojo.byId('population').value); }); on(dojo.byId('btnExec2'), 'click', function () { if (layer.visible === true) { layer.hide(); } else { layer.show(); } }); //closing of main function }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;"> <div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'"> <div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">Zoom In</div> <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div> <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div> <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div> <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div> <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div> <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div> <div data-dojo-type="dijit/form/Button" id="Turnoff" data-dojo-props="iconClass:'deactivateIcon'">Turn OffLayer</div> </div> <div id="searchDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"> <div id="search"></div> US city population greater than : <input type="text" id="population" value="500000" /> <input type="button" value="Get Details" id="btnExec" /> <input type="button" value="Turn of Purple" id="btnExec2" /> </div> <div id="map" class="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> <div id="BasemapToggle"></div> </div> </div> </body> </html>
Hi Robert,
Thanks again for looking into this for me. It worked perfectly.
Matt