Implement Layers of Details (LODs) for custom basemaps using ArcGIS Javascript API 3.17

Question

I am trying to implement layers of details (LODs) on a few custom basemaps using the ArcGIS Javascript API 3.17. One is for less detail, and the other two used for more detail, but covering different zones. I'm having issues, and the page isn't loading however (for Firefox and IE). Can anyone see anything I'm not? Note, that I've used some sample services here. Additionally, I've added some dynamic feature layers in my real implementation, that I've not included here.

var map;
var extent;
var baseMapLayerPPT;
var baseMapLayerPoly;
var customLods = [];
var loadCount = 0;

require([
  "esri/geometry/Extent","esri/map", "esri/dijit/Search", "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/domReady!"
], function (Extent, Map, Search, DynamicMapServiceLayer, FeatureLayer, InfoTemplate) {

  baseMapLayerPoly = new esri.layers.ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", {
    displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  });

  baseMapLayerPoly.on("load", addLods);

  baseMapLayerPPT = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", {
    displayLevels: [11, 12, 13, 14, 15 ],
    //opacity : 0.75
  });

  extent = new esri.geometry.Extent({
    "xmin":-91070.37,"ymin":7988806.64,"xmax":301214.62,"ymax":8227343.05,
    "spatialReference":{"wkid":3297}
  });

  // popuplate an array with zoom levels
  function addLods(evt) {
    customLods = customLods.concat(evt.layer.tileInfo.lods);
    loadCount++;
    if (loadCount === 2) {
      initMap();
    }
  }

  // create the map and use the custom zoom levels
  function initMap() {
    map = new Map("mapDiv", {
      center: [-150, -17],
      zoom: 9,
      lods : customLods
    });
    map.on("extent-change", changeScale);
    map.addLayers([baseMapLayerPoly,baseMapLayerPPT);
  }

  //Report which layer is being shown
  function changeScale(evt) {
    dom.byId("scale").innerHTML = "Level: <i>" + evt.lod.level;
    if (evt.lod.level < 11) {
      dom.byId("visibleLayer").innerHTML = "Layer: <i>Imagery</i>";
    } else if (evt.lod.level == 11) {
      // both layers are loaded
      dom.byId("visibleLayer").innerHTML = "<i>Both layers currently visible</i>";
    } else {
      dom.byId("visibleLayer").innerHTML = "Layer: <i>Streets</i>";
    }
  }


});

Answer 1

    var map;
    var extent;
var baseMapLayerPPT;
var baseMapLayerPoly;
var customLods = [];
var loadCount = 0;

require([
  "esri/geometry/Extent","esri/map", "esri/dijit/Search", "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer", "esri/InfoTemplate","esri/layers/ArcGISTiledMapServiceLayer" ,"dojo/domReady!"
], function (Extent, Map, Search, DynamicMapServiceLayer, FeatureLayer, InfoTemplate,ArcGISTiledMapServiceLayer) {

  baseMapLayerPoly = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", {
    displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  });

  baseMapLayerPoly.on("load", addLods);

  baseMapLayerPPT = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", {
    displayLevels: [11, 12, 13, 14, 15 ],
    //opacity : 0.75
  });
  baseMapLayerPPT.on("load", addLods);
  extent = new esri.geometry.Extent({
    "xmin":-91070.37,"ymin":7988806.64,"xmax":301214.62,"ymax":8227343.05,
    "spatialReference":{"wkid":3297}
  });

  // popuplate an array with zoom levels
  function addLods(evt) {
    customLods = customLods.concat(evt.layer.tileInfo.lods);
    loadCount++;
    if (loadCount === 2) {
      initMap();
    }
  }

  // create the map and use the custom zoom levels
  function initMap() {
    map = new Map("mapDiv", {
      center: [-150, -17],
      zoom: 9,
      lods : customLods
    });

    map.addLayers([baseMapLayerPoly,baseMapLayerPPT]);
  }

  //Report which layer is being shown



});

you have 3 error ;

1 : You forgot it "]"

map.addLayers([baseMapLayerPoly,baseMapLayerPPT]);

2 : your addLods function running only one time

baseMapLayerPPT.on("load", addLods);

3 : you forgot a AMD Module

"esri/layers/ArcGISTiledMapServiceLayer"

or change this code

baseMapLayerPPT = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", {
displayLevels: [11, 12, 13, 14, 15 ],
//opacity : 0.75
});

to this

baseMapLayerPPT = new esri.layers.ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", {
displayLevels: [11, 12, 13, 14, 15 ],
//opacity : 0.75
});