Rotary Maps Example

rotary_example.html
HTML
      
        
          
          
            <!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#map { width: 640px; height: 480px; border: 1px solid #000; }
</style> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script src="https://github.com/thumbtack/rotarymaps/raw/master/release/rotarymaps_min.0.2.js"></script> 
<script> 
$(function() {
    // rename for convenience
    var R = RotaryMaps;
 
    // A datasource will store data points for rendering later.
    // Data points are usually of the form:
    //  {
    //    "lat": <float>,
    //    "lng": <float>,
    //    "val": <float>
    //  }
    var datasource = new R.Datasource(),
 
    // A layer is the view in Rotary's MVC architecture. We'll describe
    // here how to render the data to the screen.
    layer = new R.Bubble({
        // Scale circles by the magnitude of the quakes they represent;
        // use area-scaled scaling.
        radius: function(item) {
             return Math.sqrt(15 * item.val);
        },
        fade_in: 2000,
        fade_out: {
            after: 1000 * 60 * 10,
            duration: 1000 * 60 * 50
        },
        circle: {
            fill: "#86B5DF",
            "stroke-width": 0.5,
            emboss: true
        }
    });
 
    // When new data is fetched from the remote server, format into
    // individual data objects and push them into the datasource.
    var seen = {};
    function process (items) {
        for (var key in items) {
            var item = items[key];
            if (!seen[item.link]) {
                seen[item.link] = true;
                datasource.push({
                    lat: item["georss:point"].split(" ")[0],
                    lng: item["georss:point"].split(" ")[1],
                    val: 1
                });
            }
        }
    };
 
    // Use Yahoo Pipes to convert the USGS XML feed to JSONP.
    // This function will fetch the latest earthquake data.
    function get(type) {
        var url = "http://pipes.yahoo.com/pipes/pipe.run?_id=62e77025a1d7e878667162803de585da&_render=json";
        $.ajax({
            url: url,
            dataType: "jsonp",
            jsonp: "_callback",
            jsonpCallback: "__RM_callback",
            success: function(data) {
                process(data.value.items);
            },
            error: function() {
                alert("There was an error collecting USGS data.");
            }
        });
    };
 
    // Build the Google Map using the GMaps v3 API and center
    // it on the USA
    var gmap = new google.maps.Map(document.getElementById("map"), {
        zoom: 4,
        center: new google.maps.LatLng(38, -97),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    });
 
    // Rotary Maps comes packaged with a couple of default map styles
    // that are suited for display with data overlays. They retain essential
    // geography while making cities and roads less visibly prominent.
    R.setGMapStyle(gmap, 'Subtle');
 
    // Pass the Google Map to Rotary Maps
    var rmap = new R.GMap(gmap, {
        width: 640,
        height: 480
    });
 
    // Now wire up all the components: attach the datasource and layer
    // with a Realtime controller. This will update the layer whenever
    // new data is added to the datasouce.
    rmap.attach(new R.Realtime(rmap, datasource, layer));
 
    // Fetch data to fill the map.
    get();
    window.setInterval(get, 1000*60);
});
</script> 
</head> 
 
<body> 
    <h1>Example with USGS Earthquake data</h1> 
    <div id="map"></div> 
</body> 
</html> 

          
        

    
Please sign in to comment on this gist.
public visualmotive / rotary_example.html Last active 2011-05-24

public

visualmotive / rotary_example.html

Last active 2011-05-24
