There’s a lot of tutorials out there, but here’s how I got it to work.<\/p>\n
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<\/a> install that the 1989 project will use.<\/p>\n Here’s an outline of what I did.<\/p>\n 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).<\/p>\n 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.<\/p>\n Next, add another layer for your actionscript.<\/p>\n Here’s the tricky part. Here’s the code I used, heavily commented:<\/p>\n [code lang=”Actionscript”] \/\/Import Yahoo map tools \/\/Create a listener associated with the instance of the Yahoo map component. \/\/This will add a zoom tool and set it as closed by default \/\/The onMap function adds the tools, settings, and markers to the map. \/\/tell the instance of the map to use the new PanTool called pantool \/\/Add the Navigator widget \/\/Create a variable called xmlData of the type XML \/\/igore white space \/\/when the xml file is loaded, do the fuction within \/\/then actually load the xml file. \/******************************************* }<\/p>\n \/\/This is the function that adds the markers to the map. for(var i=0; i \/*************************************************************** \/**************************************************************** (Special thanks to CodeSnippet<\/a> for providing a way to show code. This was the 5th one I tried that finally worked.)<\/p>\n 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: 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.<\/p>\n [code lang=”php”] 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:<\/p>\n [code lang=”php”] for($g=0; $g } echo ‘ 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:<\/p>\n [code lang=”php”] $fulltext = $description.”\\n<a target=’_blank’ href=’http:\/\/chnm.gmu.edu\/1989\/maps\/results.php?id=$id’>Show item<\/a>”;<\/p>\n return $fulltext; function truncate($text,$numb) { Here’s the whole php file<\/a>. 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 … Continue reading How does the yahoo\/flash map work\u2026<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[3,8,167],"tags":[87,51,60],"class_list":["post-72","post","type-post","status-publish","format-standard","hentry","category-coding","category-school-work","category-technical","tag-digital-maps","tag-history-of-1989","tag-maps"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9wosP-1a","_links":{"self":[{"href":"https:\/\/mossiso.com\/wp-json\/wp\/v2\/posts\/72"}],"collection":[{"href":"https:\/\/mossiso.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mossiso.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mossiso.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mossiso.com\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":3,"href":"https:\/\/mossiso.com\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":739,"href":"https:\/\/mossiso.com\/wp-json\/wp\/v2\/posts\/72\/revisions\/739"}],"wp:attachment":[{"href":"https:\/\/mossiso.com\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mossiso.com\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mossiso.com\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}The Steps<\/h2>\n
\n
Create the swf<\/h2>\n
the ActionScript<\/h2>\n
\n\/*********************************
\n* File: yahoomap.as
\n* Author: Ammon Shepherd
\n* based off of many tutorials and code snippets, mostly from Yahoo! documentation.
\n********************************\/
\n\/\/Set the URL where the xml file is.
\nvar xmlURL = “http:\/\/chnm.gmu.edu\/1989\/maps\/xml.php”;<\/p>\n
\nimport com.yahoo.maps.LatLon;
\nimport com.yahoo.maps.markers.CustomPOIMarker;
\nimport com.yahoo.maps.tools.PanTool;
\nimport com.yahoo.maps.widgets.*;<\/p>\n
\n\/\/ Set the map to pull down the yahoo map and get the setting\/changes from
\n\/\/ the onMap function.
\neuroMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onMap);<\/p>\n
\nvar zoomer:NavigatorWidget = new NavigatorWidget(“closed”);<\/p>\n
\nfunction onMap(eventData) {
\n \/\/create a new PanTool and name it pantool
\n var pantool:PanTool = new PanTool();<\/p>\n
\n euroMap.addTool(pantool, true);<\/p>\n
\n euroMap.addWidget(zoomer);<\/p>\n
\n var locations_xml:XML = new XML();<\/p>\n
\n locations_xml.ignoreWhite = true;<\/p>\n
\n locations_xml.onLoad = function(success){
\n \/\/if the xml file loaded successfully run the function addMarkers
\n if (success) addMarkers(this);
\n };<\/p>\n
\n locations_xml.load(xmlURL);<\/p>\n
\n * Used this for testing, you don’t really need it. I was thinking of using
\n * this in the future to display the lat and long to the user.
\n \/\/Get the center of the map and store them in the variable called points.
\n var points = euroMap.getCenter();
\n \/\/trace(“before convert” + points);
\n \/\/swap the points, so long->long and lat->lat
\n convert(points);
\n \/\/trace(points);
\n ******************************************\/<\/p>\n
\nfunction addMarkers(xml:XML):Void {
\n \/\/the addresses variable holds the path to the right xml element.
\n \/\/firstChild is the
\n var addresses = xml.firstChild.childNodes;<\/p>\n
\n address = addresses[i];<\/p>\n
\n * MarkerData is the object that holds the info for each marker.
\n * index: is the text that shows up on the marker (usually just A or
\n * what have you. you could use the variable i to show an
\n * incremented number (each marker has it’s own number).
\n * title: sets the title of the marker and corresponds to the title
\n * parameter in the location tags in the xml file.
\n * description: is the larger text. It corresponds with the description
\n * parameter in the location tag in the xml field.
\n * markerColor: sets the color of the marker, duh \ud83d\ude42 It’s the border
\n * color, and the color when not expanded.
\n * strokeColor: is the background.
\n ***************************************************************\/
\n var MarkerData:Object = {index: ‘\\’89’, title:address.attributes.info, description:address.attributes.description, markerColor:0xcc0000, strokeColor:0xceccc7};<\/p>\n
\n * This actually adds the address to the map using the custom point of
\n * interest style of marker (you can use your own style if you like.
\n * the address.attributes.loc grabs the latitude and longitude from
\n * the loc=”” part of the location tag in the xml file. MarkerData
\n * is the stuff we just set above.
\n ****************************************************************\/
\n euroMap.addMarkerByAddress(CustomPOIMarker, address.attributes.loc, MarkerData);
\n }
\n}
\n[\/code]
\nDownload yahoomap.as<\/a><\/p>\nThe PHP\/XML<\/h2>\n
\n[code lang=”php”]
\n\/\/ Date in the past
\nheader(“Expires: Mon, 26 Jul 1997 05:00:00 GMT”);
\n\/\/ always modified
\nheader(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”) . ” GMT”);
\n\/\/ HTTP\/1.1
\nheader(“Cache-Control: no-store, no-cache, must-revalidate”);
\nheader(“Cache-Control: post-check=0, pre-check=0”, false);
\n\/\/ HTTP\/1.0
\nheader(“Pragma: no-cache”);
\n\/\/XML Header
\nheader(“content-type:text\/xml”);
\n[\/code]<\/p>\n
\n$countries = array(
\n array(“Poland”, “52.1874047455997”, “19.072265625”),
\n array(“East Germany”, “52.517474393230245”, “13.41156005859375”),
\n array(“Czechoslovakia”, “49.210420445650286”, “17.490234375”),
\n array(“Hungary”, “47.45780853075031”, “19.05029296875”),
\n array(“romania”, “45.98169518512228”, “25.07080078125”),
\n array(“Yugoslavia”, “44.26093725039923”, “18.96240234375”),
\n array(“Bulgaria”, “42.601619944327965”, “25.24658203125”),
\n array(“Soviet Union”, “55.70235509327093”, “37.79296875”)
\n);
\n[\/code]<\/p>\n
\necho “< ?xml version='1.0' ?>
\n <\/locations>
\n “;<\/p>\n
\n}<\/p>\n
\n <\/locations>‘;
\n[\/code]<\/p>\n
\nfunction description($id,$text){
\n $description = wordwrap(htmlentities(truncate($text,200), ENT_QUOTES),30);<\/p>\n
\n}<\/p>\n
\n \/\/ source: www.kigoobe.com, please keep this if you are using the function
\n \/\/$text = html_entity_decode($text, ENT_QUOTES);
\n if (strlen($text) > $numb) {
\n $text = substr($text, 0, $numb);
\n $text = substr($text,0,strrpos($text,” “));
\n $etc = ” …”;
\n $text = $text.$etc;
\n }
\n \/\/$text = htmlentities($text, ENT_QUOTES);
\n return $text;
\n}
\n[\/code]<\/p>\n
\nThat basically does it.<\/p>\n","protected":false},"excerpt":{"rendered":"