Create layers based on a list of features.

examples/choropleth/main.js

@@ -31,11 +31,13 @@ $(function () {
  'osm'
  );
 
- // Create a gl feature layer
- var vglLayer = map.createLayer(
+ // Create a feature layer. We could either ask for a layer via a specific
+ // render {renderer: 'vgl'} or for a layer that supports our feature
+ // {features: ['choropleth']}.
+ var choroplethLayer = map.createLayer(
  'feature',
  {
- renderer: 'vgl'
+ features: ['choropleth']
  }
  );
 
@@ -57,7 +59,7 @@ $(function () {
  });
 
  var choropleth =
- makeChoropleth(geoData.features, mockScalarData, vglLayer);
+ makeChoropleth(geoData.features, mockScalarData, choroplethLayer);
 
  setTimeout(function () {
  var mockScalarData2 = geoData

examples/contour/main.js

@@ -66,27 +66,27 @@ $(function () {
  'osm'
  );
 
- // Create a gl feature layer
- var vglLayer = map.createLayer(
+ // Create a feature layer that supports contours
+ var contourLayer = map.createLayer(
  'feature',
  {
- renderer: 'vgl'
+ features: ['contour']
  }
  );
 
  // Load the data
  $.ajax({
  url: '../../data/oahu.json',
  success: function (data) {
- var contour = makeContour(data, vglLayer);
+ var contour = makeContour(data, contourLayer);
  contour.draw();
  /* After 10 second, load a denser data set */
  window.setTimeout(function () {
  $.ajax({
  url: '../../data/oahu-dense.json',
  success: function (data) {
- vglLayer.deleteFeature(contour);
- contour = makeContour(data, vglLayer, contour);
+ contourLayer.deleteFeature(contour);
+ contour = makeContour(data, contourLayer, contour);
  contour.draw();
  }
  });

examples/deepzoom/main.js

@@ -45,7 +45,6 @@ $(function () {
 
  // Add the osm layer with a custom tile url
  map.createLayer(
- 'tiledFish',
- {renderer: 'vgl'}
+ 'tiledFish'
  );
 });

examples/dynamicData/main.js

@@ -19,7 +19,9 @@ $(function () {
  baseUrl: 'http://otile1.mqcdn.com/tiles/1.0.0/sat'
  });
 
- // Add a feature layer with a D3 renderer
+ // Add a feature layer with a D3 renderer. We could, instead, ask for any
+ // renderer that supports point features, like so:
+ // var features = map.createLayer('feature', {features: ['point']});
  var features = map.createLayer('feature', {renderer: 'd3'});
 
  var numberOfFeatures = 200;

examples/geoJSON/main.js

@@ -20,8 +20,9 @@ $(function () {
  }
  );
 
- // Create a gl layer to put the features in
- var layer = map.createLayer('feature');
+ // Create a layer to put the features in. We could need point, line, and
+ // polygon features, so ask for a layer that supports all of them.
+ var layer = map.createLayer('feature', {features: ['point', 'line', 'polygon']});
  map.draw();
 
  // Initialize the json reader.

examples/heatmap/main.js

@@ -13,7 +13,7 @@ $(function () {
  var layer, heatmap, points, datapoints;
 
  var layerOptions = {
- renderer: 'canvas',
+ features: ['heatmap'],
  opacity: 0.75
  };
  var heatmapOptions = {

examples/hurricanes/main.js

@@ -369,8 +369,8 @@ $(function () {
  }
  );
 
- // Create a feature layer to draw on
- layer = map.createLayer('feature');
+ // Create a feature layer to draw on.
+ layer = map.createLayer('feature', {features: [geo.lineFeature.capabilities.multicolor]});
 
  // Create a line feature
  feature = layer.createFeature('line', {selectionAPI: true});

examples/quads/main.js

@@ -16,7 +16,8 @@ $(function () {
  zoom: 4
  });
  var layer = map.createLayer('feature', {
- renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : 'vgl'
+ renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : undefined,
+ features: query.renderer ? undefined : ['quad']
  });
  var quads = layer.createFeature('quad', {selectionAPI: true});
  var previewImage = new Image();

examples/reprojection/main.js

@@ -126,7 +126,7 @@ $(function () {
  }
  // Set the tile layer defaults to use the specified renderer and opacity
  var layerParams = {
- renderer: 'vgl',
+ features: [geo.quadFeature.capabilities.imageFull],
  zIndex: 0,
  gcs: 'EPSG:3857',
  attribution: $('#url-list [value="' + $('#layer-url').val() + '"]').attr(

examples/tiles/index.jade

@@ -4,7 +4,8 @@ block append mainContent
  div#controls
  .form-group(title="Tiles can be drawn using WebGL, Canvas, HTML, or SVG. WebGL is generally the fastest and HTML the most compatible.")
  label(for="map-renderer") Renderer
- select#map-renderer.mapparam(param-name="renderer", placeholder="vgl")
+ select#map-renderer.mapparam(param-name="renderer", placeholder="default")
+ option(value="default") Default
  option(value="vgl") VGL (WebGL)
  option(value="canvas") Canvas
  option(value="d3") SVG (d3)

examples/tiles/main.js

@@ -29,6 +29,7 @@
  * projection: 'parallel' or 'projection' for the camera projection.
  * renderer: 'vgl' (default), 'canvas', 'd3', 'null', or 'html'. This picks
  * the renderer for map tiles. null or html uses the html renderer.
+ * 'default' uses the default renderer for the user's platform.
  * round: 'round' (default), 'floor', 'ceil'.
  * subdomains: a comma-separated string of subdomains to use in the {s} part
  * of the url parameter. If there are no commas in the string, each letter
@@ -104,7 +105,7 @@ $(function () {
  };
  // Set the tile layer defaults to use the specified renderer and opacity
  var layerParams = {
- renderer: query.renderer || 'vgl',
+ renderer: query.renderer && query.renderer !== 'default' ? query.renderer : undefined,
  opacity: query.opacity || '1',
  /* Always use a larger cache so if keepLower is changed, we still have a
  * big enough cache. */
@@ -340,6 +341,9 @@ $(function () {
  if (layerParams.renderer === 'html') {
  layerParams.renderer = null;
  }
+ if (layerParams.renderer === 'default') {
+ layerParams.renderer = undefined;
+ }
  map.deleteLayer(osmLayer);
  osmLayer = map.createLayer('osm', layerParams);
  tileDebug.osmLayer = osmLayer;

examples/transitions/main.js

@@ -20,7 +20,7 @@ $(function () {
  // Add an OSM layer
  map.createLayer('osm', {
  baseUrl: 'http://otile1.mqcdn.com/tiles/1.0.0/map',
- renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : 'vgl'
+ renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : undefined
  });
 
  // Bind button clicks to map transitions

examples/vectors/main.js

@@ -18,7 +18,7 @@ $(function () {
 
  // Create a gl feature layer
  var layer = map.createLayer(
- 'feature', { renderer: 'd3' }
+ 'feature', {features: ['vector']}
  );
 
  var routes = [

src/canvas/quadFeature.js

@@ -143,5 +143,10 @@ var canvas_quadFeature = function (arg) {
 inherit(canvas_quadFeature, quadFeature);
 
 // Now register it
-registerFeature('canvas', 'quad', canvas_quadFeature);
+var capabilities = {};
+capabilities[quadFeature.capabilities.color] = false;
+capabilities[quadFeature.capabilities.image] = true;
+capabilities[quadFeature.capabilities.imageFull] = false;
+
+registerFeature('canvas', 'quad', canvas_quadFeature, capabilities);
 module.exports = canvas_quadFeature;

src/d3/lineFeature.js

@@ -130,6 +130,11 @@ var d3_lineFeature = function (arg) {
 
 inherit(d3_lineFeature, lineFeature);
 
-registerFeature('d3', 'line', d3_lineFeature);
+// Now register it
+var capabilities = {};
+capabilities[lineFeature.capabilities.basic] = true;
+capabilities[lineFeature.capabilities.multicolor] = false;
+
+registerFeature('d3', 'line', d3_lineFeature, capabilities);
 
 module.exports = d3_lineFeature;

src/d3/quadFeature.js

@@ -228,5 +228,10 @@ var d3_quadFeature = function (arg) {
 inherit(d3_quadFeature, quadFeature);
 
 // Now register it
-registerFeature('d3', 'quad', d3_quadFeature);
+var capabilities = {};
+capabilities[quadFeature.capabilities.color] = true;
+capabilities[quadFeature.capabilities.image] = true;
+capabilities[quadFeature.capabilities.imageFull] = false;
+
+registerFeature('d3', 'quad', d3_quadFeature, capabilities);
 module.exports = d3_quadFeature;

src/gl/lineFeature.js

@@ -398,6 +398,11 @@ var gl_lineFeature = function (arg) {
 inherit(gl_lineFeature, lineFeature);
 
 // Now register it
-registerFeature('vgl', 'line', gl_lineFeature);
+var capabilities = {};
+capabilities[lineFeature.capabilities.basic] = true;
+capabilities[lineFeature.capabilities.multicolor] = true;
+
+// Now register it
+registerFeature('vgl', 'line', gl_lineFeature, capabilities);
 
 module.exports = gl_lineFeature;

src/gl/quadFeature.js

@@ -392,5 +392,10 @@ var gl_quadFeature = function (arg) {
 inherit(gl_quadFeature, quadFeature);
 
 // Now register it
-registerFeature('vgl', 'quad', gl_quadFeature);
+var capabilities = {};
+capabilities[quadFeature.capabilities.color] = true;
+capabilities[quadFeature.capabilities.image] = true;
+capabilities[quadFeature.capabilities.imageFull] = true;
+
+registerFeature('vgl', 'quad', gl_quadFeature, capabilities);
 module.exports = gl_quadFeature;

src/layer.js

@@ -2,6 +2,7 @@ var inherit = require('./inherit');
 var sceneObject = require('./sceneObject');
 var feature = require('./feature');
 var checkRenderer = require('./registry').checkRenderer;
+var rendererForFeatures = require('./registry').rendererForFeatures;
 
 //////////////////////////////////////////////////////////////////////////////
 /**
@@ -30,11 +31,11 @@ var layer = function (arg) {
  var geo_event = require('./event');
  var camera = require('./camera');
 
- //////////////////////////////////////////////////////////////////////////////
+ ////////////////////////////////////////////////////////////////////////////
  /**
  * @private
  */
- //////////////////////////////////////////////////////////////////////////////
+ ////////////////////////////////////////////////////////////////////////////
  var m_this = this,
  s_exit = this._exit,
  m_id = arg.id === undefined ? layer.newLayerId() : arg.id,
@@ -44,7 +45,7 @@ var layer = function (arg) {
  m_canvas = null,
  m_renderer = null,
  m_initialized = false,
- m_rendererName = arg.renderer === undefined ? 'vgl' : arg.renderer,
+ m_rendererName = arg.renderer === undefined ? rendererForFeatures(arg.features) : arg.renderer,
  m_dataTime = timestamp(),
  m_updateTime = timestamp(),
  m_sticky = arg.sticky === undefined ? true : arg.sticky,

src/lineFeature.js

@@ -244,5 +244,12 @@ lineFeature.create = function (layer, spec) {
  return feature.create(layer, spec);
 };
 
+lineFeature.capabilities = {
+ /* support for solid-colored, constant-width lines */
+ basic: 'line.basic',
+ /* support for lines that very in width and color */
+ multicolor: 'line.multicolor'
+};
+
 inherit(lineFeature, feature);
 module.exports = lineFeature;

src/mapInteractor.js

@@ -24,6 +24,7 @@ var mapInteractor = function (args) {
  var geo_event = require('./event');
  var throttle = require('./util').throttle;
  var debounce = require('./util').debounce;
+ var quadFeature = require('./quadFeature');
 
  var m_options = args || {},
  m_this = this,
@@ -685,9 +686,8 @@ var mapInteractor = function (args) {
  m_this.map().deleteLayer(m_selectionLayer);
  m_selectionLayer = null;
  }
- // Create a feature layer and plane feature to show the selection bounds
- m_selectionLayer = m_this.map().createLayer('feature', {renderer: 'd3'});
-
+ m_selectionLayer = m_this.map().createLayer(
+ 'feature', {features: [quadFeature.capabilities.color]});
  m_selectionQuad = m_selectionLayer.createFeature(
  'quad', {gcs: m_this.map().gcs()});
  m_selectionQuad.style({

src/osmLayer.js

@@ -5,6 +5,7 @@ module.exports = (function () {
  var inherit = require('./inherit');
  var tileLayer = require('./tileLayer');
  var registry = require('./registry');
+ var quadFeature = require('./quadFeature');
 
  //////////////////////////////////////////////////////////////////////////////
  /**
@@ -80,6 +81,9 @@ module.exports = (function () {
  });
 
  inherit(osmLayer, tileLayer);
- registry.registerLayer('osm', osmLayer);
+ /* By default, ask to support image quads. If the user needs full
+ * reprojection, they will need to require the
+ * quadFeature.capabilities.imageFull feature */
+ registry.registerLayer('osm', osmLayer, [quadFeature.capabilities.image]);
  return osmLayer;
 })();

src/quadFeature.js

@@ -465,5 +465,14 @@ quadFeature.create = function (layer, spec) {
  return feature.create(layer, spec);
 };
 
+quadFeature.capabilities = {
+ /* support for solid-colored quads */
+ color: 'quad.color',
+ /* support for parallelogram images */
+ image: 'quad.image',
+ /* support for arbitrary quad images */
+ imageFull: 'quad.imageFull'
+};
+
 inherit(quadFeature, feature);
 module.exports = quadFeature;