OL3: add a layer switcher

2 files changed, 118 insertions, 0 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index 645bfa5..a6b6cda 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -1228,3 +1228,48 @@ div.pp_default .pp_expand{
     right: 12em;
     left: auto;
 }
+
+
+.LayerSwitcher {
+  width:20em;
+  margin:0.5em;
+  padding:0.5em;
+  z-index:100;
+  position: absolute;
+  background-color: rgba(255,255,255,0.7);
+}
+
+.LayerSwitcher .LayerClickDiv, .LayerSwitcher .LayerClickDiv * {
+  cursor:pointer;
+}
+
+.LayerClickDiv {
+    margin: 0.1em;
+    line-height: 1em;
+}
+
+.LayerSwitcher .Separator {
+  border-bottom:1px solid #999999;
+  margin:0.5em;
+}
+.LayerSwitcher .check {
+  border:1px solid #999999;
+  height:1em;
+  width:1em;
+  background:transparent;
+  float:left;
+  margin: 0 0.5em 0 0;
+}
+.LayerSwitcher .checkbox {
+  /* border-radius:0.2em; */
+}
+.LayerSwitcher .checkbox.checked {
+  background:#666666;
+}
+.LayerSwitcher .radiobutton {
+  border-radius:1em;
+}
+.LayerSwitcher .radiobutton.checked {
+  background:#666666;
+}
+
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index e1509ba..25c9be8 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -18,6 +18,62 @@ See the file COPYING for details.
 
 var extra_url;
 
+// Create a simple layer switcher in element div:
+var LayerSwitcher = function(options){
+  var o = this.options = options || {};
+  var map = this.map = options.map;
+
+  // element to render in:
+  var $div;
+  if(!o.div){
+    $div = $('<div class="LayerSwitcher">'); $(document.body).append($div);
+    o.div = $div[0];
+  } else {
+    var $div = typeof o.div == 'string' ? $('#'+o.div) : $(o.div);
+    $div.addClass("LayerSwitcher");
+  }
+  this.div = o.div;
+
+  var $baseDiv = $('<div class="BaseLayerDiv">');
+  var $overDiv = $('<div class="OverlayDiv">');
+  $div.append($baseDiv, $overDiv);
+
+
+  // array with layers:
+  var layers = map.getLayers().getArray();
+
+  // turn off other baselayers:
+  var otherBLoff = function(layer){
+    $.each(layers, function(i,l){
+      if(l!==layer && l.get('baselayer'))
+        { l.setVisible(false); }
+    });
+  };
+
+  // go through each layer, render control and set handlers:
+  $.each(layers, function(i,l){
+    var BL = l.get('baselayer');
+    var $li = $('<div class="check">');
+      l.getVisible() ? $li.addClass('checked') : $li.removeClass('checked') ;
+      BL ? $li.addClass('radiobutton') : $li.addClass('checkbox') ;
+    var $ll = $('<label>'+l.get('name')+'</label>');
+    var $ld = $('<div class="LayerClickDiv">').click(function(){
+      l.setVisible(!l.getVisible());
+      l.get('baselayer') ? otherBLoff(l) :0;
+    }); //toggle viz on click
+    $ld.append($li,$ll);
+    BL ? $baseDiv.append($ld) : $overDiv.append($ld) ;
+    // bind checkbox state to layer event:
+    l.on('change:visible', function(e){
+      this.getVisible() ? $li.addClass('checked') : $li.removeClass('checked') ;
+    }); // bind
+  }); // each
+  if($baseDiv.children()[0] && $overDiv.children()[0]){
+    $baseDiv.after('<div class="Separator">');
+  }
+
+}; // LayerSwitcher
+
 function transformExtent(extent) {
   return ol.proj.transformExtent(
     extent, EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
@@ -162,10 +218,12 @@ function transform(obj) {
                 defaults.map_layers = [
                     new ol.layer.Tile({
                         style: 'Road',
+                        name: 'Road',
                         source: new ol.source.MapQuest({layer: 'osm'})
                     }),
                     new ol.layer.Tile({
                         style: 'Aerial',
+                        name: 'Aerial',
                         visible: false,
                         source: new ol.source.MapQuest({layer: 'sat'})
                     })];
@@ -225,6 +283,13 @@ function transform(obj) {
             /* Create map object */
             settings.map = map = new ol.Map(map_options);
 
+            // only display the first layer
+            $.each(settings.map.getLayers().getArray(), function(i, layer){
+                if (i > 0){
+                    layer.setVisible(false);
+                }
+            });
+
             /* Manage permalink */
             /* OL3-deprecated permalink
             if (!settings.edition){
@@ -323,6 +388,11 @@ function transform(obj) {
             }
             */
 
+            settings.layerSwitcher = new LayerSwitcher({
+                map: settings.map,
+                div: 'layerSwitcher'
+            });
+
             /* marker layer */
             settings.iconStyles = new Object();
             settings.dbFeatures = new ol.Collection();
@@ -803,6 +873,9 @@ function transform(obj) {
         setCurrentPosition: function(lonlat){
             settings.current_position = lonlat;
         },
+        addLayer: function(layer){
+            settings.map.addLayer(layer);
+        },
         zoomOnCluster: function(feature){
             if(!feature.cluster) // if not cluster
             {