Tag: history of 1989

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.

1. Create a flash file using the yahoo flash map api component. Available at Yahoo.
2. Add some ActionScript to the first frame that will import data from an xml file.
3. 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 and childNodes is an array of the tags
var addresses = xml.firstChild.childNodes;

for(var i=0; i then the second and so on for all of them.
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.

Back again. Only two weeks left of school.

I spent the past two days trying to work XML into the picture for the time line aspect. The thought was, if all of the data for the ‘flash point’ or points of the events of 1989 were kept in an xml file, the the flash could dynamically add them in at the right place and time.  I can bring in the xml data, but I can’t get it to display the correct information for each event. It always shows the last events data. I have a for loop to grab all of the data from the xml file, then it attaches the ‘flash point’ movie clip in the correct place. Then I assign an onRollOver and onRollOut to that movie clip (dynamically named). But the onRollOver just holds the data from the last element in the xml instead of each attached movie clip holding the data for it’s respective event.

This would be really cool to do, because then to add or remove events from the timeline, just edit the xml file.  The xml filed could even theoretically pull the data in from the database, making so that each person can have their own specific timeline.  That would be way cool. But it unfortunately seems a bit beyond me. The other obstacle is about the time aspect. How can I get the flash point to show up at the right time. I’d have to come up with a bunch of mathematical voodo on where the timeline bar is (the _x position on the stage) and the percentage left and compare that with the date of the event somehow. Aargh! Way too confusing for my feeble brain.

I’ll just have to do the easy hard code the events into the timeline. Anyhow, here’s what I have so far on the intro/timeline (which, I’m realizing, I’ll need to have a front page where you select which one you want to view, or have them separate instead of one after the other). Version 0.0.2.3.9.5 (or something like that)

I’m finally getting somewhere with the Yahoo/Flash map. The latest is always viewable at http://chnm.gmu.edu/1989/maps/yahoo.html. Tonight I worked on getting the title and description to show up nice. The description is usually really long, so I found a php function that truncates it (without cutting of mid-word), and adds an elipse to show more text. I also figured out how to add html links to the xml data. There’s apparently a couple of different ways. I opted to have the first < in the a tag be written in as &lt ; (the HTML entity). That did the trick. Now the marker has a link to see the whole of the data. This should be a link back to the page that’s part of the real site (in Omeka).

Another idea: Add the ability in the admin side of things, to select an item, and then enter the geocodes for that item by clicking on the map in the appropriate spot. Flickr does something like that. It would make it really easy for admins to enter the geocodes.