Merge branch 'v2.9'

2 files changed, 924 insertions, 91 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index e873b8a..1084ae5 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -42,7 +42,7 @@ th{
 
 /* background-color definition */
 
-body, h2, h3,
+h2, h3,
 .ui-widget-header,
 #layer_selection h4,
 .action li.selected, #no-js-message,
@@ -105,16 +105,33 @@ fieldset, #content, #panel,
 */
 /**/
 
+/* Bootstrap */
+
+.modal-header .close {
+    text-align: right;
+}
+
+.modal-header {
+    padding: 8px 15px;
+}
+
+.modal-header-success {
+    color:#fff;
+    border-bottom:1px solid #eee;
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-top-right-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    -moz-border-radius-topright: 5px;
+     border-top-left-radius: 5px;
+     border-top-right-radius: 5px;
+}
+
+
 html, body{
     margin:0;
     padding:0;
 }
 
-body{
-    font-family:arial;
-    font-size:80%;
-}
-
 fieldset p{
     margin:4px 8px;
 }
@@ -172,6 +189,16 @@ fieldset{
     display:none;
 }
 
+.transparent,
+.transparent div,
+.transparent h3{
+    color: transparent;
+    background-color: transparent;
+    opacity: 0;
+    border-color: transparent;
+    box-shadow: 0 0 0 transparent;
+}
+
 .ui-dialog-buttonset{
     text-align:center;
 }
@@ -330,7 +357,7 @@ ul#action-2 {
     overflow:auto;
 }
 
-.detail_content{
+#detail .detail_content{
     overflow:auto;
     height:80%;
     bottom: 0;
@@ -349,6 +376,15 @@ ul#action-2 {
     margin:0;
 }
 
+.detail_content p.detail_amendment{
+    padding:0.2em 0.5em;
+    margin: 0.2em 0;
+}
+
+.detail_content p.detail_amendment a:hover{
+    text-decoration: none;
+}
+
 ul.share{
     list-style-type:none;
     margin:0;
@@ -658,11 +694,12 @@ span.icon{
 #categories li{
     font-variant:small-caps;
     list-style:none;
+    padding: 0.1em 1em;
 }
 
 #categories li li{
     font-variant:normal;
-    margin-left:20px;
+    padding: 0;
 }
 
 ul#categories li li a{
@@ -673,19 +710,46 @@ ul#categories li li a{
 
 #categories ul ul{
     margin:0;
-    padding:0;
+    padding:0.5em 0;
 }
 
 ul.subcategories label img{
     height:20px;
 }
 
+#categories li.main_category:hover{
+    background-color: #eee;
+    cursor:pointer;
+}
+
 li.main_category .category_name:hover,
 li.main_category > span:hover,
 li.main_category label:hover{
     cursor:pointer;
 }
 
+#categories input{
+    display:None;
+}
+
+.category_name{
+    font-weight:bold;
+    padding: 0 0.5em;
+    border-radius:5px;
+}
+
+.subcategory label{
+    padding: 0 0.5em;
+    border-radius:5px;
+    font-weight:normal;
+}
+
+.category-selected .category_name,
+.subcategory label:hover,
+.subcategory.selected label{
+    background-color:rgb(175, 231, 175);
+}
+
 #categories li#display_submited{
     font-variant:normal;
 }
@@ -1124,7 +1188,6 @@ div.pp_default .pp_expand{
 #cluster_list span{
     vertical-align:middle;
     display:inline-block;
-    width:210px;
     cursor:pointer;
 }
 
@@ -1300,3 +1363,438 @@ div.pp_default .pp_expand{
     line-height: 20px;
 }
 
+/* from extra style */
+
+#content{
+    border:0 solid transparent;
+    margin-top:40px;
+}
+
+ul.share a span.fa, ul.share, .nav-pills > li > a > .fa,
+a, a:link, a:visited, legend, #footer .map-footer a, #footer .map-footer a:link,
+#footer .map-footer a:visited, .detail_footer a, caption,
+#categories li#display_submited, h4, .simple .cloud h2 {
+    color: #99CA3C;
+}
+
+.nav-pills > li#simple_button-lnk > a > .fa{
+    color:#777;
+}
+
+.pager li a,
+.detail_amendment a, .detail_amendment a:visited,
+.nav-pills > li.active > a > .fa{
+    color:#fff;
+}
+
+#frm_categories {
+    background-color: #fff;
+}
+
+.pager li a,
+.detail_amendment,
+.nav-pills > li.active > a, .nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+    background-color: #99CA3C;
+}
+
+.pager li a:hover{
+    background-color: #327E04;
+}
+
+.pager li a:hover{
+    border-color: #327E04;
+}
+
+h2, h3 {
+    color: #449506;
+    background-color: transparent;
+}
+
+a:hover, a:focus {
+    color: #327E04;
+}
+
+.modal-backdrop.in {
+    opacity: 0.1;
+}
+
+#footer a, #footer a:link, #footer a:visited{
+    color:#327E04;
+}
+
+#news{
+    background-color:transparent;
+}
+
+@media (min-width: 1000px) {
+    .modal-lg {
+        width: 900px;
+    }
+}
+
+.control_image {
+    vertical-align: -1px;
+}
+
+input{
+    display:inline-block;
+}
+
+.nav-pills{
+    margin-top:5px;
+}
+
+.nav.navbar-nav >li > a{
+    padding-top:15px;
+    padding-bottom:15px;
+}
+
+.modal-header-success,
+.nav-pills > li.active > a, .nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+    background-color: #327E04;
+}
+
+#permalink{
+    display:inherit;
+    margin:0;
+    margin-left:2px;
+    padding:inherit;
+    width:inherit;
+}
+
+label.labelSpan.olButton{
+    margin:0;
+    margin-left:5px;
+}
+
+.baseLayersDiv input{
+    margin-left:5px;
+}
+
+#content .olControlLayerSwitcher .layersDiv {
+    border-radius: 0;
+    border:1px solid;
+    border-color: #E6E6E6;
+}
+
+.container{
+    max-width:none;
+    padding-right: 0;
+}
+
+#utils-div{
+    border-color: #DDD;
+}
+
+#search-box {
+    position: relative;
+    z-index: 200;
+    left: auto;
+    top: auto;
+    border: 0px solid transparent;
+    display:none;
+}
+
+.ac-results{
+    position: absolute;
+    background-color: white;
+    border: 1px solid #CCC;
+    padding: 0.2em 0.4em;
+}
+
+#content .olControlLayerSwitcher .layersDiv, #panel, #detail-wrapper{
+    background-color: #F8F8F8;
+}
+
+#panel{
+    left: 0;
+    border: 0 transparent;
+    border-left: 1px solid #E7E7E7;
+    padding: 16px;
+    top: 52px;
+    width: 400px;
+    z-index: 12;
+    max-height: calc(100% - 54px);
+}
+
+#detail {
+    position:static;
+    border:0 transparent;
+}
+
+#detail div {
+    margin:auto;
+}
+
+#detail #detail-wrapper{
+    padding: 4px 8px;
+    padding-top:50px;
+    position:absolute;
+    z-index:101;
+    left:auto;
+    right:0;
+    bottom:0;
+    top:0;
+    width:400px;
+    border:0 transparent;
+    border-right:1px solid #E7E7E7;
+    border-top:1px solid #E7E7E7;
+}
+
+.inside-popup #detail-wrapper{
+    max-height: 350px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.inside-popup.popover{
+    width: 350px;
+    max-width: 350px;
+}
+
+#panel #categories,
+#categories > ul {
+    width:auto;
+}
+
+#categories{
+    display:none;
+}
+
+.cat_image{
+    display:inline-block;
+    width:30px;
+}
+
+@media (min-height: 500px) {
+    #category-directory{
+        width:50%;
+    }
+}
+
+#search-nav{
+    position:absolute;
+    bottom:0;
+    width:100%;
+    background-color:#F8F8F8;
+    border-top:1px solid #E6E6E6;
+    padding: 0 10px;
+    left: 0;
+}
+
+#main-map {
+    height: auto;
+    bottom: 0px;
+    top:50px;
+}
+
+#footer .map-footer {
+    bottom: 0;
+    right: 420px;
+    margin:0;
+    background-color:#fff;
+    opacity:0.8;
+}
+
+#layer_selection {
+    display:none;
+}
+
+.olControlPanPanel {
+    top: 60px;
+}
+
+.olControlZoomPanel {
+    top: 125px;
+}
+
+a#news_button{
+    padding:0 10px;
+    margin:0;
+}
+
+span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
+#categories-lnk, #search-lnk, .fa-chimere-action, #news-lnk a,
+.nav-pills > li#news-lnk > a > .fa{
+    font-variant: small-caps;
+    font-size: 1.1em;
+    margin-left: 0.3em;
+    color:#777;
+    padding-left:0;
+    font-weight:normal;
+}
+
+.nav > li > a, #simple_button{
+    padding:10px;
+}
+
+#areas-div{
+    line-height: 32px;
+}
+
+#areas-div, span#permalink, #simple_button{
+    display: inline;
+    padding: 0px;
+}
+
+#news-lnk, #permalink-lnk, #simple_button{
+    line-height: 42px;
+}
+
+#news-lnk, #permalink-lnk{
+    padding: 0px 0px 0px 10px;
+}
+
+#news-lnk .lbl{
+    padding: 0px 0px 0px 0.5em;
+}
+
+#permalink, #simple_button-lnk lbl{
+    padding: 0 0.8em;
+}
+
+#areas-div{
+    line-height:42px;
+}
+
+.nav-pills > li#simple_button-lnk > a > .fa{
+    color:#777;
+}
+
+.nav-pills > li > a > .fa{
+    color: #54C200;
+}
+
+.nav-pills > li.active > a > .fa{
+    color:#fff;
+}
+
+.navbar-default .navbar-brand{
+    color:#54C200;
+    font-size:1em;
+}
+
+.fa{
+    font-size:1.4em;
+}
+
+.fa-chimere-facebook:before{
+    content:"\f082";
+}
+
+.fa-chimere-twitter:before{
+    content:"\f081";
+}
+
+.fa-chimere-view:before{
+    content:"\f06e";
+}
+
+.fa-chimere-contribute:before{
+    content:"\f040";
+}
+
+.fa-chimere-categories:before{
+    content:"\f03a";
+}
+
+.fa-chimere-rss:before{
+    content:"\f09e";
+}
+
+.fa-chimere-email:before,
+.fa-chimere-contact:before{
+    content:"\f1fa";
+}
+
+.fa-chimere-maps:before{
+    content:"\f14e";
+}
+
+#maps-lnk label, #contact-lnk .lbl, #simple_button-lnk .lbl, #rss-lnk .lbl{
+    display:none;
+}
+
+@media (min-width: 1552px) {
+    #maps-lnk label,
+    #contact-lnk .lbl{
+        display:inline;
+    }
+}
+
+@media (min-width: 1200px) {
+    #simple_button-lnk .lbl{
+        display:inline;
+    }
+}
+
+@media (min-width: 1100px) {
+    #panel{
+        padding-top:16px;
+    }
+    #detail{
+        padding-top:50px;
+    }
+}
+
+@media (max-width: 767px) {
+    #news-lnk .lbl, #simple_button-lnk .lbl, #maps-lnk label, #contact-lnk .lbl{
+        display:inline-block;
+    }
+    .selection-sep{
+        width: 80%;
+        border-bottom: 1px solid #CCC;
+        margin: 0 0 0.5em 0;
+        display:block;
+        clear:both;
+    }
+    #news-lnk .lbl,
+    #permalink-lnk,
+    #simple_button{
+        line-height: 50px;
+    }
+    #panel{
+        padding-top:16px;
+    }
+    #detail{
+        padding-top:50px;
+    }
+    #categories-lnk{
+        clear:both;
+    }
+}
+
+#show-panel{
+    left:0;
+    display:none;
+}
+
+@media (max-width: 767px) {
+    #show-panel{
+        display:block;
+    }
+    #panel, #hide-panel{
+        display:none;
+    }
+    #footer .map-footer {
+        right:20px;
+    }
+}
+
+#content .olControlSimplePanZoom{
+    top: 58px !important;
+    left: auto !important;
+    right:50px !important;
+}
+
+#content .olControlLayerSwitcher .maximizeDiv{
+    left: -60px !important;
+}
+
+#content #main-map .olControlLayerSwitcher {
+    left: auto !important;
+    right:50px !important;
+    top:10px !important;
+}
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 2cbfced..df5dea5 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -18,7 +18,10 @@ See the file COPYING for details.
 
 var extra_url;
 
-// Create a simple layer switcher in element div:
+// Create a simple layer switcher
+
+var default_map_lbl = '';
+
 var LayerSwitcher = function(options){
   var o = this.options = options || {};
   var map = this.map = options.map;
@@ -54,26 +57,33 @@ var LayerSwitcher = function(options){
   $.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>');
+    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;
-    }); //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 _zoom_to_resolution(zoom, proj_name){
+    var proj = ol.proj.get(proj_name);
+    var maxResolution = ol.extent.getWidth(proj.getExtent()) / 256;
+    return maxResolution / Math.pow(2, zoom);
+}
+
 
 function _geoportail_layer(key, layer, name, max_zoom, image_format, style, baselayer){
     var resolutions = [];
@@ -133,6 +143,13 @@ function transform(obj) {
   return obj.transform(EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
 }
 
+var invisibleStyleIcon = new ol.style.Style({
+        image: new ol.style.Icon({
+            src : MEDIA_URL+'chimere/img/marker-cluster.png', //still need something even if it's invisible
+            opacity : 0
+        })
+    });
+
 /*
 * Little hasattr helper
 */
@@ -144,6 +161,54 @@ function transform(obj) {
         else
             return v; };
 })( jQuery );
+
+/*
+ * hovering management
+ */
+
+var register_hovering = function(exp, handlers_to_deactivate){
+    $(document).on({
+      mouseenter: function(evt) {
+        $(evt.target).data('hovering', true);
+        if (handlers_to_deactivate){
+            for (idx in handlers_to_deactivate){
+                handlers_to_deactivate[idx].setActive(false);
+            }
+        }
+      },
+      mouseleave: function(evt) {
+        $(evt.target).data('hovering', false);
+        if (handlers_to_deactivate){
+            for (idx in handlers_to_deactivate){
+                handlers_to_deactivate[idx].setActive(true);
+            }
+        }
+      }
+    }, exp);
+    $(exp).hover(function(){
+        $(this).data('hovering', true);
+        if (handlers_to_deactivate){
+            for (idx in handlers_to_deactivate){
+                handlers_to_deactivate[idx].setActive(false);
+            }
+        }
+    }, function(){
+        $(this).data('hover', false);
+        if (handlers_to_deactivate){
+            for (idx in handlers_to_deactivate){
+                handlers_to_deactivate[idx].setActive(true);
+            }
+        }
+    });
+
+}
+
+// jQuery pseudo-expression :hovering
+jQuery.expr[":"].hovering = function(elem) {
+  return $(elem).data('hovering') ? true : false;
+};
+
+
 (function ($) {
     /*
     * Chimere jQuery plugin
@@ -191,7 +256,8 @@ function transform(obj) {
             popupClass: null,
             popupContentFull: false, // if true the detail is inside the popup
             category_accordion: true, // category opening behave like an accordion
-            maxResolution: 156543.0399,
+            minZoom: null,
+            maxZoom: 18,
             units: 'm',
             projection: new ol.proj.get('EPSG:900913'),
             theme: null,
@@ -206,7 +272,6 @@ function transform(obj) {
             current_category: null, // To store the current category clicked in list
             current_routes_features: [], // To store the current routes find by routing
             itinerary_step_number:0, // current step number
-            icon_offset: [0, 0],
             edition: false, // edition mode
             edition_type: 'marker', // marker, route or polygon edition
             //default_icon: new OpenLayers.Icon(
@@ -224,7 +289,8 @@ function transform(obj) {
             icon_step: null,
             icon_end: null,
             mobile: false,
-            input_id: 'id_point'
+            input_id: 'id_point',
+            animation_duration: 250
         };
         var settings = {};
     /*
@@ -274,6 +340,7 @@ function transform(obj) {
                     })];
             }
             settings = $.extend({}, defaults);
+            settings._revision = 0;
             if ( options ) $.extend(settings, options);
 
             if (settings.controls == null){
@@ -289,24 +356,33 @@ function transform(obj) {
                 */
                 settings.controls = [
                     new ol.control.Attribution(),
-                    new ol.control.OverviewMap({
-                        collapsed: false
-                    }),
                     new ol.control.ScaleLine(),
                     new ol.control.Zoom(),
                     new ol.control.FullScreen()
                 ];
+                // OverviewMap mess with clustering
+                if (!settings.enable_clustering){
+                    settings.controls.push(
+                        new ol.control.OverviewMap({
+                            collapsed: false
+                        })
+                    );
+                }
                 //}
             }
             var map_element = $(this).attr('id');
 
             var view_options = {
-                maxResolution: settings.maxResolution,
-                // OL3-deprecated: units: settings.units,
                 projection: settings.projection,
                 center: CENTER_LONLAT,
-                zoom: DEFAULT_ZOOM
+                zoom: DEFAULT_ZOOM,
+                maxZoom: settings.maxZoom
             };
+
+            if (settings.minZoom){
+                view_options['minZoom'] = settings.minZoom;
+            }
+
             /* OL3-deprecated
             if (settings.restricted_extent){
                 settings.restricted_extent.transform(EPSG_DISPLAY_PROJECTION,
@@ -320,14 +396,22 @@ function transform(obj) {
                 view: settings.view,
                 target: map_element,
                 layers: settings.map_layers
-                // OL3-deprecated: theme: settings.theme
             };
-
             settings.current_position = null;
 
             /* Create map object */
             settings.map = map = new ol.Map(map_options);
 
+            // get interactions
+            settings.map.getInteractions().forEach(function (interaction){
+                if (interaction instanceof ol.interaction.MouseWheelZoom){
+                    settings.MouseWheelZoom = interaction;
+                }
+                if (interaction instanceof ol.interaction.DragPan){
+                    settings.DragPan = interaction;
+                }
+            });
+
             // only display the first layer
             $.each(settings.map.getLayers().getArray(), function(i, layer){
                 if (i > 0){
@@ -474,15 +558,12 @@ function transform(obj) {
 
             // popup management
             settings.popup_item = document.getElementById('popup');
-            settings.popup = new ol.Overlay({
+            var popup_options = {
                 element: settings.popup_item,
                 positioning: 'bottom-left',
-                stopEvent: false/*,
-                autoPan: true,
-                autoPanAnimation: {
-                  duration: 250
-                }*/
-            });
+                stopEvent: false
+            }
+            settings.popup = new ol.Overlay(popup_options);
             settings.map.addOverlay(settings.popup);
 
             // display marker on click
@@ -495,12 +576,15 @@ function transform(obj) {
                 );
                 settings.current_feature = feature;
                 if (!settings.edition){
+                    if ($('.popover-content').is(":hovering")){
+                        return;
+                    }
                     if (feature) {
                         $(settings.popup_item).popover('destroy');
 
                         // zoom on aggregated
                         var key = feature.get('key');
-                        if (key.length > 3 && key.substring(0, 3) == 'agg' &&
+                        if (key && key.length > 3 && key.substring(0, 3) == 'agg' &&
                                 settings._zoom_need_reload){
                             var current_zoom = settings.map.getView().getZoom();
                             if (current_zoom < settings._zoom_need_reload){
@@ -510,29 +594,13 @@ function transform(obj) {
                             return
                         }
 
-                        var geom = feature.getGeometry();
-                        if (geom.getType() == 'Point'){
-                            settings.popup.setPosition(geom.getCoordinates());
-                            settings.popup.setOffset([feature.get('popup_offset_x'),
-                                                      -feature.get('popup_offset_y')]);
-                        } else if (geom.getType() == 'Polygon'){
-                            settings.popup.setPosition(geom.getInteriorPoint().getCoordinates());
-                            settings.popup.setOffset([0, 0]);
-                        } else if (geom.getType() == 'LineString'){
-                            settings.popup.setPosition(geom.getCoordinateAt(0.5));
-                            settings.popup.setOffset([0, 0]);
-                        } else if (geom.getType() == 'MultipleLineString'){
-                            settings.popup.setPosition(geom.getLineString(0).getCoordinatesAt(0.5));
-                            settings.popup.setOffset([0, 0]);
+                        if (key && key.length > 6 && key.substring(0, 7) == 'cluster'){
+                            feature = methods.clickOnCluster(feature);
+                        } else {
+                            methods.openPopup(feature);
                         }
-                        $(settings.popup_item).popover({
-                            'placement': 'top',
-                            'html': true,
-                            'content': feature.get('name')
-                        });
-                        $(settings.popup_item).popover('show');
-                        methods.display_feature_detail(key);
                     } else {
+                        settings.current_popup = null;
                         $(settings.popup_item).popover('destroy');
                     }
                 }
@@ -635,6 +703,11 @@ function transform(obj) {
             }
             */
 
+
+
+            if (settings.enable_clustering){
+                methods.enableClustering();
+            }
             /* OL3-deprecated-cluster
             if (settings.enable_clustering){
                 var style = new OpenLayers.Style({
@@ -764,9 +837,9 @@ function transform(obj) {
 
             if (!settings.edition){
                 if (settings.enable_clustering){
-                    /// OL3-TODO
-                    settings.map.events.register('zoomend', null,
-                                              methods.cleanCluster);
+                    /// OL3-TODO cluster
+                    // settings.map.events.register('zoomend', null,
+                    //                          methods.cleanCluster);
                 }
                 methods.loadCategories();
                 methods.loadGeoObjects();
@@ -842,20 +915,9 @@ function transform(obj) {
 
             methods.preload_images();
         }, // end of init
-        update_permalink_activation:function(){
-            if (settings.checked_categories.length ||
-                settings.current_feature ||
-                settings.routing_speed ||
-                settings.routing_transport ||
-                settings.routing_start ||
-                settings.routing_end){
-                $("#permalink a").removeAttr("disabled");
-            } else {
-                $("#permalink a").attr("disabled", "disabled");
-            }
-        },
         register_reload_on_move: function(){
             var reload_on_move = function(evnt){
+                settings._revision += 1;
                 var map = settings.map;
                 var current_extent = ol.proj.transformExtent(
                     map.getView().calculateExtent(map.getSize()),
@@ -888,6 +950,237 @@ function transform(obj) {
             settings.map.on('moveend', reload_on_move);
             reload_on_move();
         },
+        enableClustering: function(){
+            // Style clusters and hide items inside clusters
+            settings._styleCache = {};
+            settings._remindOldStyle = {};
+            settings._remindUpdated = {};
+            settings._currentRemind = -1;
+            function clusterGetStyle (feature, resolution){
+                var key = feature.set('key', 'cluster');
+                var features = feature.get('features');
+                var size = features.length;
+                feature.set('size', size);
+                var style = settings._styleCache[size];
+                // no cluster for lonely marker
+                if (!style && size > 1){
+                    var color = size>25 ? "192,0,0" : size>8 ? "255,128,0" : "0,128,0";
+                    var radius = Math.max(8, Math.min(size*0.75, 20));
+                    var lbl = size.toString();
+                    style = settings._styleCache[size] = [
+                        new ol.style.Style({
+                            image: new ol.style.Circle({
+                                radius: radius,
+                                stroke: new ol.style.Stroke({
+                                    color:"rgba("+color+",0.5)",
+                                    width:15
+                                }),
+                                fill: new ol.style.Fill({
+                                    color:"rgba("+color+",1)"
+                                })
+                            }),
+                            text: new ol.style.Text({
+                                text: lbl,
+                                fill: new ol.style.Fill({
+                                    color: '#fff'
+                                })
+                            })
+                        })
+                    ];
+                }
+                // don't reapply the style when no modif have been opered
+                if (settings._currentRemind != settings._revision){
+                    settings._remindUpdated = [];
+                    settings._currentRemind = settings._revision;
+                }
+                if (size > 1){
+                    // marker himself disappear
+                    for (idx in features){
+                        var feat = features[idx];
+                        if (!settings._remindUpdated[feat.getId()]){
+                            if (!settings._remindOldStyle[feat.getId()]){
+                                settings._remindOldStyle[feat.getId()] = feat.getStyle();
+                            }
+                            feat.setStyle(invisibleStyleIcon);
+                            settings._remindUpdated[feat.getId()] = 1;
+                        }
+                    }
+                } else {
+                    // or re-appear
+                    var feat = features[0];
+                    if (!settings._remindUpdated[feat.getId()] &&
+                          settings._remindOldStyle[feat.getId()]){
+                        feat.setStyle(settings._remindOldStyle[feat.getId()]);
+                        settings._remindUpdated[feat.getId()] = 1;
+                    }
+                }
+                return style;
+            }
+
+            // Cluster Source
+            settings.clusterSource = new ol.source.Cluster({
+                distance: 40,
+                source: new ol.source.Vector()
+            });
+            // Animated cluster layer
+            settings.clusterLayer = new ol.layer.Vector({
+                name: 'Cluster',
+                source: settings.clusterSource,
+                // Cluster style
+                style: clusterGetStyle
+            });
+            settings.map.addLayer(settings.clusterLayer);
+
+        },
+        clickOnCluster: function(feature, zoom_level, duration, nb_zoom,
+                                 current_nb_items){
+            if (!duration){
+                // zoom animation must be slower
+                duration = settings.animation_duration * 2;
+            }
+            if (!nb_zoom) nb_zoom = 0;
+
+            var props = feature.getProperties();
+            if (!'features' in props) return feature;
+            if (!current_nb_items){
+                current_nb_items = props['features'].length;
+            } else if(current_nb_items != props['features'].length) {
+                // stop zooming there less item in the cluster
+                return feature;
+            }
+
+            var v = settings.map.getView();
+            if (!zoom_level) zoom_level = v.getZoom() + 1;
+
+            // animation
+            var pan = ol.animation.pan(
+                {duration: duration, source: v.getCenter()})
+            var zoom = ol.animation.zoom(
+                {duration: duration, resolution: v.getResolution()})
+            settings.map.beforeRender(pan, zoom);
+
+            // center
+            v.setCenter(feature.getGeometry().getCoordinates());
+
+            // max zoom reached
+            if (zoom_level >= settings.maxZoom){
+                return methods.displayClusterDetail(feature);
+            }
+
+            // zoom
+            v.setZoom(zoom_level);
+
+            nb_zoom += 1;
+            // something wrong stop zoom!
+            if (nb_zoom > settings.maxZoom) return feature;
+            // wait for the animation to finish before rezoom
+            return setTimeout(
+                function(){
+                    // our cluster must be at the center (if it exists after zoom)
+                    var pixel = settings.map.getPixelFromCoordinate(v.getCenter());
+                    var new_feature;
+                    settings.map.forEachFeatureAtPixel(
+                        pixel, function(feat, layer){
+                            if (layer == settings.clusterLayer){
+                                new_feature = feat;
+                                return true
+                            }
+                        }
+                    );
+                    if (new_feature){
+                        return methods.clickOnCluster(
+                            new_feature, zoom_level + 1, duration, nb_zoom,
+                            current_nb_items);
+                    }
+                    // no more cluster feature here: stop zooming
+                    return feature;
+                }, duration);
+        },
+        displayClusterDetail: function(feature){
+            var feats = feature.getProperties()['features'];
+            var content = "<div class='dialog-content'><ul>";
+            for (idx in feats){
+                var props = feats[idx].getProperties();
+                content += "<li><img src="+MEDIA_URL+props.icon_path+">" +
+                    "<span class='cluster_list' id='cluster_list_"+idx+"'>" +
+                            props.name + "</span></li>";
+            }
+            content += "</ul></div>";
+            $('#cluster_list .modal-body').html(content);
+            $('#cluster_list').modal('show');
+/*
+            $('#cluster_list').dialog('open');
+            $("#cluster_list").on("dialogclose", methods.cleanCluster);
+            settings.map.setCenter(
+                        feature.geometry.getBounds().getCenterLonLat());
+            // register after the display
+            settings.clustered_feature = feature.cluster;
+*/
+
+            jQuery(".cluster_list").click(
+                function(e){
+                    $('#cluster_list').modal('hide');
+                    var splitted = $(this).attr('id').split('_');
+                    var index = splitted[splitted.length-1];
+                    feat = feats[parseInt(index)];
+                    var size = feature.getProperties()['size'] ? feature.getProperties()['size'] : 5;
+                    // cf. clusterGetStyle
+                    var radius = Math.max(8, Math.min(size*0.75, 20));
+                    var offset_x = 0.1;
+                    var offset_y = -(radius + radius / 2);
+                    var geom = feature.getGeometry();
+                    methods.openPopup(feat, offset_x, offset_y, geom.getCoordinates());
+                    e.stopPropagation();
+                    return false;
+            });
+            return feature;
+        },
+        openPopup: function(feature, offset_x, offset_y, alt_coordinates){
+            settings.current_popup = feature.getId();
+            if (!offset_x){
+                offset_x = feature.get('popup_offset_x');
+                if (!offset_x) offset_x = 0;
+            }
+            if (!offset_y){
+                offset_y = -feature.get('popup_offset_y');
+                if (!offset_y) offset_y = 0;
+            }
+            if (alt_coordinates){
+                settings.popup.setPosition(alt_coordinates);
+            } else {
+                var geom = feature.getGeometry();
+                if (geom.getType() == 'Point'){
+                    settings.popup.setPosition(geom.getCoordinates());
+                } else if (geom.getType() == 'Polygon'){
+                        settings.popup.setPosition(geom.getInteriorPoint().getCoordinates());
+                } else if (geom.getType() == 'LineString'){
+                        settings.popup.setPosition(geom.getCoordinateAt(0.5));
+                } else if (geom.getType() == 'MultipleLineString'){
+                        settings.popup.setPosition(geom.getLineString(0).getCoordinatesAt(0.5));
+                }
+            }
+            settings.popup.setOffset([offset_x, offset_y]);
+            $(settings.popup_item).popover({
+                'placement': 'top',
+                'html': true,
+                'content': feature.get('name')
+            });
+            $(settings.popup_item).popover('show');
+            methods.display_feature_detail(feature.get('key'), feature.get('name'));
+        },
+        /* end of new ol3 */
+        update_permalink_activation:function(){
+            if (settings.checked_categories.length ||
+                settings.current_feature ||
+                settings.routing_speed ||
+                settings.routing_transport ||
+                settings.routing_start ||
+                settings.routing_end){
+                $("#permalink a").removeAttr("disabled");
+            } else {
+                $("#permalink a").attr("disabled", "disabled");
+            }
+        },
         /* Preload icons */
         preload_images: function(){
             if (typeof extra_url == 'undefined') return;
@@ -945,9 +1238,10 @@ function transform(obj) {
             if ($('#chimere_map_menu').length){
                 $('#chimere_map_menu').hide();
             }
+            /*
             if (settings.current_popup != null) {
                 settings.current_popup.hide();
-            }
+            }*/
             // settings.map.events.unregister('click', settings.map,
             //                             methods.displayMapMenu);
             //settings.map.events.register('click', settings.map,
@@ -991,6 +1285,7 @@ function transform(obj) {
         addLayer: function(layer){
             settings.map.addLayer(layer);
         },
+        /*
         zoomOnCluster: function(feature){
             if(!feature.cluster) // if not cluster
             {
@@ -1025,7 +1320,7 @@ function transform(obj) {
                 });
             }
         },
-
+        */
         /*
         * Display menu on the map
         */
@@ -1087,20 +1382,18 @@ function transform(obj) {
                         //var start = new Date().getTime();
                         settings.dbFeatures.clear();
                         settings.vectors.clear();
-                        /// OL3-TODO
-                        // settings.layerVectors.removeAllFeatures();
                         if (settings.enable_clustering){
-                            settings.cluster_array = [];
-                            settings.layerCluster.removeAllFeatures();
+                            settings.clusterSource.getSource().clear();
                         }
                         if (!data.features) return;
                         if (data.zoom_need_reload){
                             settings._zoom_need_reload = data.zoom_need_reload;
                         }
+                        settings._revision += 1;
                         for (var i = 0; i < data.features.length; i++) {
                             var feature = data.features[i];
                             if (feature.geometry.type == 'Point'){
-                                methods.addMarker(feature);
+                                var iconFeature = methods.addMarker(feature);
                             } else if (feature.geometry.type == 'Polygon') {
                                 methods.addPolygon(feature);
                             } else if (feature.geometry.type == 'MultiPolygon') {
@@ -1111,11 +1404,6 @@ function transform(obj) {
                                 //OL3 methods.addMultiLine(feature);
                             }
                         }
-                        if (settings.enable_clustering){
-                            settings.layerCluster.addFeatures(
-                                                        settings.cluster_array);
-                            methods.cleanCluster();
-                        }
                         // var extent = settings.sourceDbFeatures.getExtent();
                         // settings.map.getView().fit(extent, settings.map.getSize());
                         // settings.map.resetLayersZIndex();
@@ -1190,7 +1478,7 @@ function transform(obj) {
             }
             var _toggle_categories = function (subcategory_element) {
                 var parent = subcategory_element.closest('ul');
-                var parent_label = parent.parent().find("> span");
+                var parent_label = parent.parent();
                 if (parent.find('input[type=checkbox]:checked').length){
                     parent_label.addClass('category-selected');
                 } else {
@@ -1365,6 +1653,7 @@ function transform(obj) {
                 name: mark.properties.name,
                 pk: mark.properties.pk,
                 key: mark.properties.key,
+                icon_path: mark.properties.icon_path,
                 popup_offset_x: mark.properties.icon_popup_offset_x,
                 popup_offset_y: mark.properties.icon_popup_offset_y
             });
@@ -1393,9 +1682,13 @@ function transform(obj) {
             }
 
             iconFeature.setStyle(iconStyle);
+            iconFeature.setId(mark.properties.key);
             settings.dbFeatures.push(iconFeature);
+            if (settings.enable_clustering){
+                settings.clusterSource.getSource().addFeature(iconFeature);
+            }
 
-            return;
+            return iconFeature;
 
             //OL3 hover
             /*
@@ -2124,13 +2417,19 @@ function transform(obj) {
             settings.layerRoute.addFeatures([current_route]);
             return current_route;
         },
-        display_feature_detail: function (key) {
+        display_feature_detail: function (key, name) {
             /*
             * update current detail panel with an AJAX request
             */
             var uri = extra_url
             if (settings.area_id) uri += settings.area_id + "/"
-            uri += "getDetail/" + key;
+            uri += "getDetail/";
+            if (settings.popupContentFull){
+                // only display when fully loaded
+                $(".popover").addClass('transparent');
+                uri += "popup/";
+            }
+            uri += key;
             var params = {}
             if (settings.simple) { params["simple"] = 1; }
             $.ajax({url: uri,
@@ -2138,7 +2437,6 @@ function transform(obj) {
                     dataType: "html",
                     success: function (data) {
                         if ( settings.display_feature_detail_fx ) {
-                            // Custom function ?
                             settings.display_feature_detail_fx(data, settings);
                         }
                         else {
@@ -2146,7 +2444,43 @@ function transform(obj) {
                                 $('#detail').html(data).fadeIn();
                             }
                             else {
-                                settings.current_popup.setContentHTML("<div class='cloud'>" + data + "</div>");
+                                // first display to get the size of the content
+                                // get default popover size
+                                var w = $('.popover').width();
+                                var h = $('.popover').height();
+                                $(".popover").addClass('inside-popup');
+                                $(".popover-title").html(name);
+                                $(".popover-title").show();
+                                $(".popover-content").html(data);
+                                var offset = settings.popup.getOffset();
+                                offset[0] = offset[0] - $('.popover').width()/2 + w/2;
+                                offset[1] = offset[1] - $('.popover').height() + h;
+                                settings.popup.setOffset(offset);
+                                settings.popup.dispatchEvent('change:offset');
+                                // pan toward the popup + margin to display pop height
+                                var center_position = settings.popup.getPosition();
+                                var doc_height = $(document).height();
+                                if (doc_height / 2 < - offset[1]*2){
+                                    var pixel = settings.map.getPixelFromCoordinate(center_position);
+                                    pixel[1] += offset[1] + doc_height / 4;
+                                    center_position = settings.map.getCoordinateFromPixel(pixel);
+                                }
+                                var pan = ol.animation.pan(
+                                    {duration: settings.animation_duration,
+                                     source: settings.view.getCenter()})
+                                settings.map.beforeRender(pan);
+                                settings.view.setCenter(center_position);
+
+                                // waiting for the pan to finish
+                                setTimeout(function(){
+                                    // to trigger autopan
+                                    settings.popup.dispatchEvent('change:position');
+                                    $(".popover").removeClass('transparent');
+                                    register_hovering('.popover-content',
+                                                  [settings.MouseWheelZoom,
+                                                   settings.DragPan]);
+                                    }, settings.animation_duration + 10
+                                );
                             }
                         }
                     }
@@ -2432,6 +2766,7 @@ function transform(obj) {
                 settings.hide_popup_fx(evt, settings)
             }
             else { // Default behaviour
+                /*
                 if (settings.current_popup)
                 {
                     settings.current_feature = null;
@@ -2445,7 +2780,7 @@ function transform(obj) {
                         methods.update_permalink_activation();
                         return true;
                     }
-                }
+                }*/
             }
             methods.update_permalink_activation();
             return false;