Default Zoom Slider

DuncanRager · ‎08-04-2011

Greetings,

The zoom slider that shows up in my map by default has two little boxes, with no "slider" in between them... see the attached screenshot for a visual.

How can I get the normal zoom slider that I see on all of the samples?

Thanks,

DR

derekswingley1 · ‎08-04-2011

This is what you get when you use a dynamic map service. If the first layer you add to your map is a cached service, you'll see the zoom slider.

Dynamic map service sample: http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/map_dynamic.html
Cached map service sample: http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/map_topo.html

DuncanRager · ‎08-04-2011

Thanks for the tip... is there any way to change this? I'd like to use the cached service slider on my dynamic map server.

Thanks,

DR

derekswingley1 · ‎08-04-2011

I'd never thought of doing that before, but yes, you can do it. Define LODs for your map and it'll have a slider. Here's a working 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>Dynamic Map Service with Zoom Slider</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      var map;
      function init() {
        var lods = [
          { level: 0 , resolution: 0.3515625 , scale: 147748799.285417 },
          { level: 1 , resolution: 0.17578125 , scale: 73874399.6427087 },
          { level: 2 , resolution: 0.087890625 , scale: 36937199.8213544 },
          { level: 3 , resolution: 0.0439453125 , scale: 18468599.9106772 },
          { level: 4 , resolution: 0.02197265625 , scale: 9234299.95533859 },
          { level: 5 , resolution: 0.010986328125 , scale: 4617149.97766929 },
          { level: 6 , resolution: 0.0054931640625 , scale: 2308574.98883465 },
          { level: 7 , resolution: 0.00274658203125 , scale: 1154287.49441732 },
          { level: 8 , resolution: 0.001373291015625 , scale: 577143.747208662 },
          { level: 9 , resolution: 0.0006866455078125 , scale: 288571.873604331 },
          { level: 10 , resolution: 0.00034332275390625 , scale: 144285.936802165 },
          { level: 11 , resolution: 0.000171661376953125 , scale: 72142.9684010827 },
          { level: 12 , resolution: 0.0000858306884765629 , scale: 36071.4842005414 },
          { level: 13 , resolution: 0.0000429153442382814 , scale: 18035.7421002707 },
          { level: 14 , resolution: 0.0000214576721191407 , scale: 9017.87105013534 },
          { level: 15 , resolution: 0.0000107288360595703 , scale: 4508.93552506767 }
        ];
        map = new esri.Map("map", { lods: lods });
        var dyn = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer");
        map.addLayer(dyn);
      }
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div id="map" style="width:900px; height:300px; border:1px solid #000;"></div>
    
  </body>
</html>

I generated those LODs from the old WGS84 ArcGIS Online Imagery map service with this JS in firebug:

dojo.forEach(map.__tileInfo.lods, function(l) { console.log('{ level: ', l.level, ', resolution: ', l.resolution, ', scale: ', l.scale, '},'); });

If you use that snippet, don't forget to remove the last trailing comma.

DuncanRager · ‎08-05-2011

Thanks for the tip. My map is in a NAD83 projection with 2 different map services providing layers. I can't use your snippet in firebug because the map.__tileInfo is null... not surprising since both services are dynamic map services.

I tried throwing this in there:

var lods = [
   {level: 0, scale: 1000000},
   {level: 1, scale: 750000},
   {level: 2, scale: 500000},
   {level: 3, scale: 250000},
   {level: 4, scale: 100000},
   {level: 5, scale: 75000},
   {level: 6, scale: 24000},
   {level: 7, scale: 10000},
   {level: 8, scale: 1000},
   {level: 9, scale: 500}
  ];

But it didn't like that one bit... slider wouldn't work and I couldn't use my mouse to zoom in and out either... maybe because the resolution isn't included? Any ideas as to how to get that information? Would it be different for each map service?

Thanks,

DR

derekswingley1 · ‎08-05-2011

The code I posted works if you run it against a tiled map service. As you've found out, it doesn't work with dynamic services.

Check out the documentation for the levels of detail(LOD) class. You need to provide a level, scale AND resolution when you create LODs.

JeffPace · ‎08-05-2011

Add as an added shortcut, if you have a cached service, just go to the mapservice url with ?f=pjson at the end to get the levels

For example, here is our cached basemap in Web Merc Aux Sphere
http://www.mymanatee.org/arcgis/rest/services/base-map/aerials-2011/MapServer?f=pjson

You can then just copy out the LODS array and remove and levels you want to hide

{
 "currentVersion": 10.01,
 "serviceDescription": "",
 "mapName": "Manatee County, FL",
 "description": "This is my service",
 "copyrightText": "Information Services - GIS",
 "layers": [
  {
   "id": 0,
   "name": "2011 Aerials",
   "parentLayerId": -1,
   "defaultVisibility": true,
   "subLayerIds": null,
   "minScale": 0,
   "maxScale": 0
  },
  {
   "id": 1,
   "name": "Florida Major Roads",
   "parentLayerId": -1,
   "defaultVisibility": true,
   "subLayerIds": null,
   "minScale": 0,
   "maxScale": 50000
  },
  {
   "id": 2,
   "name": "base",
   "parentLayerId": -1,
   "defaultVisibility": true,
   "subLayerIds": null,
   "minScale": 0,
   "maxScale": 0
  }
 ],
 "tables": [],
 "spatialReference": {"wkid": 102100},
 "singleFusedMapCache": true,
 "tileInfo": {
  "rows": 256,
  "cols": 256,
  "dpi": 96,
  "format": "JPEG",
  "compressionQuality": 75,
  "origin": {
   "x": -2.0037508342787E7,
   "y": 2.0037508342787E7
  },
  "spatialReference": {"wkid": 102100},
  "lods": [
   {
    "level": 0,
    "resolution": 156543.03392800014,
    "scale": 5.91657527591555E8
   },
   {
    "level": 1,
    "resolution": 78271.51696399994,
    "scale": 2.95828763795777E8
   },
   {
    "level": 2,
    "resolution": 39135.75848200009,
    "scale": 1.47914381897889E8
   },
   {
    "level": 3,
    "resolution": 19567.87924099992,
    "scale": 7.3957190948944E7
   },
   {
    "level": 4,
    "resolution": 9783.93962049996,
    "scale": 3.6978595474472E7
   },
   {
    "level": 5,
    "resolution": 4891.96981024998,
    "scale": 1.8489297737236E7
   },
   {
    "level": 6,
    "resolution": 2445.98490512499,
    "scale": 9244648.868618
   },
   {
    "level": 7,
    "resolution": 1222.992452562495,
    "scale": 4622324.434309
   },
   {
    "level": 8,
    "resolution": 611.4962262813797,
    "scale": 2311162.217155
   },
   {
    "level": 9,
    "resolution": 305.74811314055756,
    "scale": 1155581.108577
   },
   {
    "level": 10,
    "resolution": 152.87405657041106,
    "scale": 577790.554289
   },
   {
    "level": 11,
    "resolution": 76.43702828507324,
    "scale": 288895.277144
   },
   {
    "level": 12,
    "resolution": 38.21851414253662,
    "scale": 144447.638572
   },
   {
    "level": 13,
    "resolution": 19.10925707126831,
    "scale": 72223.819286
   },
   {
    "level": 14,
    "resolution": 9.554628535634155,
    "scale": 36111.909643
   },
   {
    "level": 15,
    "resolution": 4.77731426794937,
    "scale": 18055.954822
   },
   {
    "level": 16,
    "resolution": 2.388657133974685,
    "scale": 9027.977411
   },
   {
    "level": 17,
    "resolution": 1.1943285668550503,
    "scale": 4513.988705
   },
   {
    "level": 18,
    "resolution": 0.5971642835598172,
    "scale": 2256.994353
   },
   {
    "level": 19,
    "resolution": 0.29858214164761665,
    "scale": 1128.497176
   },
   {
    "level": 20,
    "resolution": 0.14929107082380833,
    "scale": 564.248588
   }
  ]
 },
 "initialExtent": {
  "xmin": -9317797.891553422,
  "ymin": 3061811.682989043,
  "xmax": -9075390.77966656,
  "ymax": 3293519.8681217567,
  "spatialReference": {"wkid": 102100}
 },
 "fullExtent": {
  "xmin": -9799149.374012526,
  "ymin": 2763455.695588875,
  "xmax": -8856957.606708061,
  "ymax": 3690364.6251676935,
  "spatialReference": {"wkid": 102100}
 },
 "units": "esriMeters",
 "supportedImageFormatTypes": "PNG32,PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,BMP",
 "documentInfo": {
  "Title": "Tax_Lot",
  "Author": "tlabarr",
  "Comments": "",
  "Subject": "",
  "Category": "",
  "Keywords": "",
  "AntialiasingMode": "None",
  "TextAntialiasingMode": "Force"
 },
 "capabilities": "Map,Query,Data"
}