Removing LODS after the map has loaded

JasonLevine · ‎10-10-2012

Any Idea how to remove LODS from the map after the map is loaded? In flex, it's as simple as altering the map's lods array:

map.lods.push( new LOD(19,0.149291071,564.248588))

However, it doesn't appear to be as straightforward in JavaScript. There are examples on how to set the LODS during map instantiation, but I'm trying to alter them after the map loads.

I've tried:

map.__tileInfo.lods.splice(0,14)

This appears to successfully remove 14 LODS from the array, but results in very weird map behavior, and the zoom slider doesn't reset to show me that my LODS have been removed.

Any help is appreciated.

Thanks

derekswingley1 · ‎10-10-2012

Are you not able to use map.lods to specify your levels of detail when the map is created?

JasonLevine · ‎10-10-2012

No, map.lods doesn't seem to be working for me. All I'm trying to do is remove some of the LODS after the map is loaded.

Thanks,
Jason

JasonLevine · ‎10-10-2012

Basically, I'm loading the map at a specified initial extent and then get the map level that the map zooms to.

I then try to remove all of the LODS beyond that map level, so that the user cannot zoom out to a LOD beyond the map level that the map initially loads to.

var mapLevel = map.getLevel();
var mapLODS = [];
dojo.forEach(map.__tileInfo.lods,function(LOD, index){
  if(index>=mapLevel){
      var level = {"level": LOD.level,"resolution": LOD.resolution, "scale": LOD.scale}
      mapLODS.push(level);
  }
});
map.lods = mapLODS;

The map does not respond to this at all.

Any suggestions?

derekswingley1 · ‎10-10-2012

Once a map's levels are set they can't be changed.

Using options.lods for the map constructor isn't the most straightforward thing (and we'll hopefully change this soon) but it does work. Here's an example:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Topographic Map</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map { padding:0; }
    </style>
    <script>var dojoConfig = {parseOnLoad: true};</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      
      var map;

      function init() {
        var bounds = new esri.geometry.Extent({"xmin":-8500293,"ymin":4590772,"xmax":-8299263,"ymax":4671642,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{
          extent: bounds,
          lods: [
            {"level" : 6, "resolution" : 2445.98490512499, "scale" : 9244648.868618}, 
            {"level" : 7, "resolution" : 1222.99245256249, "scale" : 4622324.434309}, 
            {"level" : 8, "resolution" : 611.49622628138, "scale" : 2311162.217155}, 
            {"level" : 9, "resolution" : 305.748113140558, "scale" : 1155581.108577}, 
            {"level" : 10, "resolution" : 152.874056570411, "scale" : 577790.554289}, 
            {"level" : 11, "resolution" : 76.4370282850732, "scale" : 288895.277144}, 
            {"level" : 12, "resolution" : 38.2185141425366, "scale" : 144447.638572}, 
            {"level" : 13, "resolution" : 19.1092570712683, "scale" : 72223.819286}, 
            {"level" : 14, "resolution" : 9.55462853563415, "scale" : 36111.909643}, 
            {"level" : 15, "resolution" : 4.77731426794937, "scale" : 18055.954822}, 
            {"level" : 16, "resolution" : 2.38865713397468, "scale" : 9027.977411}
          ]
        });
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        dojo.connect(map, "onLoad", function(theMap) { 
          dojo.connect(dijit.byId("map"), "resize", map, map.resize);
        });
      }

      dojo.ready(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;padding:0;">
     </div>
    </div>
  </body>

</html>

I pulled those levels from here: http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer?f=pjson If you're not using a web mercator basemap, you can pull levels for your map from your services directory.

JasonLevine · ‎10-10-2012

Thanks for the info. I thought I'd be able to change them after they've been set since I can in flex, but I guess it's different with dojo and javascript.

GaryJohnson · ‎12-21-2012

I see an answer has already been provided but I thought I'd share an easy way I use to restrict the number of scale levels displayed when using a tiled basemap. In the end it's the same idea of removing LODs but in a slightly simpler way.

Here's the code ...

var basemapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://.....yourmapservice.....);
dojo.connect(basemapLayer, "onLoad", function() {
    map = new esri.Map("map", { lods : JSON.parse(JSON.stringify(basemapLayer.tileInfo.lods)).splice(4,12) });
    map.addLayer(basemapLayer);
});

It first loads the basemap tiled layer and then when the layer has been loaded I use the basemapLayer.tileInfo.lods returned for the layer and use an array splice to extract the lods for (in this case) zoom levels 4 to 15. Once I've setup the map with those lods I can then add my basemap layer to the map.

I find this a lot easier than including the LOD descriptions in the page.