Newsmap – using Placemaker to add geo location to a news feed
Friday, May 22nd, 2009 at 1:42 amI am right now very excited about the new Placemaker beta – a location extraction web service released at Where2.0. Using Placemaker you can find all the geographical locations in a feed or a text or a web url and you get them back as an array of places.
As a demo I took the Yahoo News feed and ran it through Placemaker. The resulting places are plotted on a map and the map moves from location to location when you hover over the news items.
The result is online at http://isithackday.com/hacks/placemaker/map.php
Getting the data from the data feed and running it through placemaker is very straight forward. I explained the basic principle in this blog post on the Yahoo Developer Network blog. The only thing to think about is to define the input and output types correctly:
$key = ‘PASTE YOUR API KEY HERE’;
$apiendpoint = ‘http://wherein.yahooapis.com/v1/document’;
$url = ‘http://rss.news.yahoo.com/rss/topstories’;
$inputType = ‘text/rss’;
$outputType = ‘rss’;
$post = ‘appid=’.$key.’&documentURL=’.$url.
‘&documentType=’.$inputType.’&outputType=’.$outputType;
$ch = curl_init($apiendpoint);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$results = curl_exec($ch);
?>
If you look at the source of this example you will find that Placemaker injected contentlocation elements in the feed itself:
xmlns:xml=”http://www.w3.org/XML/1998/namespace” xml:lang=”en”>
2514815
38.8913
-77.0337
23424793
21.511
-77.8068
23424977
48.8907
-116.982
55843872
Guantanamo, CU]]>
19.9445
-75.1541
You’ll also notice that the elements are namespaced and the names of the locations in CDATA blocks, both things I hate with a passion. Not because they don’t make sense, but because simplexml can be drag to make understand them.
What I wanted to do with this data was twofold: create a JSON array of geo locations to plot on a map and a display of the news content. This is the PHP that does that:
$places = simplexml_load_string($results, ‘SimpleXMLElement’,
LIBXML_NOCDATA);
// if there are elements found
if($places->channel->item){
// start a JSON array
$output .= ‘[‘;
// start the HTML output
$html = ‘- ‘;
// set the counter – this will be needed to link news
// items and map markers
$count = 0;
// loop over RSS items
foreach($places->channel->item as $p){
// set inner counter (as there are more locations per news item)
$innercount = 0;
// start the HTML list item and give it an ID with the counter
// value
$html .= ‘ // all child elements with the defined namespace
$locs = $p->children(‘http://wherein.yahooapis.com/v1/cle’);
// check that there is a location sub-element in this item
if($locs->contentlocation){
// if there is one, add a class to the LI
$html .= ’ class=”haslocation”’;
// start an array for displaying of the locations under the
// news items
$dlocs = array();
// loop over all the places found for this item
foreach($locs->contentlocation->place as $pl){
// append a new JS object with the location data
// and a unique ID to the locations array
$locations[] = ‘{name.’”,”title” title=”“>name“:”’.
preg_replace(‘/n+/’,’‘,addslashes($p->title)).
‘”,latitude” title=”“>lat.
‘”,longitude.’”,”id”:”m” title=”“>lon‘.
$count.’x’.$innercount.’”}’;
// add the location name to the display locations array
$dlocs[] = $pl->name;
// increase the inner count to ensure that every marker has
// a unique ID
$innercount++;
}
}
// append the HTML for the news item
$html.=’>
Locations: ‘.join(‘,’,$dlocs).’‘;
}
// end the list item
$html.=’‘;
// increase the counter
$count++;
}
// join the json object data with a comma and close the JSON array
$output .= join(‘,’,$locations);
$output .= ‘]’;
// if there are no items simply return nothing
} else {
$output = ‘’;
}
// and this ends the HTML
$html.= ‘
$html.=’‘;
// increase the counter
$count++;
}
$output .= join(‘,’,$locations);
$output .= ‘]’;
// if there are no items simply return nothing
} else {
$output = ‘’;
}
$html.= ‘
?>
The result of this can be seen here http://isithackday.com/hacks/placemaker/map-2.php.
The JavaScript to show the map is pretty straight forward and more or less the demo example of the maps API:
// will be called with the array assembled in PHP
function placeonmap(o){
// if there are locations
if(o.length > 0){
// create a new geopoints array to hold all locations
// this is needed to determine the original zoom
// level of the map
var geopoints = [];
// add map with controls
var map = new YMap(document.getElementById(‘map’));
map.addZoomLong();
map.addPanControl();
// loop over locations
for(var i=0;i
var point = new YGeoPoint(o[i].lat,o[i].lon);
geopoints.push(point);
// create a new marker and give it the unique
// id defined in the PHP. Pop up the title of
// the news item and the name of the location when the
// user hovers over the marker
var newMarker = new YMarker(point,o[i].id);
newMarker.addAutoExpand(o[i].title + ‘(‘+o[i].name+’)’);
map.addOverlay(newMarker);
}
// define best zoom level and show map
var zac = map.getBestZoomAndCenter(geopoints);
map.drawZoomAndCenter(zac.YGeoPoint,zac.zoomLevel);
}
// add a mouseover handler to the list of results
YAHOO.util.Event.on(‘news’,’mouseover’,function(e){
// remove the “news” text of the ID of the current target
// as we named the list items news0 to news19
var id = YAHOO.util.Event.getTarget(e).id.replace(‘news’,’‘);
// if there is still something left we have one of the news
// items
if(id!==’‘){
// get the first marker with the ID we defined in the loop.
var marker = map.getMarkerObject(‘m’+id+’x0’);
// if there is one, pan the map there and show the message
// attached to it.
if(marker){
map.panToLatLon(marker.YGeoPoint);
marker.openAutoExpand();
}
}
});
}
// call placeonmap with the JSON array
placeonmap();
That’s pretty much it. I am sure it can be refined, but it is amazing how easy it is to get geo information into any text with Placemaker.
Tags: hack, javascript, maps, mashup, php, placemaker