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

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>