UMap Core: Methods
Updated: Feb 13, 2008
Views: 19168
Description: This tutorial will show you to use core UMap methods to control the UMap.
The Completed Project
Complete Code
Setting up the UMap
To begin this tutorial make sure that you have successfully installed the Umap component and dragged an instance onto the stage. Make sure that you give the component an instance name of umap.
Overview of this Tutorial
This tutorial is an example of how you can create custom ways to control the UMap by using some of the core UMap methods. For more methods beyond those covered in this tutorial take a look at the API Documentation in the com.afcomponents.umap.core.UMap class. For this tutorial, we will create our custom application with buttons that when they are clicked will call functions that will use core methods to control our UMap in things like position, zoom, map type, and opening an info window.
Setting Up Buttons
We are using a series of buttons in this tutorial. You could create your own buttons if you desire but we just used the button component (Window > Components > UI Interface). We dragged these on the stage and gave them an instance name. Then to make these buttons active or do something we create some ActionScript for them on our frame in the actions layer. This is a general example:
Use A Method to Control Position
Our first buttons are going to pan back and forth between locations. In our umap core: properties tutorial, we learned how set some panning properties, so we will incorporate those by setting our speed and that we want it to animate the pan. In this tutorial, we will call the pan to method so we can see our pan in action. The pan to method requires a parameter of LatLng position otherwise it would pan to 0,0 so this is why include the new LatLng(Number, Number). Alternatively, you could create a LatLng object and pass this as the parameter.
Use Methods to Control Zoom
The second buttons that we are creating are to zoom in and out of the map. We covered briefly the different ways to zoom in our basic Umap properties tutorial. Here will use the methods zoomIn and ZoomOut and use the default parameter that will zoom to the next zoom level.
Use Methods to Control Info Window
Our next buttons, will open a basic info window. We covered a little more in depth about info windows in our Getting Started: Adding Info Window to UMap. However this time, we don't want our info window to show on load but only at a certain time when our button is clicked. We also want a button that closes our info window.
Use a Method to Control Map Type
Lastly, we want to switch the map type at certain times and not just on load so in this case we use buttons to switch back forth between types of maps using the setMapType method.
More Methods
The UMap has a long list of methods that you can use in your aplications, if you would like to take a look all the methods please see the API Documentation in the com.afcomponents.umap.core.UMap class.
Complete Code
//panning
import com.afcomponents.umap.types.LatLng;
umap.setCenter(new LatLng (52.373812,4.890951),5);
function goLondon(event:MouseEvent) {
umap.setCenter(new LatLng (51.500152,-0.126236));
}
btnGoLondon.addEventListener(MouseEvent.CLICK, goLondon);
function goBerlin(event:MouseEvent) {
umap.setCenter(new LatLng (52.52348,13.411494));
}
btnGoBerlin.addEventListener(MouseEvent.CLICK, goBerlin);
//zoom
function zoomIn (event:MouseEvent) {
umap.zoomIn()
}
btnZoomIn.addEventListener(MouseEvent.CLICK, zoomIn);
function zoomOut (event:MouseEvent) {
umap.zoomOut()
}
btnZoomOut.addEventListener(MouseEvent.CLICK, zoomOut);
//info
function openInfo (event:MouseEvent) {
umap.openInfoWindow({title:"My InfoWindow", position: umap.getCenter()});
}
btnOpenInfo.addEventListener(MouseEvent.CLICK, openInfo);
function closeInfo (event:MouseEvent) {
umap.closeInfoWindow();
}
btnCloseInfo.addEventListener(MouseEvent.CLICK, closeInfo);
//maptype
function typeMap (event:MouseEvent) {
umap.setMapType("road");
}
btnTypeMap.addEventListener(MouseEvent.CLICK, typeMap);
function typeSatellite (event:MouseEvent) {
umap.setMapType("aerial");
}
btnTypeSatellite.addEventListener(MouseEvent.CLICK, typeSatellite);
import com.afcomponents.umap.types.LatLng;
umap.setCenter(new LatLng (52.373812,4.890951),5);
function goLondon(event:MouseEvent) {
umap.setCenter(new LatLng (51.500152,-0.126236));
}
btnGoLondon.addEventListener(MouseEvent.CLICK, goLondon);
function goBerlin(event:MouseEvent) {
umap.setCenter(new LatLng (52.52348,13.411494));
}
btnGoBerlin.addEventListener(MouseEvent.CLICK, goBerlin);
//zoom
function zoomIn (event:MouseEvent) {
umap.zoomIn()
}
btnZoomIn.addEventListener(MouseEvent.CLICK, zoomIn);
function zoomOut (event:MouseEvent) {
umap.zoomOut()
}
btnZoomOut.addEventListener(MouseEvent.CLICK, zoomOut);
//info
function openInfo (event:MouseEvent) {
umap.openInfoWindow({title:"My InfoWindow", position: umap.getCenter()});
}
btnOpenInfo.addEventListener(MouseEvent.CLICK, openInfo);
function closeInfo (event:MouseEvent) {
umap.closeInfoWindow();
}
btnCloseInfo.addEventListener(MouseEvent.CLICK, closeInfo);
//maptype
function typeMap (event:MouseEvent) {
umap.setMapType("road");
}
btnTypeMap.addEventListener(MouseEvent.CLICK, typeMap);
function typeSatellite (event:MouseEvent) {
umap.setMapType("aerial");
}
btnTypeSatellite.addEventListener(MouseEvent.CLICK, typeSatellite);
Setting up the UMap
To begin this tutorial make sure that you have successfully installed the Umap component and dragged an instance onto the stage. Make sure that you give the component an instance name of umap.
Overview of this Tutorial
This tutorial is an example of how you can create custom ways to control the UMap by using some of the core UMap methods. For more methods beyond those covered in this tutorial take a look at the API Documentation in the com.afcomponents.umap.core.UMap class. For this tutorial, we will create our custom application with buttons that when they are clicked will call functions that will use core methods to control our UMap in things like position, zoom, map type, and opening an info window.
Setting Up Buttons
We are using a series of buttons in this tutorial. You could create your own buttons if you desire but we just used the button component (Window > Components > UI Interface). We dragged these on the stage and gave them an instance name. Then to make these buttons active or do something we create some ActionScript for them on our frame in the actions layer. This is a general example:
function myFunction (event:MouseEvent) {
//what this button will do.
}
myBtnInstanceName.addEventListener(MouseEvent.CLICK, myFunction);
//what this button will do.
}
myBtnInstanceName.addEventListener(MouseEvent.CLICK, myFunction);
Use A Method to Control Position
Our first buttons are going to pan back and forth between locations. In our umap core: properties tutorial, we learned how set some panning properties, so we will incorporate those by setting our speed and that we want it to animate the pan. In this tutorial, we will call the pan to method so we can see our pan in action. The pan to method requires a parameter of LatLng position otherwise it would pan to 0,0 so this is why include the new LatLng(Number, Number). Alternatively, you could create a LatLng object and pass this as the parameter.
import com.afcomponents.umap.types.LatLng;
umap.setCenter(new LatLng (52.373812,4.890951),5);
function goLondon(event:MouseEvent) {
umap.setCenter(new LatLng (51.500152,-0.126236));
}
btnGoLondon.addEventListener(MouseEvent.CLICK, goLondon);
function goBerlin(event:MouseEvent) {
umap.setCenter(new LatLng (52.52348,13.411494));
}
btnGoBerlin.addEventListener(MouseEvent.CLICK, goBerlin);
umap.setCenter(new LatLng (52.373812,4.890951),5);
function goLondon(event:MouseEvent) {
umap.setCenter(new LatLng (51.500152,-0.126236));
}
btnGoLondon.addEventListener(MouseEvent.CLICK, goLondon);
function goBerlin(event:MouseEvent) {
umap.setCenter(new LatLng (52.52348,13.411494));
}
btnGoBerlin.addEventListener(MouseEvent.CLICK, goBerlin);
Use Methods to Control Zoom
The second buttons that we are creating are to zoom in and out of the map. We covered briefly the different ways to zoom in our basic Umap properties tutorial. Here will use the methods zoomIn and ZoomOut and use the default parameter that will zoom to the next zoom level.
function zoomIn (event:MouseEvent) {
umap.zoomIn();
}
btnZoomIn.addEventListener(MouseEvent.CLICK, zoomIn);
function zoomOut (event:MouseEvent) {
umap.zoomOut();
}
btnZoomOut.addEventListener(MouseEvent.CLICK, zoomOut);
umap.zoomIn();
}
btnZoomIn.addEventListener(MouseEvent.CLICK, zoomIn);
function zoomOut (event:MouseEvent) {
umap.zoomOut();
}
btnZoomOut.addEventListener(MouseEvent.CLICK, zoomOut);
Use Methods to Control Info Window
Our next buttons, will open a basic info window. We covered a little more in depth about info windows in our Getting Started: Adding Info Window to UMap. However this time, we don't want our info window to show on load but only at a certain time when our button is clicked. We also want a button that closes our info window.
function openInfo (event:MouseEvent) {
umap.openInfoWindow({title:"My InfoWindow", position: umap.getCenter()});
}
btnOpenInfo.addEventListener(MouseEvent.CLICK, openInfo);
function closeInfo (event:MouseEvent) {
umap.closeInfoWindow();
}
btnCloseInfo.addEventListener(MouseEvent.CLICK, closeInfo);
umap.openInfoWindow({title:"My InfoWindow", position: umap.getCenter()});
}
btnOpenInfo.addEventListener(MouseEvent.CLICK, openInfo);
function closeInfo (event:MouseEvent) {
umap.closeInfoWindow();
}
btnCloseInfo.addEventListener(MouseEvent.CLICK, closeInfo);
Use a Method to Control Map Type
Lastly, we want to switch the map type at certain times and not just on load so in this case we use buttons to switch back forth between types of maps using the setMapType method.
function typeMap (event:MouseEvent) {
umap.setMapType("road");
}
btnTypeMap.addEventListener(MouseEvent.CLICK, typeMap);
function typeSatellite (event:MouseEvent) {
umap.setMapType("aerial");
}
btnTypeSatellite.addEventListener(MouseEvent.CLICK, typeSatellite);
umap.setMapType("road");
}
btnTypeMap.addEventListener(MouseEvent.CLICK, typeMap);
function typeSatellite (event:MouseEvent) {
umap.setMapType("aerial");
}
btnTypeSatellite.addEventListener(MouseEvent.CLICK, typeSatellite);
More Methods
The UMap has a long list of methods that you can use in your aplications, if you would like to take a look all the methods please see the API Documentation in the com.afcomponents.umap.core.UMap class.
Other Tutorials
