rotary_example.html

## rotary_example.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>