TOC Legend widget/Basemap widget isn't working for me

[rachellinonis]

Hey everyone,

I'm trying to incorporate this TOC example with this Basemap example - using buttons. I got the TOC working (you won't be able to see the layer because its on my server, but I can see it from my end). I can't seem to get the basemaps to work at all.

I can't seem to figure out what I'm missing here? I'm starting towards the bottom since my code is really long.

        </script>
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>
        <script type="text/javascript">
            dojo.require("dijit.dijit");
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.ContentPane");
            // uncomment if want dojo widget style checkbox
            //dojo.require('dijit.form.CheckBox');
            dojo.require("esri.map");
            dojo.require("dijit.layout.AccordionContainer");
            dojo.require("agsjs.dijit.TOC");
            dojo.require("esri.dijit.BasemapGallery");
            dojo.require("dijit.Tooltip");
            dojo.require("dijit.form.Button");
            dojo.require("dijit.Menu");

        </script>
        <script type="text/javascript">
            var map, basemapGallery;
            var bingKey = 'Enter your Bing Maps Key';
            function init() {
                var initialExtent = new esri.geometry.Extent({
                    "xmin" : -123.5328,
                    "ymin" : 32.4344,
                    "xmax" : -112.2582,
                    "ymax" : 37.64041,
                    "spatialReference" : {
                        "wkid" : 102100
                    }
                });
                map = new esri.Map("map", {
                    extent : esri.geometry.geographicToWebMercator(initialExtent),
                });

                //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
                //var grayBasemapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");
                //map.addLayer(grayBasemapLayer);

                var census = new esri.layers.ArcGISDynamicMapServiceLayer("http://arcgis.focusproject.org:8399/arcgis/rest/services/2012APR11_California_Partnerships_Colleges_HealthCare_VA.gdb/MapServer", {
                    id : 'census',
                    opacity : 0.8
                });
                //var safety = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyOperationalLayers/MapServer", {
                //    id : 'publicsafety',
                //    opacity : 0.8
                //});

                dojo.connect(map, 'onLayersAddResult', function(results) {

                    var toc = new agsjs.dijit.TOC({
                        map : map,
                        layerInfos : [{
                            //layer: safety,
                            //title: "Safety Operations"
                            //},{
                            layer : census,
                            title : "Partnerships"
                        }]
                    }, 'tocDiv');
                    toc.startup();

                });
                //map.addLayers([census, safety]);
                map.addLayers([census]);

                //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
                //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
                var resizeTimer;

                createBasemapGallery();

                dojo.connect(map, 'onLoad', function(theMap) {
                    dojo.connect(dijit.byId('map'), 'resize', function() {//resize the map if the div is resized
                        clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(function() {
                            map.resize();
                            map.reposition();
                        }, 500);
                    });
                });
            }

            function createBasemapGallery() {
                //Manually create a list of basemaps to display
                var basemaps = [];
                var basemapRoad = new esri.dijit.Basemap({
                    layers : [new esri.dijit.BasemapLayer({
                        type : "BingMapsRoad"
                    })],
                    id : "bmRoad",
                    title : "Road"
                });
                basemaps.push(basemapRoad);
                var basemapAerial = new esri.dijit.Basemap({
                    layers : [new esri.dijit.BasemapLayer({
                        type : "BingMapsAerial"
                    })],
                    id : "bmAerial",
                    title : "Aerial"
                });
                basemaps.push(basemapAerial);
                var basemapHybrid = new esri.dijit.Basemap({
                    layers : [new esri.dijit.BasemapLayer({
                        type : "BingMapsHybrid"
                    })],
                    id : "bmHybrid",
                    title : "Aerial with labels"
                });
                basemaps.push(basemapHybrid);
                basemapGallery = new esri.dijit.BasemapGallery({
                    showArcGISBasemaps : false,
                    basemaps : basemaps,
                    bingMapsKey : bingKey,
                    map : map
                });

                //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
                //we are going to create a custom user interface to display the basemaps, in this case a menu.
                dojo.forEach(basemapGallery.basemaps, function(basemap) {
                    //Add a menu item for each basemap, when the menu items are selected
                    dijit.byId("bingMenu").addChild(new dijit.MenuItem({
                        label : basemap.title,
                        onClick : dojo.hitch(this, function() {
                            this.basemapGallery.select(basemap.id);
                        })
                    }));

                });
            }


            dojo.addOnLoad(init);

        </script>
    </head>
    <body class="claro">
        <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
            <div id="header" dojotype="dijit.layout.ContentPane" region="top">
                <div>
                    <b>Table Of Content (TOC/Legend) Widget</b><a style="right:20px;position: absolute" href="../docs/toc/examples.html">Documentation</a>
                </div>
                <ul style="margin:2px">
                    <li>
                        Click check box to turn on/off layers. When click on groups, all sublayers will be turned on/off.
                    </li>
                </ul>
            </div>
            <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
                <div id="tocDiv"></div>
            </div>
            <div id="map" dojotype="dijit.layout.ContentPane" region="center">
                <div style="position:absolute; right:50px; top:10px; z-Index:99;">
                    <button id="dropdownButton" iconClass="bingIcon" label="Basemaps"  dojoType="dijit.form.DropDownButton">
                        <div dojoType="dijit.Menu" id="bingMenu">
                            <!--The menu items are dynamically created using the basemap gallery layers-->
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>

Thanks for your help...

R

[esrijay]

For starters you don't have your bing base map key entered:

var bingKey = 'Enter your Bing Maps Key';

Can you get your Map to show? Your extent (YMin, YMax, XMin, XMax) your entering state plane but your spatial ref is 102100 web Mercator so you are trying to reproject it?
with this line of code:

map = new esri.Map("map", {extent : esri.geometry.geographicToWebMercator(initialExtent),});

I've never done that...but I'm new to JS...seems like a performance hit...I would just type in your WebMercator coords instead of typing in StatePlane and the running through the Geometry service... Also I don't see a ref to the geometry service?


If the BING key doesn't help. I would isolate the base map code and just getting working by itself and then added it back into your code.

Jay

[rachellinonis]

For starters you don't have your bing base map key entered:

var bingKey = 'Enter your Bing Maps Key';

Can you get your Map to show? Your extent (YMin, YMax, XMin, XMax) your entering state plane but your spatial ref is 102100 web Mercator so you are trying to reproject it?
with this line of code:

map = new esri.Map("map", {extent : esri.geometry.geographicToWebMercator(initialExtent),});

I've never done that...but I'm new to JS...seems like a performance hit...I would just type in your WebMercator coords instead of typing in StatePlane and the running through the Geometry service... Also I don't see a ref to the geometry service?


If the BING key doesn't help. I would isolate the base map code and just getting working by itself and then added it back into your code.

Jay

Hi Jay - I did what you suggested. I isolated the base map code, got it working, and then added it back in. It worked!

I also changed the coordinate system .. That was an old part of my code that I forgot to change. Putting all that together seemed to work.

Thanks again!

Rachel

[esrijay]

Rachel,

If I answered your question or helped out would you be so kind to hit the check button next to my response and it should mark it as answered. This will give me a point and let others know that your question was answered so maybe it will help them answer the same or similar question.

Thanks