HOW TO
This document explains how to add zoom and pan functionality to a map created by Map Image Web Service. Code examples are given in C#.NET, VB.NET, Java, and ColdFusion.
The following code demonstrates how to add zoom functionality by navigating through different zoom levels from an initial envelope (extent). In the example, 'a' and 'b' are the values needed to add or subtract to the current envelope to create the new zoomed view.
}
C#.NET
Code:
private static Envelope Zoom(int currentzoomlevel,int newzoomlevel, Envelope myenv)
{
double a,b;
int zoomfactor=6;
//Figure out how many levels we need to zoom in/out
int iterate=newzoomlevel-currentzoomlevel;
if (iterate>0)
{
//function for zooming in
for (int i=0; i<iterate; i++)
{
b=((myenv.maxY-myenv.minY)*(1-zoomfactor))/(-2*zoomfactor);
a=((myenv.maxX-myenv.minX)*(1-zoomfactor))/(-2*zoomfactor);
myenv.maxX =myenv.maxX-a;
myenv.minX =myenv.minX+a;
myenv.minY=myenv.minY+b;
myenv.maxY =myenv.maxY-b;
}
}
else
{
//This is the reverse function for zooming out
for (int i=0; i<(iterate*-1); i++)
{
a=((zoomfactor-1)*(myenv.maxX-myenv.minX))/2;
b=((zoomfactor-1)*(myenv.maxY-myenv.minY))/2;
myenv.maxX =myenv.maxX+a;
myenv.minX =myenv.minX-a;
myenv.minY=myenv.minY-b;
myenv.maxY =myenv.maxY+b;
}
}
return myenv;
}
Code:
Private Function Pan(ByVal mypoint As Point, ByVal myenvelope As Envelope) As Envelope
Dim xc, yc As Double
'Calculate center
xc = ((myenvelope.maxx - myenvelope.minx) / 2) + myenvelope.minx
yc = ((myenvelope.maxy - myenvelope.miny) / 2) + myenvelope.miny
'new envelope
myenvelope.minx = myenvelope.minx + (mypoint.X - xc)
myenvelope.maxx = myenvelope.maxx + (mypoint.X - xc)
myenvelope.miny = myenvelope.miny + (mypoint.Y - yc)
myenvelope.maxy = myenvelope.maxy + (mypoint.Y - yc)
Return myenvelope
End Function
Code:
public static Envelope Zoom(int currentzoomlevel,int newzoomlevel, Envelope mEnvelope){
double a,b;
int zoomfactor=6;
//Figure out how many levels we need to zoom in/out
int iterate=newzoomlevel-currentzoomlevel;
if (iterate>0) {
for (int i=0; i<iterate; i++) {
a=((mEnvelope.getMaxX()-mEnvelope.getMinX())*(1-zoomfactor))/(-2*zoomfactor);
b=((mEnvelope.getMaxY()-mEnvelope.getMinY())*(1-zoomfactor))/(-2*zoomfactor);
mEnvelope.setMaxX(mEnvelope.getMaxX()-a);
mEnvelope.setMinX(mEnvelope.getMinX()+a);
mEnvelope.setMinY(mEnvelope.getMinY()+b);
mEnvelope.setMaxY(mEnvelope.getMaxY()-b);
}
} else {
//This is the reverse function for zooming out
for (int i=0; i<(iterate*-1); i++) {
a=((zoomfactor-1)*(mEnvelope.getMaxX()-mEnvelope.getMinX()))/2;
b=((zoomfactor-1)*(mEnvelope.getMaxY()-mEnvelope.getMinY()))/2;
mEnvelope.setMaxX(mEnvelope.getMaxX()+a);
mEnvelope.setMinX(mEnvelope.getMinX()-a);
mEnvelope.setMinY(mEnvelope.getMinY()-b);
mEnvelope.setMaxY(mEnvelope.getMaxY()+b);
}
}
return mEnvelope;
}
Code:
<cfscript>
function Zoom(currentZoomLevel, newZoomLevel, myEnv) {
var a = 0 ;
var b =0 ;
var zoomfactor=6;
//Figure out how many levels we need to zoom in/out
var iterate=newZoomLevel-currentZoomLevel;
if (iterate GT 0)
{
//function for zooming in
for (i = 0; i LT iterate; i = i+1 )
{
b=((myEnv.maxY-myEnv.minY)*(1-zoomfactor))/(-2*zoomfactor);
a=((myEnv.maxX-myEnv.minX)*(1-zoomfactor))/(-2*zoomfactor);
myEnv.maxX =myEnv.maxX-a;
myEnv.minX =myEnv.minX+a;
myEnv.minY=myEnv.minY+b;
myEnv.maxY =myEnv.maxY-b;
}
} else {
//This is the reverse function for zooming out
for (i=0; i lt (iterate*-1); i= i+1)
{
a=((zoomfactor-1)*(myEnv.maxX-myEnv.minX))/2;
b=((zoomfactor-1)*(myEnv.maxY-myEnv.minY))/2;
myEnv.maxX =myEnv.maxX+a;
myEnv.minX =myEnv.minX-a;
myEnv.minY=myEnv.minY-b;
myEnv.maxY =myEnv.maxY+b;
}
}
return myEnv;
}
</cfscript>
The following code demonstrates how to add pan functionality by calculating the center point and shifting it based on a map click. This example utilizes the Map Image Web Service methods, convertPixelCoordToMapCoord and convertMapCoordToPixelCoord.
Note:
In an HTML page, when a map is displayed using an <IMAGE> tag and a user clicks the map, the browser submits the clicked location in pixel coordinates. For example, on a map of 400*400, if a user clicks on the center location, the browser submits x=200 and y=200. Use the method convertPixelCoordsToMapCoords to convert image pixel coordinates to x,y coordinates.
Code:
private static Envelope Pan(Point mypoint, Envelope myEnvelope)
{
double xc,yc;
//Calculate center
xc=((myEnvelope.maxX-myEnvelope.minX)/2)+myEnvelope.minX;
yc=((myEnvelope.maxY-myEnvelope.minY)/2)+myEnvelope.minY;
//new Envelope
myEnvelope.minX=myEnvelope.minX+(mypoint.x-xc);
myEnvelope.maxX=myEnvelope.maxX+(mypoint.x-xc);
myEnvelope.minY=myEnvelope.minY+(mypoint.y-yc);
myEnvelope.maxY=myEnvelope.maxY+(mypoint.y-yc);
return myEnvelope;
}
Code:
Private Function Zoom(ByVal currentzoomlevel As Integer, ByVal newzoomlevel As Integer, ByVal myenv As Envelope) As Envelope
Dim a, b As Double
Dim zoomfactor = 6
'Figure out how many levels we need to zoom in/out
Dim iterate = newzoomlevel - currentzoomlevel
Dim i As Integer
If (iterate > 0) Then
'function for zooming in
For i = 1 To iterate
b = ((myenv.maxy - myenv.miny) * (1 - zoomfactor)) / (-2 * zoomfactor)
a = ((myenv.maxx - myenv.minx) * (1 - zoomfactor)) / (-2 * zoomfactor)
myenv.maxx = myenv.maxx - a
myenv.minx = myenv.minx + a
myenv.miny = myenv.miny + b
myenv.maxy = myenv.maxy - b
Next i
Else
'This is the reverse function for zooming out
For i = 1 To (iterate * -1)
a = ((zoomfactor - 1) * (myenv.maxx - myenv.minx)) / 2
b = ((zoomfactor - 1) * (myenv.maxy - myenv.miny)) / 2
myenv.maxx = myenv.maxx + a
myenv.minx = myenv.minx - a
myenv.miny = myenv.miny - b
myenv.maxy = myenv.maxy + b
Next i
End If
Return myenv
End Function
End Class
Code:
public static Envelope Pan(Point myPoint, Envelope mEnvelope) {
double xc,yc;
//Calculate center
xc=((mEnvelope.getMaxX()-mEnvelope.getMinX())/2)+mEnvelope.getMinX();
yc=((mEnvelope.getMaxY()-mEnvelope.getMinY())/2)+mEnvelope.getMinY();
//new envelope
mEnvelope.setMinX(mEnvelope.getMinX()+(myPoint.getX()-xc));
mEnvelope.setMaxX(mEnvelope.getMaxX()+(myPoint.getX()-xc));
mEnvelope.setMinY(mEnvelope.getMinY()+(myPoint.getY()-yc));
mEnvelope.setMaxY(mEnvelope.getMaxY()+(myPoint.getY()-yc));
return mEnvelope;
}
}
Code:
<cfscript>
function Pan(myPoint, myEnvelope) {
//Calculate center
var xc=((myEnvelope.maxX-myEnvelope.minX)/2)+myEnvelope.minX;
var yc=((myEnvelope.maxY-myEnvelope.minY)/2)+myEnvelope.minY;
//new Envelope
myEnvelope.minX=myEnvelope.minX+(myPoint.X-xc);
myEnvelope.maxX=myEnvelope.maxX+(myPoint.X-xc);
myEnvelope.minY=myEnvelope.minY+(myPoint.Y-yc);
myEnvelope.maxY=myEnvelope.maxY+(myPoint.Y-yc);
return myEnvelope;
}
</cfscript>
Article ID:000005966
Get help from ArcGIS experts
Download the Esri Support App