CODEWITHSUNDEEP
esri-javascript-api
Renu Madhu
Renu Madhu

Reputation: 1

Basemap gallery does not work when navigation bar is added in esri javascript api

I am new to ArcGIS JavaScript API programming and I am trying to implement navigation toolbar along with basemap gallery but I am getting the following error:

Uncaught Error: Tried to register widget with id==map but that id is already registered

I have tried to destroy the widget but still does not work.

<!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>Tabs inside accordion</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dojox/layout/resources/ExpandoPane.css">
    <link rel="stylesheet" href="css/layout.css">

    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            padding: 0;
        }

        .zoominIcon {
            background-image: url(images/nav_zoomin.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;
        }

        .identifyIcon {
            background-image: url(images/info_blue2.png);
            width: 16px;
            height: 16px;
        }
    </style>

    <script src="https://js.arcgis.com/3.23/"></script>
    <script>

    var map,   navToolbar;
    require([
      "esri/map",
      "esri/dijit/BasemapGallery",
      "esri/arcgis/utils",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/layout/TabContainer",
      "dijit/layout/AccordionContainer",
      "dojox/layout/ExpandoPane",
      "dijit/TitlePane",
      "esri/toolbars/navigation",
      "dojo/on",
      "dijit/registry",
      "dijit/Toolbar",
      "dijit/form/Button",
      "dojo/domReady!"
    ],

    function(Map, BasemapGallery, arcgisUtils,parser,Navigation,on,registry,navToolbar)
      {
      parser.parse();

        map = new Map("map", {
          basemap: "topo",
          center: [73.88381, 10.5327242],
          zoom: 7
        });

          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();
          }

      //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);
      });
    });
    </script>
</head>

<body class="claro">
    <div class="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
        <div id="header" data-dojo-type="dijit/layout/ContentPane" style="text-align:center;" data-dojo-props="region:'top'">

            <div style="display: width:100%;overflow:hidden;">
                <div style="float:left;"><img src="..\images\cmfri-logo.png" /></div>
                <div style="float:right;"><img src="../images/icar-logo.png" /></div>
                <div style="float:right;"><img src="../images/platinumlogo.jpg" /></div>
                <div style="float:center;text-align:center;">Indian Council of Agricultural Research<br>CENTRAL MARINE FISHERIES RESEARCH INSTITUTE</div>

            </div>
        </div>
        <div data-dojo-type="dojox/layout/ExpandoPane"
             data-dojo-props="duration:300, title:'Details', region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'"
             style="width:300px;">
            <div data-dojo-type="dijit/layout/ContentPane" style="text-align:center;" data-dojo-props="region:'left'" id="leftPane">
                <div id="navToolbar" data-dojo-type="dijit.Toolbar">
                    <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>
            </div>
            <div data-dojo-type="dijit/layout/AccordionContainer">
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Basemap Gallery'" style="width:380px; height:280px; overflow:auto;">
                    <div id="basemapGallery"></div>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'" style="width:380px; height:280px; overflow:auto;">
                    <div data-dojo-type="dijit/layout/TabContainer">
                        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1', selected:'true'">
                            Content for the first tab
                        </div>
                        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">
                            Content for the second tab
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;"> </div>
    </div>
</body>

</html>

Upvotes: 0

Views: 231

Answers (1)

Jean-Marc Roy
Jean-Marc Roy

Reputation: 1791

Your problem here is just that you does a mistake in your require function. You add navToolbar variable that don't match any library. Furthermore the order matter, the corresponding variable must have same position as the library. Try with this :

require([
  "esri/map",
  "esri/dijit/BasemapGallery",
  "esri/arcgis/utils",
  "dojo/parser",
  "esri/toolbars/navigation",
  "dojo/on",
  "dijit/registry",
  "dijit/Toolbar",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/layout/TabContainer",
  "dijit/layout/AccordionContainer",
  "dojox/layout/ExpandoPane",
  "dijit/TitlePane",
  "dijit/form/Button",
  "dojo/domReady!"
],

function(Map, BasemapGallery, arcgisUtils,parser,Navigation,on,registry)
  {

It works for me, here is a working example with your code sample : Plunker

Hope it helps!

Upvotes: 1

Related Questions