Twitter GeoLocation search and Google Maps Mashup

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

It's always interesting to see whats trending on Twitter - you can get a little glimpse into the mood of the internet.

Trends are really just recurring keywords, and thanks to the Yahoo Term Extractor service you can find "trends" within any block of text. Combining that with Twitters ability to returns recent tweets from users within a specified area allows you to create an application the shows Twitter trends from a specific location.

This tutorial will show you how to combine Google Maps, Twitter and Yahoo Term Extractor to build a mashup that can display local Twitter trends.

Add the following element to your Flex MXML file.

<maps:Map3D

xmlns:maps="com.google.maps.*"

mapevent_mappreinitialize="onMapPreinitialize(event)"

mapevent_mapready="onMapReady(event)"

id="map"

x="0"

y="0"

width="100%"

height="100%"

key="YourGoogleAPIKey"/>

This places a new Google Maps element onto the GUI. We then need to add the functions that correspond to the mapevent_mappreinitialize and mapevent_mapready events.

private function onMapPreinitialize(event:MapEvent):void

{

var myMapOptions:MapOptions = new MapOptions();

myMapOptions.zoom = 12;

myMapOptions.center = new LatLng(DEFAULT_LAT, DEFAULT_LON);

myMapOptions.mapType = MapType.NORMAL_MAP_TYPE;

myMapOptions.viewMode = View.VIEWMODE_ORTHOGONAL;

map.setInitOptions(myMapOptions);

map.addEventListener(MapMouseEvent.DOUBLE_CLICK, onMapClick);

}

private function onMapReady(event:MapEvent):void

{

map.addControl(new ZoomControl());

map.addControl(new PositionControl());

map.addControl(new MapTypeControl());

GeoIP.getGeospatialInfos( handleResult, handleFault );

}

All of this code is explained in the Create your first Google Maps Flex application and GeoLocation with Flex and MaxMind articles, so read them if you need some further information.

Next we need to add event handlers for the GeoIP events triggered by the call to getGeospatialInfos.

private function handleResult( xml:XML ):void

{

var lat:Number = xml.geoip_latitude.@value;

var lon:Number = xml.geoip_longitude.@value;

var point:LatLng = new LatLng(lat, lon);

map.flyTo(point, 12, new Attitude(0,0,0), 3);

}

private function handleFault():void

{

Alert.show("GeoLocation failed.");

}

Again this code is documented in the GeoLocation with Flex and MaxMind article.

The onMapClick function is called when the user double clicks on the map. This was setup in step 1 with the code map.addEventListener(MapMouseEvent.DOUBLE_CLICK, onMapClick);.

private function onMapClick(event:MapMouseEvent):void

{

lastMarker = new Marker(event.latLng);

var service:HTTPService = new HTTPService();

service.resultFormat = "text";

service.url = TWITTER_SEARCH_URL + "?geocode=" + event.latLng.lat() + "%2C" + event.latLng.lng() + "%2C" + DEFAULT_RADIUS + "km";

service.addEventListener(ResultEvent.RESULT, twitterLoadComplete);

service.addEventListener(FaultEvent.FAULT, function(event:FaultEvent):void

{

Alert.show("An error was rasied contacting the Twitter servers\n" + event.fault);

}

);

service.send();

}

When the user double clicks on the map we first create a new marker at the map position. This is not added to the map just yet, so we'll keep a reference to the marker with the lastMarker variable.

We then need to call the Twitter search service, which is documented here. We use the geocode option to specify that we only want tweets from users within 100Km's of the position that was clicked on the map.