Implementing a Custom Zoom Bar with Map Suite

case "ClickLevel13":

Map1.CurrentScale = GetScaleFromZoomlevel(Map1.Layers[0].ZoomLevel13);

break;

case "ClickLevel14":

Map1.CurrentScale = GetScaleFromZoomlevel(Map1.Layers[0].ZoomLevel14);

break;

case "ClickLevel15":

Map1.CurrentScale = GetScaleFromZoomlevel(Map1.Layers[0].ZoomLevel15);

break;

case "ClickLevel16":

Map1.CurrentScale = GetScaleFromZoomlevel(Map1.Layers[0].ZoomLevel16);

break;

case "ClickLevel17":

Map1.CurrentScale = GetScaleFromZoomlevel(Map1.Layers[0].ZoomLevel17);

break;

case "ClickLevel18":

Map1.CurrentScale = (Double)Session["FullScale"];

break;

case "ZoomIn":

Map1.ZoomIn(20);

break;

case "ZoomOut":

Map1.ZoomOut(20);

break;

case "TrackZoom":

Map1.Mode = Map.ModeType.TrackZoomIn;

break;

case "PreviousExtent":

Map1.GetPreviousExtent();

break;

case "ToggleExtent":

Map1.ToggleMapExtents();

break;

case "FullExtent":

Map1.CurrentExtent = Map1.Layers[0].Extent;

break;

case "PanLeft":

Map1.Pan(PanDirection.Left, 20);

break;

case "PanRight":

Map1.Pan(PanDirection.Right, 20);

break;

case "PanUp":

Map1.Pan(PanDirection.Up, 20);

break;

case "PanDown":

Map1.Pan(PanDirection.Down, 20);

break;

case "PanNorthEast":

Map1.Pan(45, 20);

break;

case "PanNorthWest":

Map1.Pan(315, 20);

break;

case "PanSouthEast":

Map1.Pan(135, 20);

break;

case "PanSouthWest":

Map1.Pan(225, 20);

break;

// Click zoom level button in zoom bar

default:

break;

}

// Sent value back and we will deal with it in client by "CustomCallback" function

Map1.AjaxReturnArgs = "Level" + GetLevelNumber(Map1.CurrentScale).ToString();

}

As you can see from the code above, for each click level we are calling a function named GetScaleFromZoomLevel and passing in the associated zoom level. This function returns the new zoom level by calculating the midpoint of the zoom level's scale. Once the new scale is calculated, all that remains is to set this scale to the Map's Current Scale property. The code for the GetScaleFromZoomLevel function that returns the zoom level's midpoint is shown below for your reference.

private double GetScaleFromZoomlevel(PresetZoomLevel presetZoomLevel)

{

return (presetZoomLevel.UpperExtent + resetZoomLevel.LowerExtent) / 2;

}

Now the only thing left to do is return the zoom level that we are currently at, so that the zoom bar buttons can be updated accordingly. This is accomplished by utilizing the GetLevelNumber function and the Map's AjaxReturnArgs property. In case you're not familiar with the AjaxReturnArgs property, it s a mechanism for passing data back to the client code. At the end of the Map1_AjaxPostback event handler you will see the following line of code, which sets the AjaxReturnArgs property to the Zoom Level we are currently displaying:

Map1.AjaxReturnArgs = "Level" + GetLevelNumber(Map1.CurrentScale).ToString();

In case you were curious what the GetLevelNumber function does, it takes the CurrentScale of the map, compares it against all of the zoom levels and returns the current zoom level. The code for this function is provided below for your reference.

GetLevelNumber Function Code:

public int GetLevelNumber(double scale)

{

int result;

if (scale < 0)

{

throw new Exception("The Width of your Map should be more than 0");

}

else if (scale < Map1.Layers[0].ZoomLevel01.UpperExtent)

{

result = 1;

}

else if (scale < Map1.Layers[0].ZoomLevel02.UpperExtent)

{

result = 2;

}

else if (scale < Map1.Layers[0].ZoomLevel03.UpperExtent)

{

result = 3;

}

else if (scale < Map1.Layers[0].ZoomLevel04.UpperExtent)

{

result = 4;

}

else if (scale < Map1.Layers[0].ZoomLevel05.UpperExtent)

{

result = 5;

}

else if (scale < Map1.Layers[0].ZoomLevel06.UpperExtent)

{

result = 6;

}

else if (scale < Map1.Layers[0].ZoomLevel07.UpperExtent)

{

result = 7;

}

else if (scale < Map1.Layers[0].ZoomLevel08.UpperExtent)

{

result = 8;

}

else if (scale < Map1.Layers[0].ZoomLevel09.UpperExtent)

{

result = 9;

}

else if (scale < Map1.Layers[0].ZoomLevel10.UpperExtent)

{

result = 10;

}

else if (scale < Map1.Layers[0].ZoomLevel11.UpperExtent)

{

result = 11;

}

else if (scale < Map1.Layers[0].ZoomLevel12.UpperExtent)

{

result = 12;

}

else if (scale < Map1.Layers[0].ZoomLevel13.UpperExtent)

{

result = 13;

}

else if (scale < Map1.Layers[0].ZoomLevel14.UpperExtent)

{

result = 14;

}

else if (scale < Map1.Layers[0].ZoomLevel15.UpperExtent)

{

result = 15;

}

else if (scale < Map1.Layers[0].ZoomLevel16.UpperExtent)

{

result = 16;

}

else if (scale < Map1.Layers[0].ZoomLevel17.UpperExtent)

{

result = 17;

}

else

{

result = 18;

}

return result;

}

Client Side JavaScript Code

Now that the server side code is completed and the map is zoomed into the proper level, the next step is to update the zoom bar button images to identify which zoom level is currently being displayed on the map. To accomplish this, we will need to implement the CustomCallback JavaScript function on the client side. This will allow us to analyze the return arguments from the server side code and update each zoom bar button image accordingly. For an example on how to implement this, please see the code below:

CustomCallback Javascript Code:

<!--Get value from server and set the status of zoom button-->

<script type="text/javascript">

function CustomCallback(ajaxReturnArgs)

{

if(ajaxReturnArgs != '')

{

var ImageButton;

ImageButton = document.getElementById('Level1');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level2');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level3');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level4');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level5');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level6');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level7');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level8');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level9');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level10');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level11');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level12');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level13');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level14');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level15');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level16');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level17');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById('Level18');

ImageButton.src='./images/zoombar_off.png';

ImageButton = document.getElementById(ajaxReturnArgs);

ImageButton.src='./images/zoombar_on.png';

}

}

</script>

Once you have this JavaScript function implemented, the appropriate zoom bar button should be highlighted in green, like the "Country" zoom bar button is in the screen shot below.

Summary

In conclusion, you now can see how to build your own custom zoom bar to meet your specific needs. Having this flexibility allows you to control the zoom levels, zoom bar location and overall look of the zoom bar implementation. This can be very important when making the mapping screen easy to use for end users. Below, I have listed several links where you can download the full source code and project to get more familiar with the sample application described in this article. Finally, if you have any questions or suggestions please feel to post comments on the ThinkGeo Blog or Discussion Forums, as these are both great ways for us to hear from the Map Suite community.

Downloads & Online Demo

Zoom Bar Online Demo

Project and Source Code for Map Suite Zoom Bar Example

Map Suite Web ASP.NET Control (Registration Required)

Note: You will need to download and install the Map Suite Web Edition in order to run the example in this article.

Have Questions?

Do you have questions or comments about this article? Feel free post your questions on the Map Suite Discussion Forums or leave feedback at the ThinkGeo Blog.

Additional Resources

Map Suite QuickStart Guides

Map Suite API Documentation

Map Suite FAQs

About the Author

Clint Batman is co-founder and President of ThinkGeo, a software company specializing in geospatial software with an emphasis on software development tools and GPS tracking solutions.