Using custom zoom slider with GMap
Updated: May 18, 2007
Views: 11412
Description: In this tutorial we will show you how to use a custom slider to control the map zoom level. You can use any custom made slider, but we will use UISlider that is available in the Macromedia Flash Component Library.
| Download source files |
Place the GMap Flash Component on stage and give it an instance name “my_map”.
Place the UISlider component on stage and give it an instance name “my_scroll”.
| |
First, we need to setup the min, and max values for the slider, add an event listener to catch scrolling event and disable the scroll until GMap has been loaded:
my_scroll.setScrollProperties(1,0,17);
my_scroll.addEventListener("scroll", this);
my_scroll.enabled = false;
my_scroll.addEventListener("scroll", this);
my_scroll.enabled = false;
Now, let’s catch the “scroll” event and change the map’s zoom level according to the scroll position. Note that we call the cancelDragging() function, this will prevent map from dragging if our control is placed on top of the map:
function scroll(evt:Object)
{
my_map.zoom = evt.target.scrollPosition;
my_map.cancelDragging();
}
{
my_map.zoom = evt.target.scrollPosition;
my_map.cancelDragging();
}
Lastly, we need to catch the MAP_READY event to enable the scroll and set the current zoom level:
my_map.addEventListener("MAP_READY", this);
function MAP_READY(evt:Object)
{
my_scroll.enabled = true;
my_scroll.scrollPosition = evt.target.zoom;
}
function MAP_READY(evt:Object)
{
my_scroll.enabled = true;
my_scroll.scrollPosition = evt.target.zoom;
}
The scroll is working now, but when we zoom the map with the mouse wheel, the slider remains in the same position. To fix that, we catch the MAP_ZOOM_CHANGED event and update the slider’s position:
my_map.addEventListener("MAP_ZOOM_CHANGED", this);
function MAP_ZOOM_CHANGED(evt:Object)
{
my_scroll.scrollPosition = evt.newZoom;
}
function MAP_ZOOM_CHANGED(evt:Object)
{
my_scroll.scrollPosition = evt.newZoom;
}
