FlexMap

FlexMap - Yahoo! Maps component for Flex 2

FlexMap allows a developer to use the Yahoo! Maps API in their Flex 2 projects. The solution brings together a Flash 8 SWF which contains the Flash API for Yahoo! Maps and a Flex 2 component which communicates to the SWF via LocalConnection. The Flex 2 component exposes similar properties, events and methods as the official Flex 1.5 component.

Download FlexMap 0.4.0

Project site for source code and issue tracking:
http://code.google.com/p/flexmap/

Notes

  • Currently if you’d like to resize the map, it’s best to republish the SWF with the new dimensions vs calling the setSize method. I encountered very odd behavior when using it. Something I have to look into more.
  • There seems to be an issue with clicking on CustomPOIMarkers. I’m guessing that the Flex app is intercepting the click which then prevents the SWF from getting it. Another thing I have to look into.
  • You can set your application id in the provided FLA, then republish or call setAppId() on your FlexMap instance.

Documentation

Supported methods

Actionscript
addMarkerByAddress(markerClass:Class, address:String, data:Object):void

addMarkerByLatLon(markerClass:Class, latlon:LatLon, data:Object):void

addTool(tool:Tool, isActive:Boolean):void

addWidget(widget:Widget):void

removeAllMarkers():void

setAppId(appid:String):void

setBounds(rect:LatLonRect):void

setCenterByAddress(address:String, duration:Number=0):void

setCenterByAddressAndZoom(address:String, zoomLevel:Number, duration:Number=0):void

setCenterByLatLon(latlon:LatLon, duration:Number=0):void

setCenterByLatLonAndZoom(latlon:LatLon, zoomLevel:Number, duration:Number=0):void

setMapViewType(mapViewType:String):void

setSize(newWidth:Number, newHeight:Number):void

setZoomLevel(zoomLevel:Number):void

Supported properties

Actionscript
mapViewType:String

zoomLevel:Number

latitude:Number

longitude:Number

Displaying a Yahoo! Map
Once downloaded, add the SWC to your application by creating a new library reference in your project settings. The included Flash SWF which contains the Yahoo! Maps flash component will also need to be copied into your project or placed on the server where your application will run.

XML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:view="com.timwalling.maps.api.flex.*">
 
  <view:FlexMap id="map"
    width="550" height="400"
    source="map.swf"
    mapViewType="{com.timwalling.maps.MapViews.MAP}"
    zoomLevel="6" latitude="37.77159" longitude="-122.451714"
  />
</mx:Application>

Making the map draggable

XML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:view="com.timwalling.maps.api.flex.*">
  <mx:Script>
    <![CDATA[
    import com.timwalling.maps.events.MapEvent;
    import com.timwalling.maps.tools.PanTool;

    private function onMapInit(event:MapEvent):void
    {  
      var panTool = new PanTool();
      map.addTool(panTool, true);
    }
    ]]>  </mx:Script>
  <view:FlexMap id="map"
    width="550" height="400"
    source="map.swf"
    mapViewType="{com.timwalling.maps.MapViews.MAP}"
    zoomLevel="6" latitude="37.77159" longitude="-122.451714"
    mapInitialize="onMapInit(event)"
  />
</mx:Application>

Changing the map view type
To change the type of map being displayed, set the mapViewType property after the map has loaded.

XML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:view="com.timwalling.maps.api.flex.*">
  <mx:Script>
    <![CDATA[
    import com.timwalling.maps.events.MapEvent;
    import com.yahoo.maps.MapViews;

    private function onMapInit(event:MapEvent):void
    {  
      map.setMapViewType(MapViews.SATELLITE);
    }
    ]]>  </mx:Script>
  <view:FlexMap id="map"
    width="550" height="400"
    source="map.swf"
    mapViewType="{com.timwalling.maps.MapViews.MAP}"
    zoomLevel="6" latitude="37.77159" longitude="-122.451714"
    mapInitialize="onMapInit(event)"
  />
</mx:Application>

Adding a navigation widget
To give users control over the map zoom level, add a navigation widget by calling the addWidget method.

XML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:view="com.timwalling.maps.api.flex.*">
  <mx:Script>
    <![CDATA[
    import com.timwalling.maps.events.MapEvent;
    import com.timwalling.maps.widgets.NavigatorWidget;

    private function onMapInit(event:MapEvent):void
    {  
      var navWidget:NavigatorWidget = new NavigatorWidget();
      map.addWidget(navWidget);
    }
    ]]>  </mx:Script>
  <view:FlexMap id="map"
    width="550" height="400"
    source="map.swf"
    mapViewType="{com.timwalling.maps.MapViews.MAP}"
    zoomLevel="6" latitude="37.77159" longitude="-122.451714"
    mapInitialize="onMapInit(event)"
  />
</mx:Application>

Adding custom point of interest markers
To place a point on the map, you can call the addMarkerByAddress or addMarkerByLatLon methods. Each method needs to know the type of marker to add, the location (address or LatLon object) and an object containing the parameters to pass to the marker class.

XML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:view="com.timwalling.maps.api.flex.*">
  <mx:Script>
    <![CDATA[
    import com.timwalling.maps.events.MapEvent;
    import com.timwalling.maps.tools.PanTool;
    import com.timwalling.maps.markers.CustomPOIMarker;

    private function onMapInit(event:MapEvent):void
    {  
      var panTool:PanTool = new PanTool();
      map.addTool(panTool, true);

      var address:String = "4th Ave at Pike St. Seattle, WA";
      map.setCenterByAddress(address, 0);

      var myMarker:Object = {index:'Y!', title:address, description:'Downtown Seattle!', markerColor:0x990099, strokeColor:0xFFFF00};
      map.addMarkerByAddress(CustomPOIMarker, address, myMarker);
    }
    ]]>  </mx:Script>
  <view:FlexMap id="map"
    width="550" height="400"
    source="map.swf"
    mapViewType="{com.timwalling.maps.MapViews.MAP}"
    zoomLevel="6" latitude="37.77159" longitude="-122.451714"
    mapInitialize="onMapInit(event)"
  />
</mx:Application>

Issues/Bugs

Issues and bugs can be reported at the project’s home on code.google.com:
http://code.google.com/p/flexmap/

Feature Roadmap (coming soon)

Questions

Feel free to contact me with any other questions or comments.

 

Posted in Misc. |