Google Maps Twitter Mashup

Google Maps
The map data you see inside Google Maps comes from multiple sources, including user-provided data, but is primarily compiled by Tele Atlas, a global leader in navigation and location-based services. For our mashup we will be combining Google Maps with Twitter. Therefore all of the map data will be called from Google’s database. We will not be downloading any GIS data, it is all essentially in the cloud. The specific sources of the map data my be found in the lower right corner of the map.

Add Google Maps to your website
In order to add the full interactivity of google maps to your website you need to obtain an API Key. Most providers of this kind of data or service require a key in order to control who uses the data, how, and how much. This is the limitation of using someone else’s database versus using your own. To create your API key:

1. Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
2. Click the Services link from the left-hand menu.
3. Activate the Google Maps API v3 service.
4. Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.

Google provides a list of all of the commands you can implement into your map to accommodate usability.

This is what the code behind the placed map looks like.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Notice the lat, long reference. This particular example is centered on Sydney, Australia. The zoom function is self explanatory and is one of the functions listed above. Now that we have the base map it’s time to implement the twitter feeds.

Accessing the Twitter API
http://search.twitter.com/search.json?rpp=25&geocode=41.881256,-87.62485,20mi&callback=?
Broken down:
q=NATOChicago           search term
rpp=5                              the number of tweets to return
geocode                          return tweets within a given radius of a given lat,long

Beginning in 2009, tweets have had the capability of being georeferenced.

When placed into a browser, this is what is spit out:

According to this, the following are the key parameters we need:

  • object -> results (array) -> from_user
  • object -> results (array) -> location
  • object -> results (array) -> geo
  • object -> results (array) -> profile_image_url
  • object -> results (array) -> text

Displaying the Tweets
Now that we have the tweets, we need to map them.

//Function to get data from Twitter
ryan.getTwitter = function()
{
    removeLayer();
    bounds = new google.maps.LatLngBounds ();
    $.getJSON('http://search.twitter.com/search.json?rpp=25&amp;geocode='+map.getCenter().lat()+','+map.getCenter().lng()+',20mi&amp;callback=?',
        function(data)
        {
            $.each(data.results, function(i,item){
                if (item.geo == null)
                {
                trace(i + ' no geo data');
                }
                else
                {
                infoWindowContent = '<strong>'+item.from_user+'</strong><br>';
                infoWindowContent += '<img src="'+item.profile_image_url+'"></a><br>';
                infoWindowContent += ''+item.text+'';
ryan.createTwitterMarker(i,item.geo.coordinates[0],item.geo.coordinates[1],infoWindowContent,item.profile_image_url);
                }    
            });
        });
}

If the tweet is geocoded and info window will display the user name, profile pic and the text. However, most Twitter users have no opted into having their tweets tagged. We will address that later.

Mapping the Tweets

//Function to create Twitter Marker
createTwitterMarker = function(i,latitude,longitude,infoWindowContent,icon)
{
    var markerLatLng = new google.maps.LatLng(latitude,longitude);  

    //extent bounds for each Tweet and adjust map to fit to it
    bounds.extend(markerLatLng);
    map.fitBounds(bounds);
    var image = new google.maps.MarkerImage(icon, null, null, null, new google.maps.Size(32,32));

    twitter[i] = new google.maps.Marker({
        position: markerLatLng,
        map: map,
        title: infoWindowContent,
        icon: image
        });

    //add an onclick event
    google.maps.event.addListener(twitter[i], 'click', function() {
        infowindow.setContent(infoWindowContent);
        infowindow.open(map,twitter[i]);
        });
}

Creating a function to Geocode the results

The following code creates a variable to geocode the results and addresses the non-geotagged tweets by using the location value which is the city in which the tweet was received.

//Function to get data from Twitter
ryan.getTwitter = function()
{
    removeLayer();
    bounds = new google.maps.LatLngBounds ();
    $.getJSON('http://search.twitter.com/search.json?rpp=25&amp;geocode='+map.getCenter().lat()+','+map.getCenter().lng()+',20mi&amp;callback=?',
        function(data)
        {
            $.each(data.results, function(i,item){
                if (item.geo == null)
                {
                infoWindowContent = '<strong>'+item.from_user+'</strong><br>';
                infoWindowContent += '<img src="'+item.profile_image_url+'"></a><br>';
                infoWindowContent += ''+item.text+'';
                ryan.geocodeTwitter(i,item.location,infoWindowContent,item.profile_image_url);
                }
                else
                {
                infoWindowContent = '<strong>'+item.from_user+'</strong><br>';
                infoWindowContent += '<img src="'+item.profile_image_url+'"></a><br>';
                infoWindowContent += ''+item.text+'';
ryan.createTwitterMarker(i,item.geo.coordinates[0],item.geo.coordinates[1],infoWindowContent,item.profile_image_url);
                }    
            });
        });
}

Now the geocoder function:

ryan.geocodeTwitter = function(i,genLocation,infoWindowContent,icon) 
{
    var geocoderRequest = {address: genLocation}
    geocoder.geocode(geocoderRequest, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) 
        {
ryan.createTwitterMarker(i,results[0].geometry.location.Da,results[0].geometry.location.Ea,infoWindowContent,icon);
            trace(i + ' lat/long');
            trace(results[0].geometry.location);
        } 
        else 
        {
            trace("Geocode was not successful for the following reason: " + status);
        }
    });
}

The above function will run the geocode parameters of the tweets through Google’s geocoder function which is designed to place a marker on a map using the twittermarker function. The problem is that since most tweets are not geocoded this will result an a group of tweets stacked on top of one another.

Conclusion
My precedent studies touted the value of geocoded social media in times of natural disasters and man-made crises such as wars. However, given the lack of participation by most users, the value of this proposal is severely limited. Therefore tracking tweets may not be the best way to track larger movements of people. One may try tracking something which is more likely to have geocoordinates automatically assigned such as photos. Flickr would be a natural next step.

Advertisements

Loacation-based Services

In the beginning, there was Dodgeball.

No, not that Dodgeball. Dodgeball was a service to which you could text your location and other members of your service would receive the information with the potential of meeting up with you (or robbing your house if you’re not home). You could also receive information such as crushes, friends, friends’ friends and interesting venues nearby. Dodgeball, created in 2000, was purchased by Google in 2005 and discontinued in 2009, superseded by Google Latitude. One of the makers of Dodgeball went on to create Foursquare.

<p><a href=”http://vimeo.com/35640651″>Hi! I want to learn more about foursquare!</a> from <a href=”http://vimeo.com/foursquarehq”>foursquare</a&gt; on <a href=”http://vimeo.com”>Vimeo</a&gt;.</p>

Foursquare exists somewhere between reality and the virtual realm. While users can “check in” to physical venues, they can also earn “badges” for certain activities and if someone checks in to the same place more than anyone else they become the “Mayor” of that place. Foursquare has also worked out arrangements with businesses to offer specials to users, frequent visitors and especially the Mayor. Checking in is a manual process, developers citing technical issues such as the i-phone not allowing applications to run in the background as well as the drain on battery power that the GPS has. What is not mentioned on their site, however, are the privacy concerns. pleaserobme.com was one of the first websites to point out how exposed people were with geo-tagged social media technology.

Foursquare is making use of many of the technologies we’ve discussed in class and some we haven’t. PostGIS, MapBox, OpenStreetMap are used as well as Google’s s2 library to store cell IDs for geo-indexing and geonames.org dataset to reverse geocode addresses into coordinates.

Opting-in to share your location may be a nice option for some but as we have seen you don’t need to be a Foursquare member or opt-in to anything to unintentionally divulge your location with unintended results.

GIS, Twitter Trackers and Mash-ups

Crisis Mapping by ESRI

My initial interest in this subject stems from my Masters Project and a map I found of a social media tracker of Tahrir Square during the uprisings beginning January 25th, 2011. The map is no longer accessible. Official word from ESRI is that it was taken down because the protests are over. I did, however, find these active maps of Libya and the Occupy Movement (look for the OM to pick back up when the weather improves).

Libya Social Media Tracker

Occupy Movement Social Media Tracker

The possibilities of this technology is provocative. Imagine how these maps could be leveraged in the event of a natural disaster when information on the ground is limited and highly disorganized. It relies heavily on Volunteer Geographic Information. I’m not sure how useful this is if communications go down, anyone remember the Detroit/Toronto/New York blackout? This technology can only work if the information being tracked is geo-tagged. Tweets are and you can geo-tag photos and video. Some cameras automatically geo-tag photos.

Esri sent me this link which very roughly lays out how to recreate these maps.

Alternative Mash-ups

While the above information could be considered a mash-up, I was interested if any other similar mash-ups existed and especially if they were on platforms or used technology that was easier to work with or which may provide for a more forward starting point.

Twitter Mash-up

This application allows you to select which map supplier you want to use for the mash-up

Geo Chirp Google Maps Mash-up

This Mash-up is probably my favorite and actually does everything I wanted to do for the class so I’m not sure why I would recreate it. I am looking for alternatives. You can serch by tweet content, and distance from a location. The only change I would make is to move the tweet list to the sidebar.

Twittervision

This application is still in beta but I thought the flood of tweets onto the screen was awesome. Here is the Google apps page where you can find different api’s to mash-up with Google’s products.