public
Last active

Rotary Maps Example

  • Download Gist
rotary_example.html
HTML
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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.