Reflexion Map for Flash

• Overview
• Documentations
  • Introduction
  • Using Reflexion Map for Flash
  • API Reference
• Downloads
• Purchase Online

Documentations

Creating a full featured map-enabled application

The best way to learn how Reflexion Map for Flash works is by looking at examples. This document will provide various ways to add, modify, and extend Reflexion Map for Flash.

Adding a full featured map in Flex

Adding a map to your Flex application is as simple as the following code.

First, you will need a container to hold the actual map component. The easiest way to add a Flash sprite in Flex is using a UIComponent. Create a UIComponent named "mapContainer" that'll act as a container for the map. For now, set the container's width and height to 100%.

<mx:UIComponent id="mapContainer" width="100%" height="100%" />

Next, you have to tell the application to add an instance of Map class to the container you just created above. To do so, you first have to create an event handler.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="onCreationComplete();">

This will make the application call onCreateComplete() when the Flex application complete its basic initialization. Now, let's make the function to add a Map instance.

<mx:Script>
	<![CDATA[
		import kr.reflexion.map.Map;
		
		private function onCreationComplete():void {
			var map:Map = new Map(mapContainer.width, mapContainer.height);
			
			mapContainer.addChild(map);
		}
	]]>
</mx:Script>

It only takes few lines to add a full featured map to an application. The full code for this example is as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="onCreationComplete();">
	<mx:UIComponent id="mapContainer" width="100%" height="100%" />
	
	<mx:Script>
		<![CDATA[
			import kr.reflexion.map.Map;
			
			private function onCreationComplete():void {
				var map:Map = new Map(mapContainer.width, mapContainer.height);
				
				mapContainer.addChild(map);
			}
		]]>
	</mx:Script>
</mx:Application>

If you compile it, you get the following output:

Very simple indeed! Since you didn't do anything but add a map instance, you'll see the world map with some controls. Now that you added a map, you will probably want to change some properties in the map to make the default view of the map be changed to the way you want.

Changing the properties of the map

The default tile set that the map component uses is Google (Map) tile set. Although users can change the tile set using the combobox provided in the map component, sometimes you'll want to use a different tile source or maybe a combination of tile sets to be displayed. To do so, you have to change the selectedIndex value of Map's tileComboBox. Let's change the default tile set to show Google's satellite imageries. Looking at the drop-down list of the left combobox in the map, Google (Satellite) is located at the 4th from the top. To change the default tile set to Google (Satellite), add the following line to the code after the line where you made an instance of the Map class.

var map:Map = new Map(mapContainer.width, mapContainer.height);
map.tileComboBox.selectedIndex = 3;

Now if you compile it, the default tile set shows some satellite images and the combobox shows Google (Satellite) as default.

Let's change some other properties. If you do not do anything, the default value for zoom level is set to one(1). The zoom level tells how accurate the tile is. The minimum and the maximum values vary from tile sources but the values are usually from 1 to 18; 1 shows the tiles at a continent level, 18 usually showing the tiles at a city level. Let's change this value to 5.

var map:Map = new Map(mapContainer.width, mapContainer.height);
map.tileComboBox.selectedIndex = 3;
map.zoomLevel = 3;

Now if you compile it, you'll see that the map zoomed in a little. Next, our company is located approximately at a latitude of 37.5004571 and a longitude of 127.0293009. The maximum zoom level for Google (Satellite) is 18 so let's set the zoom level to its maximum as well.

var map:Map = new Map(mapContainer.width, mapContainer.height);
map.tileComboBox.selectedIndex = 3;
map.zoomLevel = 18;
map.center = new LatLong(37.5004571, 127.0293009);

Now if you compile it, you'll see our HQ on the map. The full code for this example is as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="onCreationComplete();">
	<mx:UIComponent id="mapContainer" width="100%" height="100%" />
	
	<mx:Script>
		<![CDATA[
			import kr.reflexion.map.geom.LatLong;
			import kr.reflexion.map.Map;
			
			private function onCreationComplete():void {
				var map:Map = new Map(mapContainer.width, mapContainer.height);
				map.tileComboBox.selectedIndex = 3;
				map.zoomLevel = 18;
				map.center = new LatLong(37.5004571, 127.0293009);
				
				mapContainer.addChild(map);
			}
		]]>
	</mx:Script>
</mx:Application>

And the output:

Handling events

To be written