</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>
Solved! Go to Solution.
var bingKey = 'Enter your Bing Maps Key';
map = new esri.Map("map", {extent : esri.geometry.geographicToWebMercator(initialExtent),});
var bingKey = 'Enter your Bing Maps Key';
map = new esri.Map("map", {extent : esri.geometry.geographicToWebMercator(initialExtent),});
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