Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Rotary Maps Example
<!DOCTYPE html>
<style type="text/css">
#map { width: 640px; height: 480px; border: 1px solid #000; }
<script src=""></script>
<script type="text/javascript" src=""></script>
<script src=""></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[]) {
seen[] = true;
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 = "";
url: url,
dataType: "jsonp",
jsonp: "_callback",
jsonpCallback: "__RM_callback",
success: function(data) {
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.
window.setInterval(get, 1000*60);
<h1>Example with USGS Earthquake data</h1>
<div id="map"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.