topic Re: Removing LODS after the map has loaded in ArcGIS JavaScript Maps SDK Questions

Removing LODS after the map has loaded

JasonLevine — Wed, 10 Oct 2012 17:42:16 GMT

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

Re: Removing LODS after the map has loaded

derekswingley1 — Wed, 10 Oct 2012 19:18:36 GMT

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

Re: Removing LODS after the map has loaded

JasonLevine — Wed, 10 Oct 2012 19:29:44 GMT

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

Re: Removing LODS after the map has loaded

JasonLevine — Fri, 10 Dec 2021 20:35:31 GMT

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?

Re: Removing LODS after the map has loaded

derekswingley1 — Fri, 10 Dec 2021 20:35:33 GMT

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.

Re: Removing LODS after the map has loaded

JasonLevine — Wed, 10 Oct 2012 23:15:15 GMT

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.

Re: Removing LODS after the map has loaded

GaryJohnson — Fri, 10 Dec 2021 20:35:36 GMT

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.