limit zoom levels

FlorianHruby2 · ‎02-05-2014

Hi there,

Using the Side Accordion template I would like to limit the zoom levels. This code-sample seems to do what I???m looking for: https://developers.arcgis.com/javascript/jssamples/map_customtilelevels.html

Do you have any suggestion/experience, where I have to put it within the storymap-files?

Thank you & kind regards,

Flo

StephenSylvia · ‎02-06-2014

It should be even easier now that the api has provided the option to set a min and max zoom level. For the side accordion app, you can open the Core.js file in a text editor. Within this file, you will see the loadMaps function:

function loadMaps()
{
$("#map-pane").append('<div id="map'+app.maps.length+'" class="map"></div>');
$("#legend-pane").append('<div id="legend'+app.maps.length+'" class="legend"></div>');
$("#mobile-popup").append('<div class="mobile-popup-content"></div>');
$(".map").last().fadeTo(0,0);

var popup = new esri.dijit.Popup({
}, dojo.create("div"));

var mapDeferred = esri.arcgis.utils.createMap(configOptions.webmaps[app.maps.length].id,"map"+app.maps.length,{
mapOptions: {
extent: getExtent(),
infoWindow: popup,
minZoom: 10,
maxZoom: 17
},
bingMapsKey: configOptions.bingmapskey
});

Just set the minZoom and maxZoom settings like you see in red.

View solution in original post

FlorianHruby2 · ‎02-05-2014

Hi again ... I tried around with the code samples on the ESRI-Site. The following loads a webmap but doesn´t respect the LOD that I set. Any hints?

thank you & best regards,

[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 web map from id</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <link rel="stylesheet" href="css/layout.css">

    <script src="http://js.arcgis.com/3.8/"></script>
    <script>

     var map;

     require([
        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map",
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "dojo/domReady!"
      ], function(
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar
      ) {
        ready(function(){

        parser.parse();

        arcgisUtils.createMap("4778fee6371d4e83a22786029f30c7e1","map").then(function(response){
          //update the app
          dom.byId("title").innerHTML = response.itemInfo.item.title;
          dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

          var lods = [{
          "level": 11,
          "resolution": 76.4370282850732,
          "scale": 288895.277144
        }, {
          "level": 12,
          "resolution": 38.2185141425366,
          "scale": 144447.638572
        }];

          var map =new Map(response.map, {
          lods: lods
        });

         response.map.on("extent-change", function(evt) {
          dom.byId("scale").innerHTML = "LOD Level: <i>" + evt.lod.level +
            "</i> Resolution: <i>" + evt.lod.resolution.toFixed(3) +
            "</i> Scale: <i>" + evt.lod.scale.toFixed(3) + "</i>";
        });

          //add the scalebar
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
          });

          //add the legend. Note that we use the utility method getLegendLayers to get
          //the layers to display in the legend from the createMap response.
          var legendLayers = arcgisUtils.getLegendLayers(response);
          var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
          },"legend");
          legendDijit.startup();

        });

        });

      });
    </script>
</head>

<body>
    <div id="map">
      <span id="scale" style="position:absolute; left:10px; bottom:10px; z-index:100; color:white">
      </span>
    </div>
</body>[/HTML]

StephenSylvia · ‎02-06-2014

It should be even easier now that the api has provided the option to set a min and max zoom level. For the side accordion app, you can open the Core.js file in a text editor. Within this file, you will see the loadMaps function:

function loadMaps()
{
$("#map-pane").append('<div id="map'+app.maps.length+'" class="map"></div>');
$("#legend-pane").append('<div id="legend'+app.maps.length+'" class="legend"></div>');
$("#mobile-popup").append('<div class="mobile-popup-content"></div>');
$(".map").last().fadeTo(0,0);

var popup = new esri.dijit.Popup({
}, dojo.create("div"));

var mapDeferred = esri.arcgis.utils.createMap(configOptions.webmaps[app.maps.length].id,"map"+app.maps.length,{
mapOptions: {
extent: getExtent(),
infoWindow: popup,
minZoom: 10,
maxZoom: 17
},
bingMapsKey: configOptions.bingmapskey
});

Just set the minZoom and maxZoom settings like you see in red.

FlorianHruby2 · ‎02-06-2014

Wow - that's exactly my level of programming skills 😉

Works perfect - thank you very much!

AliceJarvis · ‎04-08-2014

Hi,

I'm using the tabbed template. With this template you can set the minZoom and maxZoom in the map.js file. This sets the zoom level for all webmaps in the storymap. I would like to know if it is possible to set it differently for different webmaps i.e. so that the webmap in one tab zoomed to level 10 and the webmap in another tab zoomed to level 15?

Thanks

StephenSylvia · ‎04-08-2014

Yes, you should be able to do something similar to what's above but you will have to add a conditional statement before the map load function. You should notice right at the beginning of the createMap function we are looping through the configOptions to get each webmap id but we are also passing an index number (i) along within the loop so we can keep track of which map we're currently looking at in the loop. Starting with 0, which will be the first map in the config file, we can set the min and max zoom to a local variable which we will then pass to the map load options. If you have more than 3 maps, you can just add more "else if" statements. See below:

function createMap() {
dojo.forEach(configOptions.webmaps, function (arg, i) {

if (configOptions.tabTitles == null) {
configOptions.tabTitles = {
"title": ""
};
}

dojo.place("<div id='mapDiv" + i + "' class='map'></div>", dojo.byId('mapPane'), "last");
if (configOptions.webmaps.length > 1) {
dojo.place("<h3 id='title" + i + "' class='mapTitle'></h3>", dojo.byId('descriptionPanel'), "last");
dojo.place("<div id='tab" + i + "' class='tab' onclick='changeMap(" + i + ")'><p id='tabText" + i + "' class='tabText'></p></div>", dojo.byId('tabArea'), "last");
dojo.addClass(dojo.byId("tab0"), "selected");
}
dojo.place("<div id='description" + i + "' class='description'></div>", dojo.byId('descriptionPanel'), "last");
dojo.place("<div id='legend" + i + "' class='legend'></div>", dojo.byId('legendPanel'), "last");

var minZoom;
var maxZoom;

if(i == 0){
minZoom = 10;
maxZoom = 17;
}
else if(i == 1){
minZoom = 3;
maxZoom = 15;
}
else{
minZoom = 12;
maxZoom = 14;
}

var mapDeferred = esri.arcgis.utils.createMap(arg.id, "mapDiv" + i, {
mapOptions: {
slider: true,
nav: false,
wrapAround180: true,
minZoom: minZoom,
maxZoom: maxZoom
},
ignorePopups: false,
bingMapsKey: configOptions.bingmapskey
});

AliceJarvis · ‎04-09-2014

Thanks, I'll give it a go.