Error integrating Basemap Gallery with Navigation toolbar

SarojThapa1 — Fri, 10 Dec 2021 21:51:54 GMT

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>

Re: Error integrating Basemap Gallery with Navigation toolbar

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:51:57 GMT

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!"
            ],‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Error integrating Basemap Gallery with Navigation toolbar

SarojThapa1 — Wed, 19 Oct 2016 16:03:41 GMT

Thank you so much Robert. You fixed the issue. It's working fine now.

Re: Error integrating Basemap Gallery with Navigation toolbar

RobertScheitlin__GISP — Wed, 19 Oct 2016 16:07:59 GMT

Great.

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

topic Re: Error integrating Basemap Gallery with Navigation toolbar in ArcGIS JavaScript Maps SDK Questions

Error integrating Basemap Gallery with Navigation toolbar

Re: Error integrating Basemap Gallery with Navigation toolbar

Re: Error integrating Basemap Gallery with Navigation toolbar

Re: Error integrating Basemap Gallery with Navigation toolbar