limit zoom levels

5013
6
Jump to solution
02-05-2014 08:30 AM
FlorianHruby2
New Contributor III
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
0 Kudos
1 Solution

Accepted Solutions
StephenSylvia
Esri Regular Contributor
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

0 Kudos
6 Replies
FlorianHruby2
New Contributor III
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]
0 Kudos
StephenSylvia
Esri Regular Contributor
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

0 Kudos
FlorianHruby2
New Contributor III
Wow - that's exactly my level of programming skills ;)

Works perfect - thank you very much!
0 Kudos
AliceJarvis
New Contributor
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
0 Kudos
StephenSylvia
Esri Regular Contributor
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
});
0 Kudos
AliceJarvis
New Contributor
Thanks, I'll give it a go.
0 Kudos