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: ['line.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: ['quad.img-full'],
       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,5 @@ var canvas_quadFeature = function (arg) {
 inherit(canvas_quadFeature, quadFeature);
 
 // Now register it
-registerFeature('canvas', 'quad', canvas_quadFeature);
+registerFeature('canvas', 'quad', canvas_quadFeature, {clr: false, img: true, 'img-full': false});
 module.exports = canvas_quadFeature;

src/d3/lineFeature.js

@@ -130,6 +130,6 @@ var d3_lineFeature = function (arg) {
 
 inherit(d3_lineFeature, lineFeature);
 
-registerFeature('d3', 'line', d3_lineFeature);
+registerFeature('d3', 'line', d3_lineFeature, {basic: true, multicolor: false});
 
 module.exports = d3_lineFeature;

src/d3/quadFeature.js

@@ -228,5 +228,5 @@ var d3_quadFeature = function (arg) {
 inherit(d3_quadFeature, quadFeature);
 
 // Now register it
-registerFeature('d3', 'quad', d3_quadFeature);
+registerFeature('d3', 'quad', d3_quadFeature, {clr: true, img: true, 'img-full': false});
 module.exports = d3_quadFeature;

src/gl/lineFeature.js

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

src/gl/quadFeature.js

@@ -392,5 +392,5 @@ var gl_quadFeature = function (arg) {
 inherit(gl_quadFeature, quadFeature);
 
 // Now register it
-registerFeature('vgl', 'quad', gl_quadFeature);
+registerFeature('vgl', 'quad', gl_quadFeature, {clr: true, img: true, 'img-full': true});
 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/mapInteractor.js

@@ -685,11 +685,9 @@ 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_selectionQuad = m_selectionLayer.createFeature(
-          'quad', {gcs: m_this.map().gcs()});
+        m_selectionLayer = m_this.map().createLayer(
+          'feature', {features: ['quad.clr']});
+        m_selectionQuad = m_selectionLayer.createFeature('quad');
         m_selectionQuad.style({
           opacity: 0.25,
           color: {r: 0.3, g: 0.3, b: 0.3}

src/osmLayer.js

@@ -80,6 +80,8 @@ 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 quad.img-full feature */
+  registry.registerLayer('osm', osmLayer, ['quad.img']);
   return osmLayer;
 })();