I am trying to add Basemap Gallery and Navigation Toolbar on my map using ArcGIS API for JavaScript 3.18. Could somebody please tell me what is wrong with the following codes?
<!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></title> <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css"> <style> html, body{ height: 100%; width: 100%; margin-top: 13px; overflow: hidden; padding-bottom: 0; } #map { padding-top: 6px; width: 90%; height: 100%; margin-bottom: 0; } #navToolbar { border: 2px solid lightgray; width: 14%; border-radius: 10px; } .zoominIcon { background-image: url(Images/zoom-in.png); width: 16px; height: 16px; } .zoomoutIcon { background-image: url(Images/zoom-out.png); width: 16px; height: 16px; } .zoomfullextIcon { background-image: url(Images/zoom-full.png); width: 16px; height: 16px; } .zoomprevIcon { background-image: url(Images/zoom-previous.png); width: 16px; height: 16px; } .zoomnextIcon { background-image: url(Images/zoom-next.png); width: 16px; height: 16px; } .panIcon { background-image: url(Images/pan.png); width: 16px; height: 16px; } .deactivateIcon { background-image: url(Images/deactivate.png); width: 16px; height: 16px; } </style> <script src="https://js.arcgis.com/3.18/"></script> <script> var map, navToolbar; require([ "esri/map", "esri/toolbars/navigation", "esri/dijit/BasemapGallery", "dojo/on", "dojo/parser", "dijit/registry", "dijit/Toolbar", "dijit/form/Button", "dojo/domReady!" ], function (Map, Navigation, BasemapGallery, on, parser, registry) { parser.parse(); //var navToolbar; map = new Map("map", { basemap: "topo", center: [-88.55, 43.12], zoom: 9 }); var basemapGallery = new BasemapGallery({ showArcGISBasemaps: true, map: map }, "basemapGallery"); basemapGallery.startup(); basemapGallery.on("error", function (msg) { console.log("basemap gallery error: ", msg); }); 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(); }); function extentHistoryChangeHandler () { registry.byId("zoomprev").disabled = navToolbar.isFirstExtent(); registry.byId("zoomnext").disabled = navToolbar.isLastExtent(); } }); </script> </head> <body class="claro" > <div id="navToolbar" data-dojo-type="dijit/Toolbar" style="position:absolute; right:200px; top:10px; z-Index:555;"> <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'"></div> <div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'"></div> <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'"></div> <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'"></div> <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'"></div> <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'"></div> <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'"></div> </div> <div id="map" style="width: 100%; height: 902px"> </div> <!-- The navigation toolbar only shos up if the following codes are removed. --> <div style="position:absolute; right:500px; 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> </body> </html>
Solved! Go to Solution.
Saroj,
You are just missing the requires for TitlePane and ContentPane (lines 12 and 13):
require([
"esri/map",
"esri/toolbars/navigation",
"esri/dijit/BasemapGallery",
"dojo/on",
"dojo/parser",
"dijit/registry",
"dijit/Toolbar",
"dijit/form/Button",
"dijit/TitlePane",
"dijit/layout/ContentPane",
"dojo/domReady!"
],
Saroj,
You are just missing the requires for TitlePane and ContentPane (lines 12 and 13):
require([
"esri/map",
"esri/toolbars/navigation",
"esri/dijit/BasemapGallery",
"dojo/on",
"dojo/parser",
"dijit/registry",
"dijit/Toolbar",
"dijit/form/Button",
"dijit/TitlePane",
"dijit/layout/ContentPane",
"dojo/domReady!"
],
Thank you so much Robert. You fixed the issue. It's working fine now.
Great.
Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.