Browse files

Merge pull request #1 from toddtreece/master

Shipments & Orders added to map example
  • Loading branch information...
2 parents 6ae4731 + 1f953cc commit 15a8dcb317c929bbdb521488d9033e2c86325f5e @benlemasurier committed Jun 7, 2011
Showing with 135 additions and 3 deletions.
  1. +114 −3 example/js/blode_map.js
  2. +21 −0 example/map.html
View
117 example/js/blode_map.js
@@ -9,18 +9,31 @@ var BlodeMap = Class.create({
this._foreground = this.create_canvas(this._container, 1);
this._heatmap_layer = null;
this._heatmap = null;
+ this.hits_enabled = true;
this.party_mode = false;
this.crosshair_enabled = false;
this.heatmap_enabled = false;
+ this.orders_enabled = false;
+ this.shipments_enabled = false;
this._point_size = 2;
this._point_color = "rgba(255, 0, 0, 0.5)";
this._crosshair_color = "rgba(0, 0, 0, 0.5)";
this._point_buffer = {};
this._point_buffer_size = 1000;
+ this._shipment_color = "rgba(0, 0, 255, 1)";
+ this._shipment_buffer = [];
+ this._shipment_buffer_size = 600;
+ this._order_color = "rgba(0, 255, 0, 1)";
+ this._order_buffer = [];
+ this._order_buffer_size = 600;
- // prime the point buffer
- this.initialize_point_buffer();
+ this._sparkfun_lat = 40.064897;
+ this._sparkfun_long = -105.209941;
+
+
+ // prime the buffers
+ this.initialize_buffers();
// setup heatmap
this.initialize_heatmap();
@@ -30,11 +43,17 @@ var BlodeMap = Class.create({
this.listen();
},
- initialize_point_buffer: function() {
+ initialize_buffers: function() {
this._point_buffer = { max: 1, data: [] };
for(var i = 0; i < this._point_buffer_size; i++)
this._point_buffer.data[i] = {x: 0, y: 0, count: 0};
+
+ for(var i = 0; i < this._shipment_buffer_size; i++)
+ this._shipment_buffer[i] = {x: 0, y: 0};
+
+ for(var i = 0; i < this._order_buffer_size; i++)
+ this._order_buffer[i] = {x: 0, y: 0};
},
initialize_heatmap: function() {
@@ -57,6 +76,10 @@ var BlodeMap = Class.create({
var ip = message.evalJSON().remote_addr;
new Ajax.JSONRequest(this._geo_url + ip, {
});
+ } else if(message.include('order.geocode')) {
+ this.log_order(message.evalJSON(),'order');
+ } else if(message.include('shipment.geocode')) {
+ this.log_order(message.evalJSON(),'shipment');
}
}.bind(this));
},
@@ -106,6 +129,21 @@ var BlodeMap = Class.create({
return;
}
+ if(this.orders_enabled)
+ this.render_orders('order');
+
+ if(this.shipments_enabled)
+ this.render_orders('shipment');
+
+ if(this.hits_enabled)
+ this.render_hits();
+
+ },
+
+ render_hits: function() {
+
+ var context = this._foreground.getContext('2d');
+
for(i = 0, j = this._point_buffer_size; i < j; i++) {
var point_size = (i == 0) ? this._point_size * 2 : this._point_size;
@@ -128,6 +166,7 @@ var BlodeMap = Class.create({
context.closePath();
context.fill();
}
+
},
render_crosshair: function() {
@@ -147,6 +186,48 @@ var BlodeMap = Class.create({
context.stroke();
},
+ render_orders: function(type) {
+ var context = this._foreground.getContext('2d');
+ var buffer, buffer_size, color;
+
+ if(type == 'shipment') {
+ buffer = this._shipment_buffer;
+ buffer_size = this._shipment_buffer_size;
+ color = this._shipment_color;
+ } else {
+ buffer = this._order_buffer;
+ buffer_size = this._order_buffer_size;
+ color = this._order_color;
+ }
+
+ var minX = -180,
+ minY = -90,
+ maxX = 180,
+ maxY = 90;
+
+ var x = (this._foreground.width * (this._sparkfun_long - minX)) / (maxX - minX),
+ y = this._foreground.height - ((this._foreground.height * (this._sparkfun_lat - minY)) / (maxY - minY));
+
+ for(var i = 0; i < buffer_size; i++) {
+ if(buffer[i].x == 0 && buffer[i].y == 0)
+ continue;
+
+ context.beginPath();
+
+ if(this.party_mode)
+ context.strokeStyle = this.random_color();
+ else
+ context.strokeStyle = color;
+
+ context.moveTo(x,y); //sparkfun's location
+ context.lineTo(buffer[i].x, buffer[i].y);
+
+ context.closePath();
+ context.stroke();
+
+ }
+ },
+
render_heatmap: function() {
var max = 0;
this._point_buffer.data.each(function(point) {
@@ -158,6 +239,36 @@ var BlodeMap = Class.create({
this._heatmap.store.setDataSet(this._point_buffer);
},
+ log_order: function(geo_data,type) {
+ var context = this._foreground.getContext('2d');
+ var minX = -180,
+ minY = -90,
+ maxX = 180,
+ maxY = 90;
+
+ var lon = geo_data.long,
+ lat = geo_data.lat;
+
+ if(lon == 0 || lat == 0)
+ return;
+
+ var x = (this._foreground.width * (lon - minX)) / (maxX - minX),
+ y = this._foreground.height - ((this._foreground.height * (lat - minY)) / (maxY - minY));
+
+ var point = {x: x, y: y};
+
+ if(type == 'shipment') {
+ this._shipment_buffer.unshift(point);
+ this._shipment_buffer = this._shipment_buffer.slice(0, -1);
+ } else if(type == 'order') {
+ this._order_buffer.unshift(point);
+ this._order_buffer = this._order_buffer.slice(0, -1);
+ }
+
+ this.render_foreground();
+ },
+
+
log_visitor: function(geo_data) {
var context = this._foreground.getContext('2d');
var minX = -180,
View
21 example/map.html
@@ -25,6 +25,10 @@
window.blode_map._point_size--;
}
+ $('hits').onclick = function() {
+ window.blode_map.hits_enabled = (window.blode_map.hits_enabled) ? false : true;
+ }
+
$('party_mode').onclick = function() {
window.blode_map.party_mode = (window.blode_map.party_mode) ? false : true;
}
@@ -33,6 +37,14 @@
window.blode_map.crosshair_enabled = (window.blode_map.crosshair_enabled) ? false : true;
}
+ $('orders').onclick = function() {
+ window.blode_map.orders_enabled = (window.blode_map.orders_enabled) ? false : true;
+ }
+
+ $('shipments').onclick = function() {
+ window.blode_map.shipments_enabled = (window.blode_map.shipments_enabled) ? false : true;
+ }
+
$('heatmap').onclick = function() {
if(window.blode_map.heatmap_enabled) {
window.blode_map.heatmap_enabled = false;
@@ -52,6 +64,9 @@
<div class="point_size">
point size: [ <span id="size_up">+</span> / <span id="size_down">-</span> ]
</div>
+ <div class="hits">
+ hits: [ <input id="hits" type="checkbox" checked /> ]
+ </div>
<div class="crosshair">
crosshair: [ <input id="crosshair" type="checkbox" /> ]
</div>
@@ -61,6 +76,12 @@
<div class="heatmap">
heatmap: [ <input id="heatmap" type="checkbox" /> ]
</div>
+ <div class="orders">
+ orders: [ <input id="orders" type="checkbox" /> ]
+ </div>
+ <div class="shipments">
+ shipments: [ <input id="shipments" type="checkbox" /> ]
+ </div>
</p>
</body>
</html>

0 comments on commit 15a8dcb

Please sign in to comment.