visualmotive / rotary_example.html

Created May 23, 2011


    
    View rotary_example.html 
  
  
      rotary_example.html
    
    
        Raw
      
    
    File suppressed. Click to show.
  
  
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            33
            34
            35
            36
            37
            38
            39
            40
            41
            42
            43
            44
            45
            46
            47
            48
            49
            50
            51
            52
            53
            54
            55
            56
            57
            58
            59
            60
            61
            62
            63
            64
            65
            66
            67
            68
            69
            70
            71
            72
            73
            74
            75
            76
            77
            78
            79
            80
            81
            82
            83
            84
            85
            86
            87
            88
            89
            90
            91
            92
            93
            94
            95
            96
            97
            98
            99
            100
            101
            102
            103
            104
            105
            106
            107
            108
            109
            110
            111
            112
            113
            114
            115
            116
          
          
            <!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>