<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment