Add a layer-group example

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();