Adding videos to the map
Updated: Aug 29, 2007
Views: 13804
Description: The following tutorial illustrates how to add geo-coded videos to the map with the GMap flash component.
| Download source files |
| |
Code used in the example above.
// ------------------------------------------------------
// Stage Settings
Stage.scaleMode = "noScale";
Stage.align = "TL";
// ------------------------------------------------------
// Map Scaling
map.setSize(Stage.width, Stage.height);
var stageListener = new Object();
stageListener.onResize = function (){
map.setSize(Stage.width, Stage.height);
}
Stage.addListener(stageListener);
// ------------------------------------------------------
// Map Controls
map.addControl(map.GTypeControl());
map.addControl(map.GZoomControl({display:"compact"}));
map.addControl(map.GPositionControl());
// ------------------------------------------------------
// Load XML
import com.afcomponents.utils.XmlParser;
var myParser:XmlParser = new XmlParser();
myParser.addEventListener("XML_LOADED", plotPoints);
myParser.loadXML("http://www.afcomponents.com/components/g_map/videoMapXml.xml");
// ------------------------------------------------------
// Plot Points
function plotPoints(event:Object)
{
for(var i:Number=0; i<event.location.length; i++){
var latitude = Number(event.location[i].split(",")[0]);
var longitude = Number(event.location[i].split(",")[1])
var point = map.addPoint({lat:latitude,
lng:longitude,
index:i,
name:event.title[i],
description:event.description[i],
attributes:event.path[i],
fillRGB:0xFFFF00,
strokeRGB:0x333333});
point.addEventListener("GEOMETRY_ON_RELEASE", openInfoWindow);
}
}
// ------------------------------------------------------
// Open Info Window
function openInfoWindow(event:Object)
{
var window = event.target.openInfoWindow({title:event.target.name, w:340, h:280});
window._window_mc.attachMovie("FLVPlayback", "player", window._window_mc.getNextHighestDepth(), {x:10, y:30,contentPath:event.target.attributes});
}
// Stage Settings
Stage.scaleMode = "noScale";
Stage.align = "TL";
// ------------------------------------------------------
// Map Scaling
map.setSize(Stage.width, Stage.height);
var stageListener = new Object();
stageListener.onResize = function (){
map.setSize(Stage.width, Stage.height);
}
Stage.addListener(stageListener);
// ------------------------------------------------------
// Map Controls
map.addControl(map.GTypeControl());
map.addControl(map.GZoomControl({display:"compact"}));
map.addControl(map.GPositionControl());
// ------------------------------------------------------
// Load XML
import com.afcomponents.utils.XmlParser;
var myParser:XmlParser = new XmlParser();
myParser.addEventListener("XML_LOADED", plotPoints);
myParser.loadXML("http://www.afcomponents.com/components/g_map/videoMapXml.xml");
// ------------------------------------------------------
// Plot Points
function plotPoints(event:Object)
{
for(var i:Number=0; i<event.location.length; i++){
var latitude = Number(event.location[i].split(",")[0]);
var longitude = Number(event.location[i].split(",")[1])
var point = map.addPoint({lat:latitude,
lng:longitude,
index:i,
name:event.title[i],
description:event.description[i],
attributes:event.path[i],
fillRGB:0xFFFF00,
strokeRGB:0x333333});
point.addEventListener("GEOMETRY_ON_RELEASE", openInfoWindow);
}
}
// ------------------------------------------------------
// Open Info Window
function openInfoWindow(event:Object)
{
var window = event.target.openInfoWindow({title:event.target.name, w:340, h:280});
window._window_mc.attachMovie("FLVPlayback", "player", window._window_mc.getNextHighestDepth(), {x:10, y:30,contentPath:event.target.attributes});
}
In the download package we also include a simple XML parsing class and an XML file.
That is about it. For a complete list component's methods and events please see API Documentation. If you have any questions please post them on our forum.
