map.getLevel() returns -1 when no basemap specified...bug?

TimDuggan · ‎03-22-2016

I have an application that is being displayed on a 4k touch screen and am having trouble with slow drawing times for the basemap simply because there is so much pixel area on the screen and in the visible extent. I wanted to try an option where I didn't use a basemap and, instead, used a very simple feature layer that acts as a basemap. When I do so, all the places where I was reading map.getExtent() to determine certain events all break because the value is -1 instead of, for example, 11. Anyone else run into this? Anyone have any good solutions for getting a basemap to load as quickly as possible?

Thanks in advance,

Tim

KenBuja · ‎03-23-2016

This would make sense if your map contains no services that are tiled (either a basemap or your own layers). This method relies on the LODs of the map, which are automatically supplied by the tiled services. Now while the documentation for getLevel states

Valid only with an ArcGISTiledMapService layer.

you can specify the LODs when constructing the map that doesn't utilize any tiled services and still use this method.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create Map and add a dynamic layer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css"/>
    <style>
      html, body, #mapDiv{
        padding: 0;
        margin: 0;
        height: 100%;
      }
    </style>
    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters"
      ], function (
        Map, ArcGISDynamicMapServiceLayer, ImageParameters) {
            var lods = [
                {"level" : 0, "resolution" : 0.010986328125, "scale" : 4617149.97766929},
                {"level" : 1, "resolution" : 0.0054931640625, "scale" : 2308574.98883465},
                {"level" : 2, "resolution" : 0.00274658203125, "scale" : 1154287.49441732},
                {"level" : 3, "resolution" : 0.001373291015625, "scale" : 577143.747208662},
                {"level" : 4, "resolution" : 0.0006866455078125, "scale" : 288571.873604331}
            ];


        map = new Map("mapDiv", {
          sliderOrientation : "horizontal",
          lods: lods
        });

        var imageParameters = new ImageParameters();
        imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapSe...", {
          "opacity" : 0.5,
          "imageParameters" : imageParameters
        });

        map.addLayer(dynamicMapServiceLayer);
        
        map.on('extent-change',function() { alert(map.getLevel()); });
      });
    </script>
  </head>
  <body>
    <div id="mapDiv"></div>
  </body>
</html>

View solution in original post

TimDuggan · ‎03-22-2016

Forgot to mention that I reproduced it here using the most recent api version:

ArcGIS API for JavaScript Sandbox

I added dojo/on and then

map.on('extent-change',function() { alert(map.getLevel()); });

-1 every time regardless of whether I zoom in or out.

KenBuja · ‎03-23-2016

This would make sense if your map contains no services that are tiled (either a basemap or your own layers). This method relies on the LODs of the map, which are automatically supplied by the tiled services. Now while the documentation for getLevel states

Valid only with an ArcGISTiledMapService layer.

you can specify the LODs when constructing the map that doesn't utilize any tiled services and still use this method.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create Map and add a dynamic layer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css"/>
    <style>
      html, body, #mapDiv{
        padding: 0;
        margin: 0;
        height: 100%;
      }
    </style>
    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters"
      ], function (
        Map, ArcGISDynamicMapServiceLayer, ImageParameters) {
            var lods = [
                {"level" : 0, "resolution" : 0.010986328125, "scale" : 4617149.97766929},
                {"level" : 1, "resolution" : 0.0054931640625, "scale" : 2308574.98883465},
                {"level" : 2, "resolution" : 0.00274658203125, "scale" : 1154287.49441732},
                {"level" : 3, "resolution" : 0.001373291015625, "scale" : 577143.747208662},
                {"level" : 4, "resolution" : 0.0006866455078125, "scale" : 288571.873604331}
            ];


        map = new Map("mapDiv", {
          sliderOrientation : "horizontal",
          lods: lods
        });

        var imageParameters = new ImageParameters();
        imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapSe...", {
          "opacity" : 0.5,
          "imageParameters" : imageParameters
        });

        map.addLayer(dynamicMapServiceLayer);
        
        map.on('extent-change',function() { alert(map.getLevel()); });
      });
    </script>
  </head>
  <body>
    <div id="mapDiv"></div>
  </body>
</html>