Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- need help with zoom pliz
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
need help with zoom pliz
Subscribe
1201
4
07-21-2010 06:33 AM
07-21-2010
06:33 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
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.
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.
4 Replies
07-21-2010
08:00 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
Yes, it's possible. This should get you started: http://resources.esri.com/arcgisserver/apis/javascript/arcgis/index.cfm?fa=codeGalleryDetails&script...
To sync your maps, listen to the onExtentChange event.
To sync your maps, listen to the onExtentChange event.
07-27-2010
02:44 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
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.
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);
}
07-27-2010
02:46 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
// 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>
07-27-2010
02:47 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
</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.
