+ Reply to Thread
Results 1 to 4 of 4

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

  1. #1
    Rachel Linonis
    Join Date
    Jan 2012
    Posts
    17
    Points
    0
    Answers Provided
    0


    0

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

    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.

    Code:
            </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

  2. #2
    J McNeil
    Join Date
    Apr 2010
    Posts
    180
    Points
    53
    Answers Provided
    10


    0
    This post is marked as the answer

    Default Re: TOC Legend widget/Basemap widget isn't working for me

    For starters you don't have your bing base map key entered:
    Code:
    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:
    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

  3. #3
    Rachel Linonis
    Join Date
    Jan 2012
    Posts
    17
    Points
    0
    Answers Provided
    0


    0

    Default Re: TOC Legend widget/Basemap widget isn't working for me

    Quote Originally Posted by esrijay View Post
    For starters you don't have your bing base map key entered:
    Code:
    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:
    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

  4. #4
    J McNeil
    Join Date
    Apr 2010
    Posts
    180
    Points
    53
    Answers Provided
    10


    0

    Default Re: TOC Legend widget/Basemap widget isn't working for me

    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

+ Reply to Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts