There’s a lot of tutorials out there, but here’s how I got it to work.
The Plan
Got what? Oh, well, basically it’s being able to use yahoo maps, flash, xml, php, mysql, and data to display a bunch of markers on a map. Each marker contains data pulled from the database, and has a link to a page that displays the full information. For now, I just made a display page. But sometime latter, it will be implemented into the fine Omeka install that the 1989 project will use.
The Steps
Here’s an outline of what I did.
- Create a flash file using the yahoo flash map api component. Available at Yahoo.
- Add some ActionScript to the first frame that will import data from an xml file.
- Create a php page that pulls in data from a MySQL database and displays as an xml file.
Create the swf
In order to make Yahoo and flash play nicely, you need to install the component linked above. Follow directions there. This will add a new component to your Flash program, available in your components window (Window->Components->Yahoo->com.yahoo.maps.api.flash.YahooMap).
Once that’s installed, create a new empty fla. Make a keframe in the first frame on layer one. Drag the yahooMap component onto your stage.
Next, add another layer for your actionscript.
the ActionScript
Here’s the tricky part. Here’s the code I used, heavily commented:
[code lang=”Actionscript”]
/*********************************
* File: yahoomap.as
* Author: Ammon Shepherd
* based off of many tutorials and code snippets, mostly from Yahoo! documentation.
********************************/
//Set the URL where the xml file is.
var xmlURL = “http://chnm.gmu.edu/1989/maps/xml.php”;
//Import Yahoo map tools
import com.yahoo.maps.LatLon;
import com.yahoo.maps.markers.CustomPOIMarker;
import com.yahoo.maps.tools.PanTool;
import com.yahoo.maps.widgets.*;
//Create a listener associated with the instance of the Yahoo map component.
// Set the map to pull down the yahoo map and get the setting/changes from
// the onMap function.
euroMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onMap);
//This will add a zoom tool and set it as closed by default
var zoomer:NavigatorWidget = new NavigatorWidget(“closed”);
//The onMap function adds the tools, settings, and markers to the map.
function onMap(eventData) {
//create a new PanTool and name it pantool
var pantool:PanTool = new PanTool();
//tell the instance of the map to use the new PanTool called pantool
euroMap.addTool(pantool, true);
//Add the Navigator widget
euroMap.addWidget(zoomer);
//Create a variable called xmlData of the type XML
var locations_xml:XML = new XML();
//igore white space
locations_xml.ignoreWhite = true;
//when the xml file is loaded, do the fuction within
locations_xml.onLoad = function(success){
//if the xml file loaded successfully run the function addMarkers
if (success) addMarkers(this);
};
//then actually load the xml file.
locations_xml.load(xmlURL);
/*******************************************
* Used this for testing, you don’t really need it. I was thinking of using
* this in the future to display the lat and long to the user.
//Get the center of the map and store them in the variable called points.
var points = euroMap.getCenter();
//trace(“before convert” + points);
//swap the points, so long->long and lat->lat
convert(points);
//trace(points);
******************************************/
}
//This is the function that adds the markers to the map.
function addMarkers(xml:XML):Void {
//the addresses variable holds the path to the right xml element.
//firstChild is the
var addresses = xml.firstChild.childNodes;
for(var i=0; i
address = addresses[i];
/***************************************************************
* MarkerData is the object that holds the info for each marker.
* index: is the text that shows up on the marker (usually just A or
* what have you. you could use the variable i to show an
* incremented number (each marker has it’s own number).
* title: sets the title of the marker and corresponds to the title
* parameter in the location tags in the xml file.
* description: is the larger text. It corresponds with the description
* parameter in the location tag in the xml field.
* markerColor: sets the color of the marker, duh 🙂 It’s the border
* color, and the color when not expanded.
* strokeColor: is the background.
***************************************************************/
var MarkerData:Object = {index: ‘\’89’, title:address.attributes.info, description:address.attributes.description, markerColor:0xcc0000, strokeColor:0xceccc7};
/****************************************************************
* This actually adds the address to the map using the custom point of
* interest style of marker (you can use your own style if you like.
* the address.attributes.loc grabs the latitude and longitude from
* the loc=”” part of the location tag in the xml file. MarkerData
* is the stuff we just set above.
****************************************************************/
euroMap.addMarkerByAddress(CustomPOIMarker, address.attributes.loc, MarkerData);
}
}
[/code]
Download yahoomap.as
(Special thanks to CodeSnippet for providing a way to show code. This was the 5th one I tried that finally worked.)
The PHP/XML
Next we need an xml file. I need to pull the data from a database, so I used a php script which pretends to be an xml file. The basics of that is to put this in the php file:
[code lang=”php”]
// Date in the past
header(“Expires: Mon, 26 Jul 1997 05:00:00 GMT”);
// always modified
header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”) . ” GMT”);
// HTTP/1.1
header(“Cache-Control: no-store, no-cache, must-revalidate”);
header(“Cache-Control: post-check=0, pre-check=0”, false);
// HTTP/1.0
header(“Pragma: no-cache”);
//XML Header
header(“content-type:text/xml”);
[/code]
Then, because our database doesn’t store the geocodes by default yet, nor do the items have any type of specific address or what not associated with them, I created an array with specific places and their lat, long. Each of the items in the database have tags associated with them. The array corresponds to tags that have countries names on them. This poses a problem if the tag name is changed, but for now it works OK.
[code lang=”php”]
$countries = array(
array(“Poland”, “52.1874047455997”, “19.072265625”),
array(“East Germany”, “52.517474393230245”, “13.41156005859375”),
array(“Czechoslovakia”, “49.210420445650286”, “17.490234375”),
array(“Hungary”, “47.45780853075031”, “19.05029296875”),
array(“romania”, “45.98169518512228”, “25.07080078125”),
array(“Yugoslavia”, “44.26093725039923”, “18.96240234375”),
array(“Bulgaria”, “42.601619944327965”, “25.24658203125”),
array(“Soviet Union”, “55.70235509327093”, “37.79296875”)
);
[/code]
The problem I ran into next was that there were over 15 markers that would share the same lat an long. This makes it hard to click on a marker when it’s buried under 20 other markers. So at first I tried just adding a couple of digits to the lat and long as it looped through the array. This led to a long line of markers, and didn’t look very good. Random numbers to the rescue! To create a clustering affect I generated two random numbers, one for the lat and one for the long. This number was added giving the markers a clustered appearance. Here’s that part of the code:
[code lang=”php”]
echo “< ?xml version='1.0' ?>
“;
for($g=0; $g
}
}
echo ‘
‘;
[/code]
You may notice my call to the description function (which, in turn, calls a function called truncate, but you wouldn’t know that yet). This simply turns all HTML characters into their HTML entity characters. HTML in an XML file will break the XML file… more specifically the < and " ' characters. The truncate function I grabbed from php.net's comments for substr_replace. The truncate function shortens long text to a set number of words, and adds an ellipse at the end to signify more text. Here are those two functions:
[code lang=”php”]
function description($id,$text){
$description = wordwrap(htmlentities(truncate($text,200), ENT_QUOTES),30);
$fulltext = $description.”\n<a target=’_blank’ href=’http://chnm.gmu.edu/1989/maps/results.php?id=$id’>Show item</a>”;
return $fulltext;
}
function truncate($text,$numb) {
// source: www.kigoobe.com, please keep this if you are using the function
//$text = html_entity_decode($text, ENT_QUOTES);
if (strlen($text) > $numb) {
$text = substr($text, 0, $numb);
$text = substr($text,0,strrpos($text,” “));
$etc = ” …”;
$text = $text.$etc;
}
//$text = htmlentities($text, ENT_QUOTES);
return $text;
}
[/code]
Here’s the whole php file.
That basically does it.
