Mad Irish . net

Graduated Zoom Bar for ESRI Default Viewer

30 November -0001
by: Justin
March 18, 2003

The challenge that brought about this particular dilemma was to create a graduated zoom bar to zoom in and out on a map a-la Map Quest. This was to be implemented along with the ESRI default viewer that ships with the software. The idea is to have seven concentric circles, the largest one representing a full map view, and the smallest representing a tightly zoomed in view. In the end the number of circles (or levels of zooming) became irrelevant, and this code still requires a mechanism to track what level to which the user is still zoomed in. The application design includes the retention of the default zoom in rubber band functionality so the zoom bar does not predefine all the possible extents of zooming that the user can experience. The only piece of the code that will be necessary to create is the circle representing the zooming. In this example the circle is 40 px by 40 px, but you can easily graduate the circle by changing the img tag to represent different sides. The six levels of extent (plus one level of full extent) can easily be changed as well. ESRI defines a map extent in terms of left, right, top and bottom coordinates radiating from a center of zero. I realized that the left and right coordinates on the full extent of our applications map were -180 and 180, meaning that a difference of 360 between the two was the full extent. The idea of the javascript functionality is to calculate the difference between the right and the left extents, then calculate the difference between the top and the bottom. By reducing the left-right difference to one we can find a proper ration of horizontal to vertical for display. Once this ratio is derived you can change the left-right difference to an arbitrary amount, centering on the original map center, then apply the ratio to get the new top-bottom coordinates from the same center point. Note that the table below is included in the viewer itself and the javascript function is included in the aimsNavigation.js file from the out-of-the-box viewer. Drop me a mail if you have any questions.

HTML:

<table align="center" cellpadding="0" cellspacing="2">
<tr>
	<td align="center" valign="center" bgcolor="black"><font style="color:#FA4602;font-family:verdana,arial;font-size:14px;font-weight:bold;"> Zoom Out </font></td>
	<td align="center" valign="center"><a href="#"><img src="zoomdot.gif" border="0" width="40" height="40" onmousedown="parent.MapFrame.clickFunction('fullextent');"></a></td>	
	<td align="center" valign="center"><a href="#"><img src="zoomdot.gif" border="0" width="40" height="40" onClick="top.MapFrame.specialZoom(1)"></a></td>
	<td align="center" valign="center"><a href="#"><img src="zoomdot.gif" border="0" width="40" height="40" onClick="top.MapFrame.specialZoom(2)"></a></td>
	<td align="center" valign="center"><a href="#"><img src="zoomdot.gif" border="0" width="40" height="40" onClick="top.MapFrame.specialZoom(3)"></a></td>
	<td align="center" valign="center"><a href="#"><img src="zoomdot.gif" border="0" width="40" height="40" onClick="top.MapFrame.specialZoom(4)"></a></td>
	<td align="center" valign="center"><a href="#"><img src="zoomdot.gif" border="0" width="40" height="40" onClick="top.MapFrame.specialZoom(5)"></a></td>
	<td align="center" valign="center"><a href="#"><img src="zoomdot.gif" border="0" width="40" height="40" onClick="top.MapFrame.specialZoom(6)"></a></td>
	<td align="center" valign="center" bgcolor="black"><font style="color:#FA4602;font-family:verdana,arial;font-size:14px;font-weight:bold;"> Zoom In </font></td>
</tr>
</table>

JAVASCRIPT:


/********************************************************************************
		JUSTIN ADDED CUSTOM ZOOM FOR BAR ON BOTTOM
********************************************************************************/
function specialZoom(jVar) {
	
	var zoomLevel = 0;
	switch (jVar) {
		case 1:
			zoomLevel = 90;
			break;
		case 2:
			zoomLevel = 45;
			break;
		case 3:
			zoomLevel = 30;
			break;
		case 4:
			zoomLevel = 15;
			break;
		case 5:
			zoomLevel = 7;
			break;
		case 6:
			zoomLevel = 2;
			break;
	}
			
	//get the map top, bottom, left and right
	var jLeft = top.MapFrame.eLeft;
	var jRight = top.MapFrame.eRight;
	var jTop = top.MapFrame.eTop;
	var jBottom = top.MapFrame.eBottom;
	//find difference between left and right
	var jHorizontalDiff = jRight - jLeft;	
	//subtract difference from the right (or add it to the left)
	// to find the horizontal center point
	var jHorizontalCenter = jRight - (jHorizontalDiff/2);
	///find difference between left and right
	var jVerticalDiff = jTop - jBottom;	
	//subtract difference from the top (or add it to the bottom) 
	//to find the vertical center point
	var jVerticalCenter = jTop - (jVerticalDiff/2);
	
	//calculate the aspect ratio, assume a scale of 1 for the 
	//horizontal, get the ratio for the vertical
	var jRatio = jVerticalDiff/jHorizontalDiff;
	
	//adjust the left and right to new scale (90 different)
	jLeft = jHorizontalCenter - zoomLevel;
	jRight = jHorizontalCenter + zoomLevel;
	
	//apply ratio to top and bottom
	jTop = jVerticalCenter + (zoomLevel * jRatio);
	jBottom = jVerticalCenter - (zoomLevel * jRatio);
	
	eLeft = jLeft;
	eRight = jRight;
	eBottom = jBottom;
	eTop = jTop;
	
	//sendMapXML() is the request for the new map for display
	sendMapXML();
}

Tags