Adding Pan and Zoom Functionality


Objective: In this lesson, you will learn how to add panning and zooming functionality to your application.

 

Panning and zooming functionality is built into the Map control. Also, AspMap provides the MapToolButton control that allows you to automatically select the current MapTool of the Map.

 

1. Zoom In. 

Add a MapToolButton control above the Map control on the form and call it zoomInTool.  Change the Map property to Map1, the MapTool property to ZoomIn, the ImageUrl property to "tools/zoomin.gif".

 

2. Zoom Out.

Add a MapToolButton control above the Map control on the form and call it zoomOutTool. Change the Map property to Map1, MapTool property to ZoomOut, the ImageUrl property to "tools/zoomout.gif".

 

3. Pan.

Add a MapToolButton control above the Map control on the form and call it panTool. Change the Map property to Map1, the MapTool property to Pan, the ImageUrl property to "tools/pan.gif".

 

4. Zoom Full.

Add an ImageButton control above the Map control on the form and call it zoomFull.  Change its ImageUrl property to "tools/zoomfull.gif". Add the following code to the ImageButton control's Click event:

Private Sub zoomFull_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles zoomFull.Click
        Map1.ZoomFull()
End Sub

5. Compile and run the application, your map should look similar to the image below. You may use the mouse scroll wheel to zoom in and out the map, or pinch zoom the map if the application is running on a mobile device (Android / iOS / Windows Phone).

 

 

 

© 2018 VDS Technologies
Converted from CHM to HTML with chm2web Standard 2.85 (unicode)