ol3: new layer switcher management

1 files changed, 4 insertions, 68 deletions

diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 2df7d78..8f89e48 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -47,62 +47,6 @@ if (typeof language != 'undefined'){
 
 var default_map_lbl = '';
 
-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') ? l.get('name') : default_map_lbl) + '</label>');
-    // toggle on click
-    var $ld = $('<div class="LayerClickDiv">').click(function(){
-      l.setVisible(!l.getVisible());
-      l.get('baselayer') ? otherBLoff(l) :0;
-    });
-    $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') ;
-    });
-  });
-  if($baseDiv.children()[0] && $overDiv.children()[0]){
-    $baseDiv.after('<div class="Separator">');
-  }
-
-}; // LayerSwitcher
-
 function _zoom_to_resolution(zoom, proj_name){
     var proj = ol.proj.get(proj_name);
     var maxResolution = ol.extent.getWidth(proj.getExtent()) / 256;
@@ -333,6 +277,7 @@ function transformCoordToLonLat(coord) {
                                                      EPSG_PROJECTION);
                 map_options['restrictedExtent'] = settings.restricted_extent;
             }*/
+
             $.each(settings.map_layers, function(idx, layer){
                 // property for permalink
                 layer.set('base-layer-idx', idx);
@@ -436,19 +381,10 @@ function transformCoordToLonLat(coord) {
                             settings.map_layers[settings.selected_map_layer]);
             */
 
-            /* OL3-deprecated context menu
-            // manage the context menu
-            $('#map_menu_zoomin').bind("click", methods.zoomIn);
-            $('#map_menu_zoomout').bind("click", methods.zoomOut);
-            $('#map_menu_center').bind("click", methods.mapCenter);
-            */
-            /* OL3-deprecated routing
-            */
 
-            settings.layerSwitcher = new LayerSwitcher({
-                map: settings.map,
-                div: 'layerSwitcher'
-            });
+            settings.layerSwitcher = new ol.control.LayerSwitcher();
+            settings.map.addControl(settings.layerSwitcher);
+
 
             /* marker layer */
             settings.iconStyles = new Object();