Lods for basemaps

AndyBurns · ‎05-31-2011

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

JeffPace · ‎06-01-2011

I dont believe you can modify the LODs of the map object, they are defined by the first cached service loaded.

Therefore, it is my guess you would have to destroy and recreate the map object based on a service that had the correct levels.

I would love to see a solution to this, as my services go from L00 to L20, and i would love to restrict them to L12-L20, but if VE is used, make it L12-L17 as it shuts off here.

Or at least display a "no tile found" png.

AndyBurns · ‎06-02-2011

I did have a play with open layers and when switching basemapping, the map slider would automatically change to the LODS of the base map you have selected.

There is a way around it but its not pritty, it still shows all the lods of the first base map however when selecting a scale not available (that you manually supply) it zooms the slider to a scale that you have selected using the onZoomEnd function.

Something like this:

dojo.connect(map, "onZoomEnd", function() {

            if (aerial.visible == true) {
                if (map.getLevel() <= 😎 {
                    zoomTimer = setTimeout(function() { map.setLevel(9); }, 100);
                }
            }
        });