Getting Started: Modifying Basic UMap Properties
Updated: Feb 12, 2008
Views: 3022
Description: This tutorial will show you how modify UMap properties and use methods to achieve some of the basics with UMap like zoom, move the map, set map type, and initialize through ActionScript.
The Completed Project
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 will cover some of the basics of the UMap like initializing through ActionScript, changing the map type, moving the map with setCenter and Panning, and changing the zoom of the map. The properties and methods that we will use in this tutorial can be found in the API Documentation in the com.afcomponents.umap.core.UMap class.
Initialize the UMap through ActionScript
In the Getting Started: Installing the UMap Component we learned how to drag an instance of the UMap onto the stage. Instead of dragging an instance on the stage, the UMap can also be added to the stage using just ActionScript.
Changing Map Type
Next, we are going to go over how to change your map type. This is one way to change the type of map to map, satellite or hybrid . Again, make sure you have given the component an instance name of umap.
Changing Map Position
Another thing that you will want to do is change the position of the map whether it is for the default map postion or inside of more complex function. Two ways of doing this is setting the center of the map and the map will jump to the new position and the other is that you can have the map animate a pan to a new position. Positions in the UMap are controlled by the latitude and longitude of points.
Set Center of the Map
Pan to a New Position
Changing Map Zoom Level
You will probably also want a more zoomed in view of the map. This can be done a number of different ways. First it can be done as a parameter of the setCenter method that we used above, where the zoom level is passed a number, in this case 8, to this method.
Next, we can set the zoom using setZoom method and passing our new zoom level as a number to this method.
Lastly, we can also use zoomIn and zoomOut methods to change our zoom. You can pass a number to zoom to a certain zoom level or by default it will zoom to the next level.
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 will cover some of the basics of the UMap like initializing through ActionScript, changing the map type, moving the map with setCenter and Panning, and changing the zoom of the map. The properties and methods that we will use in this tutorial can be found in the API Documentation in the com.afcomponents.umap.core.UMap class.
Initialize the UMap through ActionScript
In the Getting Started: Installing the UMap Component we learned how to drag an instance of the UMap onto the stage. Instead of dragging an instance on the stage, the UMap can also be added to the stage using just ActionScript.
import com.afcomponents.umap.core.UMap;
var umap:UMap = new UMap();
umap.setSize(stage.stageWidth,stage.stageHeight);
addChild(umap);
var umap:UMap = new UMap();
umap.setSize(stage.stageWidth,stage.stageHeight);
addChild(umap);
Changing Map Type
Next, we are going to go over how to change your map type. This is one way to change the type of map to map, satellite or hybrid . Again, make sure you have given the component an instance name of umap.
umap.mapType = "satellite";
Changing Map Position
Another thing that you will want to do is change the position of the map whether it is for the default map postion or inside of more complex function. Two ways of doing this is setting the center of the map and the map will jump to the new position and the other is that you can have the map animate a pan to a new position. Positions in the UMap are controlled by the latitude and longitude of points.
Set Center of the Map
import com.afcomponents.umap.types.LatLng;
umap.setCenter(new LatLng(30,-20));
umap.setCenter(new LatLng(30,-20));
Pan to a New Position
import com.afcomponents.umap.types.LatLng;
umap.animatePan = true;
umap.panSpeed = 10;
umap.panTo(new LatLng (38.897661,-77.036564));
umap.animatePan = true;
umap.panSpeed = 10;
umap.panTo(new LatLng (38.897661,-77.036564));
Changing Map Zoom Level
You will probably also want a more zoomed in view of the map. This can be done a number of different ways. First it can be done as a parameter of the setCenter method that we used above, where the zoom level is passed a number, in this case 8, to this method.
import com.afcomponents.umap.types.LatLng;
map.setCenter(new LatLng(30,-20), 8);
map.setCenter(new LatLng(30,-20), 8);
Next, we can set the zoom using setZoom method and passing our new zoom level as a number to this method.
umap.setZoom(8);
Lastly, we can also use zoomIn and zoomOut methods to change our zoom. You can pass a number to zoom to a certain zoom level or by default it will zoom to the next level.
umap.zoomIn();
umap.zoomOut();
umap.zoomIn(8);
umap.zoomOut();
umap.zoomIn(8);
Other Tutorials
