Permalink
Browse files

crosshair option, cleanup, a few comments

  • Loading branch information...
1 parent 1e512c2 commit 6ae4731ad84593885cb43f8852e66b3a1ef57e9e @benlemasurier committed Jun 2, 2011
Showing with 49 additions and 16 deletions.
  1. +42 −16 example/js/blode_map.js
  2. +7 −0 example/map.html
View
@@ -10,10 +10,12 @@ var BlodeMap = Class.create({
this._heatmap_layer = null;
this._heatmap = null;
this.party_mode = false;
+ this.crosshair_enabled = false;
this.heatmap_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;
@@ -96,31 +98,55 @@ var BlodeMap = Class.create({
// clear layer
context.clearRect(0, 0, this._foreground.width, this._foreground.height);
+ if(this.crosshair_enabled)
+ this.render_crosshair();
+
if(this.heatmap_enabled) {
this.render_heatmap();
return;
}
for(i = 0, j = this._point_buffer_size; i < j; i++) {
- if(this._point_buffer.data[i].x != 0 && this._point_buffer.data[i].y != 0) {
- // set layer color
- if(this.party_mode)
- context.fillStyle = this.random_color();
- else
- context.fillStyle = this._point_color;
-
- var point_size = (i == 0) ? this._point_size * 2 : this._point_size;
- context.beginPath();
- context.arc(this._point_buffer.data[i].x - (point_size / 2),
- this._point_buffer.data[i].y - (point_size / 2),
- point_size,
- 0, Math.PI * 2, true);
- context.closePath();
- context.fill();
- }
+ var point_size = (i == 0) ? this._point_size * 2 : this._point_size;
+
+ // don't log render empty data
+ if(this._point_buffer.data[i].x == 0 && this._point_buffer.data[i].y == 0)
+ continue;
+
+ // set layer color
+ if(this.party_mode)
+ context.fillStyle = this.random_color();
+ else
+ context.fillStyle = this._point_color;
+
+ // draw circle
+ context.beginPath();
+ context.arc(this._point_buffer.data[i].x,
+ this._point_buffer.data[i].y,
+ point_size,
+ 0, Math.PI * 2, true);
+ context.closePath();
+ context.fill();
}
},
+ render_crosshair: function() {
+ var context = this._foreground.getContext('2d');
+
+ context.beginPath();
+ context.strokeStyle = this._crosshair_color;
+ context.moveTo(this._point_buffer.data[0].x, this._point_buffer.data[0].y);
+ context.lineTo(this._point_buffer.data[0].x, 0); // top
+ context.moveTo(this._point_buffer.data[0].x, this._point_buffer.data[0].y);
+ context.lineTo(this._point_buffer.data[0].x, this._background.height); // bottom
+ context.moveTo(this._point_buffer.data[0].x, this._point_buffer.data[0].y);
+ context.lineTo(0, this._point_buffer.data[0].y);
+ context.moveTo(this._point_buffer.data[0].x, this._point_buffer.data[0].y);
+ context.lineTo(this._background.width, this._point_buffer.data[0].y);
+ context.closePath();
+ context.stroke();
+ },
+
render_heatmap: function() {
var max = 0;
this._point_buffer.data.each(function(point) {
View
@@ -29,6 +29,10 @@
window.blode_map.party_mode = (window.blode_map.party_mode) ? false : true;
}
+ $('crosshair').onclick = function() {
+ window.blode_map.crosshair_enabled = (window.blode_map.crosshair_enabled) ? false : true;
+ }
+
$('heatmap').onclick = function() {
if(window.blode_map.heatmap_enabled) {
window.blode_map.heatmap_enabled = false;
@@ -48,6 +52,9 @@
<div class="point_size">
point size: [ <span id="size_up">+</span> / <span id="size_down">-</span> ]
</div>
+ <div class="crosshair">
+ crosshair: [ <input id="crosshair" type="checkbox" /> ]
+ </div>
<div class="party">
party mode: [ <input id="party_mode" type="checkbox" /> ]
</div>

0 comments on commit 6ae4731

Please sign in to comment.