Arkitech

Lods for basemaps

Discussion created by Arkitech on May 31, 2011
Latest reply on Jun 2, 2011 by Arkitech
Hi

I have 5 custom basemaps setup for my mapping but want to specify lods for each basemap so when a user switches to the basemaps it only gives them the lods available.

I have a static operational layer that i want to keep on during the basemap switching which is working fine it just is going to a plain white map as there is no mapping for some scales that the init mapping has.


At the moment my code looks like this

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css">   
    <style type="text/css">
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail{
        border-color: #66FFFF !important;
      }
      #map{
        padding:0;
      }
    </style>

   
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"></script>
   
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
   dojo.require("esri.layers.agstiled");
      dojo.require("dijit.TitlePane");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("esri.arcgis.utils");
      var map = null;
   var customLods = [];
      var loadCount = 0;
  
  
      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":186819,"ymin":230984,"xmax":506529,"ymax":407263,"spatialReference":{"wkid":27700}});
        map = new esri.Map("map",{extent:initExtent});
       
        createBasemapGallery();
       
        dojo.connect(dijit.byId('map'), 'resize', resizeMap);
      }

  
   function createBasemapGallery(){
       //Manually create basemaps to add to basemap gallery
       var basemaps= [];
  
  //Background
        var BackgroundLayer = new esri.dijit.BasemapLayer({
          url:"http://server/ArcGIS/rest/services/Background_Mixed/MapServer"
        });  
        var Background = new esri.dijit.Basemap({
          layers:[BackgroundLayer],
          title:"Shropshire",
          thumbnailUrl:"img/Background.png"
        });
        basemaps.push(Background);
  //Aerial
        var AerialLayer = new esri.dijit.BasemapLayer({
          url:"http://server/ArcGIS/rest/services/Imagery_Current/MapServer"
        });
        var Aerial = new esri.dijit.Basemap({
          layers:[AerialLayer],
          title:"Aerial",
          thumbnailUrl:"img/Aerial.png"
        });
        basemaps.push(Aerial);
  //Aerial Historic
  var AerialHistoricLayer = new esri.dijit.BasemapLayer({
          url:"http://server/ArcGIS/rest/services/Imagery_1999/MapServer"
        });
        var AerialHistoric = new esri.dijit.Basemap({
          layers:[AerialHistoricLayer],
          title:"Aerial 1999",
          thumbnailUrl:"img/Aerial.png"
        });
        basemaps.push(AerialHistoric);
  //Historic10500
  var Historic10500Layer = new esri.dijit.BasemapLayer({
          url:"http://server/ArcGIS/rest/services/Historic10500/MapServer"
        });
        var Historic10500 = new esri.dijit.Basemap({
          layers:[Historic10500Layer],
          title:"Historic 10500",
          thumbnailUrl:"img/historic10500.png"
        });
        basemaps.push(Historic10500);
  //Historic2500
  var Historic2500Layer = new esri.dijit.BasemapLayer({
        url:"http://server/ArcGIS/rest/services/Historic2500/MapServer"
        });
        var Historic2500 = new esri.dijit.Basemap({
          layers:[Historic2500Layer],
          title:"Historic 2500",
          thumbnailUrl:"img/historic2500.png"
        });
        basemaps.push(Historic2500);
       
  var basemapGallery = new esri.dijit.BasemapGallery({
         showArcGISBasemaps:false,
         basemaps:basemaps,
         map:map
        },"basemapGallery");
        basemapGallery.startup();

         var selectionHandler = dojo.connect(basemapGallery,"onSelectionChange",function(){
          dojo.disconnect(selectionHandler);
          //add the esri population layer to the map
          var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://server/ArcGIS/rest/services/JSLBSR/MapServer", {"opacity":1.0});
          map.addLayer(operationalLayer);
        });
       
        dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
      }
      

      function resizeMap() {
        //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;
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          map.resize();
          map.reposition();
        }, 500);
      }

      //show map on load
      dojo.addOnLoad(init);
    </script>
  </head>

  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
    <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;">

      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false"  open="false">
          <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
          <div id="basemapGallery" ></div></div>
        </div>
      </div>
      </div>
    </div>
  </body>

  </html>

How would i add LODS to this code following this sample?

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm

thanks

Outcomes