topic Re: need help with zoom pliz in ArcGIS JavaScript Maps SDK Questions

need help with zoom pliz

HallbjornViktorsson — Wed, 21 Jul 2010 13:33:56 GMT

in my project I have to identical maps side by side and I need to do it so that I disable the zoom function on one map, and when I zoom on the other map, I will zoom at the same range at the same spot on both of them.

so my question to you all is first and foremost is it possible to do so, and if yes can you point me in the right direction cause I have been looking for some time now and I don't seem to be able to find any thing about this.

Re: need help with zoom pliz

derekswingley1 — Wed, 21 Jul 2010 15:00:18 GMT

Yes, it's possible. This should get you started: http://resources.esri.com/arcgisserver/apis/javascript/arcgis/index.cfm?fa=codeGalleryDetails&scriptID=15699

To sync your maps, listen to the onExtentChange event.

Re: need help with zoom pliz

HallbjornViktorsson — Sat, 11 Dec 2021 12:25:40 GMT

thanks for the replay it helped me allot, but now I'm in trouble again, I have managed to use the stuff you posted to work my way into making 2 maps of equal size, but now I get this errors.

lod is undefined

exception in animation handler for: onEnd

TypeError: lod is undefined

so the problems I'm having are that I can only zoom one time, after that my map is stuck at the extend I zoomed to, that is if I zoom out it's stuck out and if I zoom in it's stuck in, the zoom dose not appear on the second map until I have moved the map after the zoom, other then that is works. if I move the map it moves and so on, even if I get lod is undefined every time I move it and release the mouse.

her is the code I'm using, it's much from the example the above poster linked me to, with little modification. any help you can give me to fix those problem would be really appreciated.

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <title>BeraSmana</title>
        <style type="text/css">
            @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";
            /* NOTE: for a full screen layout, must set body size equal to the viewport. */
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="text/javascript">
            var djConfig = {
                parseOnLoad: true
            }
        </script>
  
  
  <link rel="stylesheet" type="text/css" href="lib/dojox/grid/resources/Grid.css">
  <link rel="stylesheet" type="text/css" href="lib/dojox/grid/resources/tundraGrid.css">
  <link rel="stylesheet" type="text/css" href="style.css">
   
  
     
  
  
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
        <script type="text/javascript" language="Javascript">
         
            dojo.require("esri.map");
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dijit.form.Button");
            dojo.require("dojo.parser");
            
            // ARCGISONLINE REST URL
            var arcGISOnline = "http://server.arcgisonline.com/ArcGIS/rest/services";
            
            var wgs84, initialExtent, mapDiv, mapDiv1;
      var resizeTimer;
            var mapMag, mapOV, ovGraphic;
            var posGraphic1, posGraphic2;  
   
        
            
            function init(){
                // WGS84 SPATIAL REFERENCE
                wgs84 = new esri.SpatialReference({
                    wkid: your speatialReference
                });
                initialExtent = new esri.geometry.Extent(your extent, your extent, your extent, your extent, wgs84);
                
                // MAIN MAP
                map = new esri.Map("mapDiv", {
                    extent: initialExtent,
                    nav: false,
                    slider: true
                });
               
    
     mapDiv1 = new esri.Map("mapDiv1", {
                    extent: initialExtent,
                    nav: false,
                    slider: false
                });
    
     var imageParameters = new esri.layers.ImageParameters();
          imageParameters.layerIds = [44];
          imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
  
          layer = new esri.layers.ArcGISDynamicMapServiceLayer("your server", {"imageParameters":imageParameters});
          map.addLayer(layer);


          var imageParameters = new esri.layers.ImageParameters();
          imageParameters.layerIds = [0];
          imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
  
          layer1 = new esri.layers.ArcGISDynamicMapServiceLayer("your server", {"imageParameters":imageParameters});
          mapDiv1.addLayer(layer1);

      
      
       dojo.connect(map, "onLoad", connectHandlers);
              }
            
            // ON MAP LOAD EVENT
            function connectHandlers(thisMap){
   
              
                    // MAP EVENTS
                    dojo.connect(thisMap, "onMouseMove", onMapMouseMove);
                    dojo.connect(thisMap, "onMouseOut", onMapMouseOut);
                    dojo.connect(thisMap, "onExtentChange", onMapExtentChange);
                    dojo.connect(thisMap, "onPan", onMapPan);
          
                dojo.connect(window, 'onresize', function(){
                    resizeMap([map, mapDiv1]);
                });
            }
            
            // ON MAP MOUSE MOVE
            function onMapMouseMove(event){
                var level = map.getLevel();
                var pres = Math.min(6, level);
                var x = event.mapPoint.x.toFixed(pres);
                var y = event.mapPoint.y.toFixed(pres);
                dojo.byId('mapPosition').innerHTML = dojo.string.substitute('${0}, ${1}', [x, y]);
            }
            
            // SET MAGNIFIER POSITION
            function setMagPostion(pntLoc){
                if (posGraphic1 == null) {
                    var posSym = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 22, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('red'), 3), new dojo.Color('red'));
                    posGraphic1 = new esri.Graphic(pntLoc, posSym);
                    posGraphic2 = new esri.Graphic(pntLoc, posSym);
                    map.graphics.add(posGraphic1);
                    mapMag.graphics.add(posGraphic2);
                }
                else {
                    posGraphic1.setGeometry(pntLoc);
                    posGraphic2.setGeometry(pntLoc);
                }
            }
            
            // ON MAP MOUSE OUT
            function onMapMouseOut(event){
                dojo.byId('mapPosition').innerHTML = '';
            }
            
            // ON MAP EXTENT CHANGE
            function onMapExtentChange(extent, delta, levelChange, lod){
                var scale = dojo.number.format(lod.scale, {
                    places: 0
                });
                dojo.byId('mapScale').innerHTML = dojo.string.substitute("1 : ${0}", [scale]);
                
                if (lod.level > mapMag.getLevel()) {
                    mapMag.setLevel(lod.level + 1);
                }
                updateOVPoly(extent);
            }

Re: need help with zoom pliz

HallbjornViktorsson — Sat, 11 Dec 2021 12:25:43 GMT

// ON MAP PAN
            function onMapPan(extent, delta){
                updateOVPoly(extent);
            }
            
            // UPDATE OVERVIEW GRAPHIC
            function updateOVPoly(extent){
                var ovPolygon = new esri.geometry.Polygon(wgs84);
                ovPolygon.addRing([[extent.xmin, extent.ymin], [extent.xmin, extent.ymax], [extent.xmax, extent.ymax], [extent.xmax, extent.ymin], [extent.xmin, extent.ymin]]);
                
                mapDiv1.setExtent(extent.expand(1.0));
                
                if (ovGraphic == null) {
                    var ovClr = new dojo.Color([255, 0, 0, 0.5]);
                    var ovTranspClr = new dojo.Color([255, 0, 0, 0.1]);
                    var ovSym = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, ovClr, 3.0), ovTranspClr);
                    
                    ovGraphic = new esri.Graphic(ovPolygon, ovSym);
                    mapDiv1.graphics.add(ovGraphic);
                }
                else {
                    ovGraphic.setGeometry(ovPolygon);
                }
            }
            
            // RESIZE THE MAP
            function resizeMap(maps){
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function(){
                    dojo.forEach(maps, function(aMap){
                        aMap.resize();
                        aMap.reposition();
                    });
                }, 500);
            }
            
           
            
        
   // CHANGE BASEMAP mapDiv - COMBOBOX
   function changeBasmap1(year){
    map.removeAllLayers();
  
  if (year == 1904) {i = 44; map.removeAllLayers();}
  else if(year == 1906){i = 43; map.removeAllLayers();}
  else if(year == 1909){i=42;map.removeAllLayers();}
  else if(year == 1910){i=41;map.removeAllLayers();}
  else if(year == 1911){i=40;map.removeAllLayers();}
  else if(year == 1912){i=39;map.removeAllLayers();}
  else if(year == 1913){i=38;map.removeAllLayers();}
  else if(year == 1917){i=37;map.removeAllLayers();}
  else if(year == 1921){i=36;map.removeAllLayers();}
  else if(year == 1929){i=35;map.removeAllLayers();}
  else if(year == 1932){i=34;map.removeAllLayers();}
  else if(year == 1937){i=33;map.removeAllLayers();}
  else if(year == 1938){i=32;map.removeAllLayers();}
  else if(year == 1939){i=31;map.removeAllLayers();}
  else if(year == 1941){i=30;map.removeAllLayers();}
  else if(year == 1944){i=29;map.removeAllLayers();}
  else if(year == 1945){i=28;map.removeAllLayers();}
  else if(year == 1946){i=27;map.removeAllLayers();}
  else if(year == 1947){i=26;map.removeAllLayers();}
  else if(year == 1948){i=25;map.removeAllLayers();}
  else if(year == 1964){i=24;map.removeAllLayers();}
  else if(year == 1971){i=23;map.removeAllLayers();}
  else if(year == 1972){i=22;map.removeAllLayers();}
  else if(year == 1973){i=21;map.removeAllLayers();}
  else if(year == 1984){i=20;map.removeAllLayers();}
  else if(year == 1986){i=19;map.removeAllLayers();}
  else if(year == 1987){i=18;map.removeAllLayers();}
  else if(year == 1988){i=17;map.removeAllLayers();}
  else if(year == 1989){i=16;map.removeAllLayers();}
  else if(year == 1990){i=15;map.removeAllLayers();}
  else if(year == 1991){i=14;map.removeAllLayers();}
  else if(year == 1992){i=13;map.removeAllLayers();}
  else if(year == 1993){i=12;map.removeAllLayers();}
  else if(year == 1994){i=11;map.removeAllLayers();}
  else if(year == 1995){i=10;map.removeAllLayers();}
  else if(year == 1996){i=9;map.removeAllLayers();}
  else if(year == 1997){i=8;map.removeAllLayers();}
  else if(year == 1998){i=7;map.removeAllLayers();}
  else if(year == 2001){i=6;map.removeAllLayers();}
  else if(year == 2002){i=5;map.removeAllLayers();}
  else if(year == 2003){i=4;map.removeAllLayers();}
  else if(year == 2004){i=3;map.removeAllLayers();}
  else if(year == 2005){i=2;map.removeAllLayers();}
  else if(year == 2006){i=1;map.removeAllLayers();}
  else if(year == 2007){i=0;map.removeAllLayers();}
  
   var imageParameters = new esri.layers.ImageParameters();
   imageParameters.layerIds = ;
   imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
   
   layer = new esri.layers.ArcGISDynamicMapServiceLayer("your server", {
    "imageParameters": imageParameters});
   map.addLayer(layer);
     
   }
            
            // CHANGE BASEMAP mapDiv1 - COMBOBOX
            function changeBasmap(year){
               mapDiv1.removeAllLayers();
  
    if (year == 1904) {i = 44; mapDiv1.removeAllLayers();}
    else if(year == 1906){i = 43; mapDiv1.removeAllLayers();}
    else if(year == 1909){i=42;mapDiv1.removeAllLayers();}
    else if(year == 1910){i=41;mapDiv1.removeAllLayers();}
    else if(year == 1911){i=40;mapDiv1.removeAllLayers();}
    else if(year == 1912){i=39;mapDiv1.removeAllLayers();}
    else if(year == 1913){i=38;mapDiv1.removeAllLayers();}
    else if(year == 1917){i=37;mapDiv1.removeAllLayers();}
    else if(year == 1921){i=36;mapDiv1.removeAllLayers();}
    else if(year == 1929){i=35;mapDiv1.removeAllLayers();}
    else if(year == 1932){i=34;mapDiv1.removeAllLayers();}
    else if(year == 1937){i=33;mapDiv1.removeAllLayers();}
    else if(year == 1938){i=32;mapDiv1.removeAllLayers();}
    else if(year == 1939){i=31;mapDiv1.removeAllLayers();}
    else if(year == 1941){i=30;mapDiv1.removeAllLayers();}
    else if(year == 1944){i=29;mapDiv1.removeAllLayers();}
    else if(year == 1945){i=28;mapDiv1.removeAllLayers();}
    else if(year == 1946){i=27;mapDiv1.removeAllLayers();}
    else if(year == 1947){i=26;mapDiv1.removeAllLayers();}
    else if(year == 1948){i=25;mapDiv1.removeAllLayers();}
    else if(year == 1964){i=24;mapDiv1.removeAllLayers();}
    else if(year == 1971){i=23;mapDiv1.removeAllLayers();}
    else if(year == 1972){i=22;mapDiv1.removeAllLayers();}
    else if(year == 1973){i=21;mapDiv1.removeAllLayers();}
    else if(year == 1984){i=20;mapDiv1.removeAllLayers();}
    else if(year == 1986){i=19;mapDiv1.removeAllLayers();}
    else if(year == 1987){i=18;mapDiv1.removeAllLayers();}
    else if(year == 1988){i=17;mapDiv1.removeAllLayers();}
    else if(year == 1989){i=16;mapDiv1.removeAllLayers();}
    else if(year == 1990){i=15;mapDiv1.removeAllLayers();}
    else if(year == 1991){i=14;mapDiv1.removeAllLayers();}
    else if(year == 1992){i=13;mapDiv1.removeAllLayers();}
    else if(year == 1993){i=12;mapDiv1.removeAllLayers();}
    else if(year == 1994){i=11;mapDiv1.removeAllLayers();}
    else if(year == 1995){i=10;mapDiv1.removeAllLayers();}
    else if(year == 1996){i=9;mapDiv1.removeAllLayers();}
    else if(year == 1997){i=8;mapDiv1.removeAllLayers();}
    else if(year == 1998){i=7;mapDiv1.removeAllLayers();}
    else if(year == 2001){i=6;mapDiv1.removeAllLayers();}
    else if(year == 2002){i=5;mapDiv1.removeAllLayers();}
    else if(year == 2003){i=4;mapDiv1.removeAllLayers();}
    else if(year == 2004){i=3;mapDiv1.removeAllLayers();}
    else if(year == 2005){i=2;mapDiv1.removeAllLayers();}
    else if(year == 2006){i=1;mapDiv1.removeAllLayers();}
    else if(year == 2007){i=0;mapDiv1.removeAllLayers();}
    
     var imageParameters = new esri.layers.ImageParameters();
     imageParameters.layerIds = ;
     imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
     
     layer = new esri.layers.ArcGISDynamicMapServiceLayer("your server", {
      "imageParameters": imageParameters});
     mapDiv1.addLayer(layer);
            }
   
            dojo.addOnLoad(init);
        </script>

Re: need help with zoom pliz

HallbjornViktorsson — Sat, 11 Dec 2021 12:25:46 GMT

</head>
    <body class="tundra" style="font-family:Tahoma; color:darkblue;">
        <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width:100%; height:100%;">
            <div dojotype="dijit.layout.ContentPane" region="top" id="titleDiv" style="margin:5px; border:double silver;"><a href="http://www.lmi.is"><img src="logo_minni.gif" alt="mynd1"/></a> <img id="logomynd" src="efri_toppur_text1.gif" style="float = right;" alt="myd2"/></div>
            <div id="mapDiv" dojotype="dijit.layout.ContentPane" region="left" style="width:49%;">
                 <select id="ovBasemapCombo" style="position:absolute; Left:45%; bottom:1px; z-index:99;">
                         <option  onClick="return changeBasmap1 (1904);">1904</option>
       <option  onClick="return changeBasmap1 (1906);">1906</option>
       <option  onClick="return changeBasmap1 (1909);">1909</option>
       <option  onClick="return changeBasmap1 (1910);">1910</option>
       <option  onClick="return changeBasmap1 (1912);">1912</option>
       <option  onClick="return changeBasmap1 (1913);">1913</option>
       <option  onClick="return changeBasmap1 (1917);">1917</option>
       <option  onClick="return changeBasmap1 (1921);">1921</option>
       <option  onClick="return changeBasmap1 (1929);">1929</option>
       <option  onClick="return changeBasmap1 (1932);">1932</option>
       <option  onClick="return changeBasmap1 (1937);">1937</option>
       <option  onClick="return changeBasmap1 (1938);">1938</option>
       <option  onClick="return changeBasmap1 (1939);">1939</option>
       <option  onClick="return changeBasmap1 (1941);">1941</option>
       <option  onClick="return changeBasmap1 (1944);">1944</option>
       <option  onClick="return changeBasmap1 (1945);">1945</option>
       <option  onClick="return changeBasmap1 (1946);">1946</option>
       <option  onClick="return changeBasmap1 (1947);">1947</option>
       <option  onClick="return changeBasmap1 (1948);">1948</option>
       <option  onClick="return changeBasmap1 (1964);">1964</option>
       <option  onClick="return changeBasmap1 (1971);">1971</option>
       <option  onClick="return changeBasmap1 (1972);">1972</option>
       <option  onClick="return changeBasmap1 (1973);">1973</option>
       <option  onClick="return changeBasmap1 (1984);">1984</option>
       <option  onClick="return changeBasmap1 (1986);">1986</option>
       <option  onClick="return changeBasmap1 (1987);">1987</option>
       <option  onClick="return changeBasmap1 (1988);">1988</option>
       <option  onClick="return changeBasmap1 (1989);">1989</option>
       <option  onClick="return changeBasmap1 (1990);">1990</option>
       <option  onClick="return changeBasmap1 (1991);">1991</option>
       <option  onClick="return changeBasmap1 (1992);">1992</option>
       <option  onClick="return changeBasmap1 (1993);">1993</option>
       <option  onClick="return changeBasmap1 (1994);">1994</option>
       <option  onClick="return changeBasmap1 (1995);">1995</option>
       <option  onClick="return changeBasmap1 (1996);">1996</option>
       <option  onClick="return changeBasmap1 (1997);">1997</option>
       <option  onClick="return changeBasmap1 (1998);">1998</option>
       <option  onClick="return changeBasmap1 (2000);">2000</option>
       <option  onClick="return changeBasmap1 (2001);">2001</option>
       <option  onClick="return changeBasmap1 (2002);">2002</option>
       <option  onClick="return changeBasmap1 (2003);">2003</option>
       <option  onClick="return changeBasmap1 (2004);">2004</option>
       <option  onClick="return changeBasmap1 (2005);">2005</option>
       <option  onClick="return changeBasmap1 (2006);">2006</option>
       <option  onClick="return changeBasmap1 (2007);">2007</option>
                     </select>
                <div id="mapScale" style="background-color:whitesmoke; font-weight:bolder; font-size:smaller; text-align:right; position:absolute; padding:3px; right:30px; bottom:6px; z-index:99;">1:1,154,287</div>
                <div id="mapPosition" style="background-color:whitesmoke; font-weight:bolder; font-size:smaller; position:absolute; padding:3px;left:30px; bottom:6px; z-index:99;"></div>
            </div>            
   <div dojotype="dijit.layout.ContentPane" region="right" style="width:49%;">
                <div id="mapDiv1" dojotype="dijit.layout.ContentPane" region="right" style="height:100%; width:49%;!important;">
                    <select id="ovBasemapCombo" style="position:absolute; Right:45%; bottom:1px; z-index:99;">
                        <option  onClick="return changeBasmap(2007);">2007</option>
      <option  onClick="return changeBasmap(2006);">2006</option>
      <option  onClick="return changeBasmap(2005);">2005</option>
      <option  onClick="return changeBasmap(2004);">2004</option>
      <option  onClick="return changeBasmap(2003);">2003</option>
      <option  onClick="return changeBasmap(2002);">2002</option>
      <option  onClick="return changeBasmap(2001);">2001</option>
      <option  onClick="return changeBasmap(2000);">2000</option>
      <option  onClick="return changeBasmap(1998);">1998</option>
      <option  onClick="return changeBasmap(1997);">1997</option>
      <option  onClick="return changeBasmap(1996);">1996</option>
      <option  onClick="return changeBasmap(1995);">1995</option>
      <option  onClick="return changeBasmap(1994);">1994</option>
      <option  onClick="return changeBasmap(1993);">1993</option>
      <option  onClick="return changeBasmap(1992);">1992</option>
      <option  onClick="return changeBasmap(1991);">1991</option>
      <option  onClick="return changeBasmap(1990);">1990</option>
      <option  onClick="return changeBasmap(1989);">1989</option>
      <option  onClick="return changeBasmap(1988);">1988</option>
      <option  onClick="return changeBasmap(1987);">1987</option>
      <option  onClick="return changeBasmap(1986);">1986</option>
      <option  onClick="return changeBasmap(1984);">1984</option>
      <option  onClick="return changeBasmap(1973);">1973</option>
      <option  onClick="return changeBasmap(1972);">1972</option>
      <option  onClick="return changeBasmap(1971);">1971</option>
      <option  onClick="return changeBasmap(1964);">1964</option>
      <option  onClick="return changeBasmap(1948);">1948</option>
      <option  onClick="return changeBasmap(1947);">1947</option>
      <option  onClick="return changeBasmap(1946);">1946</option>
      <option  onClick="return changeBasmap(1945);">1945</option>
      <option  onClick="return changeBasmap(1944);">1944</option>
      <option  onClick="return changeBasmap(1941);">1941</option>
      <option  onClick="return changeBasmap(1939);">1939</option>
      <option  onClick="return changeBasmap(1938);">1938</option>
      <option  onClick="return changeBasmap(1937);">1937</option>
      <option  onClick="return changeBasmap(1932);">1932</option>
      <option  onClick="return changeBasmap(1929);">1929</option>
      <option  onClick="return changeBasmap(1921);">1921</option>
      <option  onClick="return changeBasmap(1917);">1917</option>
      <option  onClick="return changeBasmap(1913);">1913</option>
      <option  onClick="return changeBasmap(1912);">1912</option>
      <option  onClick="return changeBasmap(1910);">1910</option>
      <option  onClick="return changeBasmap(1909);">1909</option>
      <option  onClick="return changeBasmap(1906);">1906</option>
      <option  onClick="return changeBasmap(1904);">1904</option>
                    </select>
                </div>
            </div> 
      
        </div>
    </body>
</html>

I removed my services and replaced it with your server, also the extend for yoru map you must put in with the wkid. if you want to be albe to run it that is 🙂 like I sad before any help you can give me would be RELAY RELAY appreciated.

Thanks in Advance

Best Regards
Halli

ps. Sorry that the code is in 3 parts but so I would be able to show it all to you I had to do that cause I can only post 10.000 leters at a time.