English

How To: Add zoom and pan functionality to your Map Image Web Service map

Summary

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.

Procedure

One way to add zoom functionality to your map is to create a zoom scale from 0-10, where zero is the most zoomed-out view and ten is the most zoomed-in view for a particular map extent. In this scenario, you are drawing a new extent with the same center point.
To add pan functionality to your map, you can calculate the current center point and shift this point to the new center as defined by a map click point.

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;
}


VB.NET

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


Java

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;
}


ColdFusion

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.


C#.NET

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;
}


VB.NET

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


Java

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;

}
}


ColdFusion

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>