Merge pull request #637 from OpenGeoscience/pixelmap

Add a pixelmap feature

examples/pixelmap/example.json

@@ -0,0 +1,9 @@
+{
+  "path": "pixelmap",
+  "title": "Pixelmap feature",
+  "exampleCss": ["main.css"],
+  "exampleJs": ["main.js"],
+  "about": {
+    "text": "This example shows how to use a pixelmap feature.  The pixelmap colors areas based on an index derived from an image and some data per index."
+  }
+}

examples/pixelmap/index.jade

@@ -0,0 +1 @@
+extends ../common/templates/index.jade

examples/pixelmap/main.js

@@ -0,0 +1,89 @@
+/* globals utils */
+
+var debug = {};
+
+// Run after the DOM loads
+$(function () {
+  'use strict';
+
+  // Get the query parameters and set controls appropriately.  The query takes:
+  //   map: the png file used for the pixel map.
+  //   json: the json file for the starting state.
+  var query = utils.getQuery();
+  var pixelmapUrl = query.map || 'pixelmap.png';
+  var pixelmapJSON = query.json === undefined ? 'pixelmap.json' : query.json;
+  var map, mapParams, osm, osmParams, layer, pixelmap, pixelmapParams;
+  // Center the map on the United States
+  mapParams = {
+    node: '#map',
+    center: {x: -98.58333, y: 39.83333},
+    zoom: 4,
+    discreteZoom: false
+  };
+  map = geo.map(mapParams);
+  // Add a tile layer to the map
+  osm = map.createLayer('osm', osmParams);
+  // Create a feature layer that supports the pixelmap feature.  This can be
+  // overridden to use a specific renderer
+  layer = map.createLayer('feature', {
+    renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : undefined,
+    features: query.renderer ? undefined : ['pixelmap'],
+    opacity: 0.65
+  });
+  // Our default pixelmap covers a known geographic region
+  pixelmapParams = {
+    selectionAPI: true,
+    url: pixelmapUrl,
+    position: {ul: {x: -180, y: 71.471178}, lr: {x: -60, y: 13.759032}},
+    color: function (d, idx) {
+      // Always set index 0 to transparent.  Other indicies are set based on
+      // the data value
+      var color = {r: 0, g: 0, b: 0, a: 0};
+      if (idx && d && d.value) {
+        color = d.value === 'R' ? 'red' : 'blue';
+      }
+      return color;
+    }
+  };
+  pixelmap = layer.createFeature('pixelmap', pixelmapParams);
+  layer.draw();
+  // When the user left clicks, cycle through three states.  A right click
+  // clears the state.
+  pixelmap.geoOn(geo.event.feature.mouseclick, function (evt) {
+    var data = pixelmap.data();
+    if (!data) {
+      return;
+    }
+    if (data[evt.index] === undefined) {
+      data[evt.index] = {};
+    }
+    var val = data[evt.index].value;
+    if (evt.mouse.buttonsDown.left) {
+      var cycle = {'D': 'R', 'R': '', '': 'D'};
+      val = cycle[cycle[val] !== undefined ? val : ''];
+    } else if (evt.mouse.buttonsDown.right) {
+      val = '';
+    }
+    if (val !== data[evt.index].value) {
+      data[evt.index].value = val;
+      pixelmap.data(data).draw();
+    }
+  });
+  // Load the JSON file
+  if (pixelmapJSON) {
+    $.ajax({url: pixelmapJSON}).done(function (resp) {
+      pixelmap.data(resp);
+      pixelmap.draw();
+    });
+  }
+
+  // Expose some internal to make it easier to play with the example from the
+  // browser console.
+  debug.map = map;
+  debug.mapParams = mapParams;
+  debug.osm = osm;
+  debug.osmParams = osmParams;
+  debug.layer = layer;
+  debug.pixelmap = pixelmap;
+  debug.pixelmapParams = pixelmapParams;
+});

examples/pixelmap/pixelmap.json

@@ -0,0 +1 @@
+[{"name": "background"}, {"name": "Arizona", "value": "D"}, {"name": "Arkansas", "value": "R"}, {"name": "California", "value": "D"}, {"name": "Colorado", "value": "D"}, {"name": "Connecticut", "value": "D"}, {"name": "District of Columbia", "value": "D"}, {"name": "Georgia", "value": "R"}, {"name": "Hawaii", "value": "D"}, {"name": "Illinois", "value": "D"}, {"name": "Indiana", "value": "R"}, {"name": "Louisiana", "value": "R"}, {"name": "Minnesota", "value": "D"}, {"name": "Mississippi", "value": "R"}, {"name": "Montana", "value": "R"}, {"name": "New Mexico", "value": "D"}, {"name": "North Dakota", "value": "R"}, {"name": "Oklahoma", "value": "R"}, {"name": "Pennsylvania", "value": "D"}, {"name": "Tennessee", "value": "R"}, {"name": "Virginia", "value": "D"}, {"name": "Puerto Rico", "value": null}, {"name": "Delaware", "value": "D"}, {"name": "West Virginia", "value": "R"}, {"name": "Wisconsin", "value": "D"}, {"name": "Wyoming", "value": "R"}, {"name": "Alabama", "value": "R"}, {"name": "Alaska", "value": "R"}, {"name": "Florida", "value": "D"}, {"name": "Idaho", "value": "R"}, {"name": "Kansas", "value": "R"}, {"name": "Maryland", "value": "D"}, {"name": "New Jersey", "value": "D"}, {"name": "North Carolina", "value": "D"}, {"name": "South Carolina", "value": "R"}, {"name": "Washington", "value": "D"}, {"name": "Vermont", "value": "D"}, {"name": "Utah", "value": "R"}, {"name": "Iowa", "value": "D"}, {"name": "Kentucky", "value": "R"}, {"name": "Maine", "value": "D"}, {"name": "Massachusetts", "value": "D"}, {"name": "Michigan", "value": "D"}, {"name": "Missouri", "value": "R"}, {"name": "Nebraska", "value": "R"}, {"name": "Nevada", "value": "D"}, {"name": "New Hampshire", "value": "D"}, {"name": "New York", "value": "D"}, {"name": "Ohio", "value": "D"}, {"name": "Oregon", "value": "D"}, {"name": "Rhode Island", "value": "D"}, {"name": "South Dakota", "value": "R"}, {"name": "Texas", "value": "R"}]

src/canvas/index.js

@@ -3,7 +3,8 @@
  */
 module.exports = {
   canvasRenderer: require('./canvasRenderer'),
-  quadFeature: require('./quadFeature'),
   heatmapFeature: require('./heatmapFeature'),
+  pixelmapFeature: require('./pixelmapFeature'),
+  quadFeature: require('./quadFeature'),
   tileLayer: require('./tileLayer')
 };

src/canvas/object.js

@@ -24,6 +24,12 @@ var canvas_object = function (arg) {
   var m_this = this,
       s_draw = this.draw;
 
+  /**
+   * This must be overridden by any feature that needs to render.
+   */
+  this._renderOnCanvas = function () {
+  };
+
   ////////////////////////////////////////////////////////////////////////////
   /**
   *  Redraw the object.

src/canvas/pixelmapFeature.js

@@ -0,0 +1,34 @@
+var inherit = require('../inherit');
+var registerFeature = require('../registry').registerFeature;
+var pixelmapFeature = require('../pixelmapFeature');
+
+//////////////////////////////////////////////////////////////////////////////
+/**
+ * Create a new instance of class pixelmapFeature
+ *
+ * @class geo.canvas.pixelmapFeature
+ * @param {Object} arg Options object
+ * @extends geo.pixelmapFeature
+ * @returns {canvas_pixelmapFeature}
+ */
+//////////////////////////////////////////////////////////////////////////////
+var canvas_pixelmapFeature = function (arg) {
+  'use strict';
+
+  if (!(this instanceof canvas_pixelmapFeature)) {
+    return new canvas_pixelmapFeature(arg);
+  }
+  pixelmapFeature.call(this, arg);
+
+  var object = require('./object');
+  object.call(this);
+
+  this._init(arg);
+  return this;
+};
+
+inherit(canvas_pixelmapFeature, pixelmapFeature);
+
+// Now register it
+registerFeature('canvas', 'pixelmap', canvas_pixelmapFeature);
+module.exports = canvas_pixelmapFeature;

src/event.js

@@ -367,6 +367,18 @@ geo_event.feature = {
   brush:      'geo_feature_brush'
 };
 
+////////////////////////////////////////////////////////////////////////////
+/**
+ * These events are triggered by the pixelmap feature.
+ * @namespace geo.event.pixelmap
+ */
+////////////////////////////////////////////////////////////////////////////
+geo_event.pixelmap = {
+  /* The image associated with the pixel map url has been prepared and rendered
+   * once. */
+  prepared: 'geo_pixelmap_prepared'
+};
+
 ////////////////////////////////////////////////////////////////////////////
 /**
  * These events are triggered by the camera when it's internal state is

src/imageTile.js

@@ -70,8 +70,8 @@ module.exports = (function () {
       if (!this._image) {
         this._image = new Image(this.size.x, this.size.y);
         // Only set the crossOrigin parameter if this is going across origins.
-        if (this._url.indexOf(':') >= 0 && this._url.indexOf('/') >= 0 &&
-            this._url.indexOf(':') < this._url.indexOf('/')) {
+        if (this._url.indexOf(':') >= 0 &&
+            this._url.indexOf('/') === this._url.indexOf(':') + 1) {
           this._image.crossOrigin = this._cors;
         }
         defer = new $.Deferred();

src/index.js

@@ -46,6 +46,7 @@ module.exports = $.extend({
   geo_action: require('./action'),
   geomFeature: require('./geomFeature'),
   graphFeature: require('./graphFeature'),
+  heatmapFeature: require('./heatmapFeature'),
   imageTile: require('./imageTile'),
   jsonReader: require('./jsonReader'),
   layer: require('./layer'),
@@ -58,7 +59,7 @@ module.exports = $.extend({
   pointFeature: require('./pointFeature'),
   polygonFeature: require('./polygonFeature'),
   quadFeature: require('./quadFeature'),
-  heatmapFeature: require('./heatmapFeature'),
+  pixelmapFeature: require('./pixelmapFeature'),
   renderer: require('./renderer'),
   sceneObject: require('./sceneObject'),
   tile: require('./tile'),