ol3: new layer switcher management

6 files changed, 7 insertions, 72 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();
diff --git a/chimere/templates/chimere/blocks/edit_widget.html b/chimere/templates/chimere/blocks/edit_widget.html
index be01569..79c3884 100644
--- a/chimere/templates/chimere/blocks/edit_widget.html
+++ b/chimere/templates/chimere/blocks/edit_widget.html
@@ -19,7 +19,6 @@
 </script>
 
 <div id='popup'></div>
-<div id='layerSwitcher'></div>
 <div id='map_edit'></div>
 <div class='help'>{% trans "To delete a vertice, hold the SHIFT key and click." %}</div>
   <input type='hidden' name='{{name}}' id='id_{{name}}' value='{{value}}'/>
diff --git a/chimere/templates/chimere/blocks/head_chimere.html b/chimere/templates/chimere/blocks/head_chimere.html
index c45d32c..de8d9bc 100644
--- a/chimere/templates/chimere/blocks/head_chimere.html
+++ b/chimere/templates/chimere/blocks/head_chimere.html
@@ -1,9 +1,11 @@
 {% if not is_edit %}
 <link rel="stylesheet" href="{{ STATIC_URL }}ol3/ol.css?ver=3.17.1" />
 <link rel="stylesheet" href="{{ STATIC_URL }}ol3-contextmenu/ol3-contextmenu.min.css?ver=2.2.4" />
+<link rel="stylesheet" href="{{ STATIC_URL }}ol3-layerswitcher/ol3-layerswitcher.css?ver=1.1.0" />
 <script src="{{ STATIC_URL }}ol3/ol.js?ver=3.17.1" type="text/javascript"></script>
 {% endif %}
 <script src="{{ STATIC_URL }}ol3-contextmenu/ol3-contextmenu.min.js?ver=2.2.4" type="text/javascript"></script>
+<script src="{{ STATIC_URL }}ol3-layerswitcher/ol3-layerswitcher.js?ver=1.1.0" type="text/javascript"></script>
 <script type="text/javascript">
     /* Global variables */
     var STATIC_URL = static_url = "{{ STATIC_URL }}";
diff --git a/chimere/templates/chimere/blocks/live_coordinates.html b/chimere/templates/chimere/blocks/live_coordinates.html
index 0853ff7..a87bfd8 100644
--- a/chimere/templates/chimere/blocks/live_coordinates.html
+++ b/chimere/templates/chimere/blocks/live_coordinates.html
@@ -19,7 +19,6 @@
 </div>
 
 
-<div id='layerSwitcher'></div>
 <div id='map_edit'></div>
 <div id='live_lonlat'>
   <p>
diff --git a/chimere/templates/chimere/blocks/map.html b/chimere/templates/chimere/blocks/map.html
index 7c5370f..85a4350 100644
--- a/chimere/templates/chimere/blocks/map.html
+++ b/chimere/templates/chimere/blocks/map.html
@@ -14,7 +14,6 @@
 
 <div id='{{map_id}}'></div>
 <div id='popup'></div>
-<div id='layerSwitcher'></div>
 <script type="text/javascript">
 $("#{{map_id}}").show();
 </script>
@@ -84,7 +83,6 @@ $("#{{map_id}}").show();
     {% endif %}
 
     function update_permalink(){
-        alert("hop");
         $('#main-map').chimere('update_permalink');
     };
 
diff --git a/settings.py b/settings.py
index 5787ad4..092caec 100644
--- a/settings.py
+++ b/settings.py
@@ -74,6 +74,7 @@ CHIMERE_MINIATURE_BY_DEFAULT = False
 # OSM mapnik map
 CHIMERE_DEFAULT_MAP_LAYER = """new ol.layer.Tile({
     style: 'Road',
+    title: 'OpenStreetMap',
     source: new ol.source.OSM()
 })"""