Google Maps in Flex – Flight Routes

Main application mxml is ZSAB_ISL_SPFLIGHT following an ABAP like naming convention. Everything is built on two variables shared between flex and webdynpro: flightList and currentFlight. Every time they get updated, the map overlays get updated as well.

Its structure:
|– flightList – ArrayCollection
|– currentFlight – Object
|– FlightMap.mxml – extends default google Map.mxml
|– |– AirportGeocoder – singleton geocoding class
|– |– AirportIcon – class used for creating custom map markers
|– |– FlightMapRoute – class used for creating custom polylines

AirportGeocoder class is responsible for getting all airports from flightList, remove the duplicates and geocode their location on the map via airport code, city and country. This is done asynchronously, one geocoding request at a time, moving through the airport list. Flex makes navigation within an ArrayCollection really easy via the IViewCursor interface. You can move to next or previous item, find or seek within a collection.

AirportGeocoder also remembers previous airport geolocations from previous searches so once an airport is geocoded it will not trigger another geocoding request in the current user session.

The entire process of right clicking an airport marker, reading some value attached to it and dispatching it further is not something Google Maps provides out of the box. You cannot catch right clicks on map overlays and you cannot have a marker hold any kind of custom data. But there are workarounds.

You can have a marker hold custom data by storing it in its icon. When a marker gets created you can specify whether or not to use a custom icon that can be any display object for example a sprite. This is why AirportIcon class was created, it extends Sprite and contains 3 important airport variables: code, city and country.

You can enable a right click menu via ContextMenu on the entire map. After a right click, before the menu gets created, a ContextMenuEvent gets triggered with a mouseTarget property. mouseTarget allows us to identify the top most element that received the right click. In our case, the top most elements will be the map overlays. If mouseTarget indicates an AirportIcon we can add the “City From”, “City To” menu entries to the default flash right click menu. Because AirportIcon also contains airport data, after user selects “City From” or “City To” menu entries, we also have the necessary data to dispatch further to webdynpro environment updating in the end the webdynpro search form.

When it comes to drawing flight routes on the map via polylines, it’s not possible to store custom flight route data like the flight connection id in a polyline itself. The workaround is to include each map polyline in a higher object, containing both a reference to the drawn polyline and custom data and work with this object. The class in question is FlightMapRoute and it contains all low level code in dealing with polylines, It has two main variables: polyline – reference to the map polyline and connId, the id of the flight route in question.

There are a lot more flight list entries than flight routes drawn on the map. If there are 4 different flights between New York and San Francisco for example, all 4 will be represented by just one map flight route. Instead of drawing 4 polylines or even more depending on our flight data, we just draw one, this dramatically increases the map overlay response to end user searches. To make it more complicated, we’re also caching previous drawn flight routes in case we need them again in future searches. Because of this, we can have different FlightMapRoute objects containing references to the same polyline data.

This raises another problem, if a polyline represents multiple flights with different connectionIds, which one of the possible flights should we return to webdynpro? We can’t just pick a random one because the end user may have been searching for flights from San Francisco – New York and we risk sending back to webdynpro a New York – San Francisco flight. The solution is to add an enabled flag to each FlightMapRoute. With each search we “enable” only the routes present in the last search result. When a polyline gets clicked, we find all FlightMapRoute pointing to that polyline and return the first enabled one. This way, when the user clicks on the map polyline, it will always select a flight that is present and can be automatically selected in the webdynpro table.

This post is part of Flight Routes.

2 thoughts on “Google Maps in Flex – Flight Routes”

  1. Or you can simply extend google’s marker class like so

    package custom

    public class M extends Marker
    public var id:int;

    public function M(arg0:LatLng, arg1:MarkerOptions=null)
    super(arg0, arg1);

    where the id can be used to hold any data you want.

  2. Absolutely, there’s always more than one way to skin a cat 🙂

    In this case, custom icons for markers have to be used and AirportIcon class was created. To keep things simple in this mini-app, I’ve chosen not to create another custom class extending Marker but use the existing AirportIcon one. In a serious app, the correct thing to do would be to have the airport properties in a model related class not in view related classes like AirportIcon or the above M class.

Leave a Reply

Your email address will not be published. Required fields are marked *