visualmotive/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>
	<!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>