Visualizing Spatial Relationships - Data Points: Visualization That Means Something - page 320

Add the Markers
The next steps are to load the Walmart location data and create mark-
ers for each store opening. In the constructor, the following code loads
an XML file from a URL. When the file finishes loading, a function named
onLoadLocations() is called.
var urlRequest:URLRequest =
new URLRequest('http://projects.flowingdata.com/walmart/walmarts_
new.xml');
urlLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, onLoadLocations);
urlLoader.load(urlRequest);
The obvious next step is to create the onLoadLocations() function. It reads
the XML file and stores the data in arrays for easier use later. Before you
do that though, you need to initialize a few more variables after navButtons .
private var urlLoader:URLLoader;
private var locations:Array = new Array();
private var openingDates:Array = new Array();
These variables are used in onLoadLocations() . Latitude and longitude
are stored in locations , and opening dates, in year format, are stored in
openingDates .
private function onLoadLocations(e:Event):void {
var xml:XML = new XML(e.target.data);
for each(var w:* in xml.walmart) {
locations.push(new Location(w.latitude, w.longitude));
openingDates.push(String(w.opening_date));
}
markers = new MarkersClip(map, locations, openingDates);
map.addChild(markers);
}
The next step is to create the MarkersClip class. Following the same
directory structure discussed earlier, there is a directory named flowing-
data in the com directory. A gps directory is in the flowingdata directory.
Finally, in com ➪ flowingdata ➪ gps is the MarkersClip class. This is the
container that will hold all the Walmart markers, or rather, the data layer
of your interactive map.