diff --git a/examples/layer-group.html b/examples/layer-group.html new file mode 100644 index 0000000000..3b966c954e --- /dev/null +++ b/examples/layer-group.html @@ -0,0 +1,99 @@ + + + + + + + + + + + Layer group example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+ +

Layer group example

+

Example of a map with layer group.

+
+

See the layer-group.js source to see how this is done.

+
+
tilejson, input, bind, group, layergroup
+
+ +
+
Click on layer nodes below to change their properties.
+
    +
  • OpenAerial layer +
    + + + +
    +
    • +
  • Layer group +
    + + + +
    +
      +
    • Food insecurity layer +
      + + + +
      +
      • +
    • World borders layer +
      + + + +
      +
      • +
    +
    • +
+ +
+ +
+ + + + + + + diff --git a/examples/layer-group.js b/examples/layer-group.js new file mode 100644 index 0000000000..18055859e5 --- /dev/null +++ b/examples/layer-group.js @@ -0,0 +1,59 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.dom.Input'); +goog.require('ol.layer.LayerGroup'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.proj'); +goog.require('ol.source.MapQuestOpenAerial'); +goog.require('ol.source.TileJSON'); + +var map = new ol.Map({ + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.MapQuestOpenAerial() + }), new ol.layer.LayerGroup({ + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.TileJSON({ + url: 'http://api.tiles.mapbox.com/v3/' + + 'mapbox.20110804-hoa-foodinsecurity-3month.jsonp', + crossOrigin: 'anonymous' + }) + }), + new ol.layer.TileLayer({ + source: new ol.source.TileJSON({ + url: 'http://api.tiles.mapbox.com/v3/' + + 'mapbox.world-borders-light.jsonp', + crossOrigin: 'anonymous' + }) + }) + ] + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: ol.proj.transform([37.40570, 8.81566], 'EPSG:4326', 'EPSG:3857'), + zoom: 4 + }) +}); + +function bindInputs(layerid, layer) { + new ol.dom.Input($(layerid + ' .visible')[0]) + .bindTo('checked', layer, 'visible'); + new ol.dom.Input($(layerid + ' .opacity')[0]) + .bindTo('value', layer, 'opacity'); +} +map.getLayers().forEach(function(layer, i) { + bindInputs('#layer' + i, layer); + if (layer instanceof ol.layer.LayerGroup) { + layer.getLayers().forEach(function(sublayer, j) { + bindInputs('#layer' + i + j, sublayer); + }); + } +}); + +$('#layertree li > span').click(function() { + $(this).siblings('fieldset').toggle(); +}).siblings('fieldset').hide();