Merge branch 'v2.9'

12 files changed, 993 insertions, 631 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;
diff --git a/chimere/templates/chimere/base.html b/chimere/templates/chimere/base.html
index fc3afb8..dd70ef4 100644
--- a/chimere/templates/chimere/base.html
+++ b/chimere/templates/chimere/base.html
@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% load chimere_tags i18n %}
 {% block extra_head %}
+<link rel="stylesheet" href="{{ STATIC_URL }}font-awesome/css/font-awesome.min.css" />
+<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/bootstrap.min.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/styles.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/print.css" media='print'/>
 {% if css_area %}
@@ -8,13 +10,11 @@
 {% if MOBILE %}
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/mobile.css" />
 <script src="{{ STATIC_URL }}chimere/js/mobile.chimere.js" type="text/javascript"></script>{%endif%}
-<link rel="stylesheet" href="{{ STATIC_URL }}font-awesome/css/font-awesome.min.css" />
-<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/bootstrap.min.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/form-compat.css" />
-<link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/extra-styles.css" />
 <script src="{{ STATIC_URL }}bootstrap/bootstrap.min.js" type="text/javascript"></script>
     <script type='text/javascript'>
     var has_search = {% if has_search %}true{% else %}false{% endif %};
+    var default_map_lbl = "{% trans 'Default map' %}";
     </script>
 <script src="{{ STATIC_URL }}chimere/js/interface.js" type="text/javascript"></script>
 {% endblock %}
diff --git a/chimere/templates/chimere/blocks/categories.html b/chimere/templates/chimere/blocks/categories.html
index b674e12..282d008 100644
--- a/chimere/templates/chimere/blocks/categories.html
+++ b/chimere/templates/chimere/blocks/categories.html
@@ -5,7 +5,9 @@
         <img class="control_image toggle_category" id="maincategory_img_{{category.id}}" alt="control" src="{{ STATIC_URL }}chimere/img/{% if category.selected %}minus.png{% else %}plus.png{% endif %}" />
         <input type="checkbox" id='checkall_{{category.id}}'>
         <span class='category_name'>{% trans category.name %}</span>
+        {% comment %}
         <span class="glyphicon glyphicon-zoom-in zoom_image zoom_to_category" id="zoom_to_category_{{category.id}}"></span>
+        {% endcomment %}
         <ul class='subcategories' id='maincategory_{{category.id}}'{% if not category.selected %} style='display:None'{% endif %}>
             {% for sub_category in lst_sub_categories %}
             <li id='li_sub_{{sub_category.id}}' class='subcategory'>
@@ -14,7 +16,9 @@
                     <span class='cat_image'><img alt='{{ sub_category.name }}' src='{{ MEDIA_URL }}{{sub_category.icon.image}}'/></span>
                     {% trans sub_category.name %}
                 </label>
+                {% comment %}
                 <span class="glyphicon glyphicon-zoom-in zoom_image zoom_to_subcategory" id="zoom_to_subcategory_{{sub_category.id}}"></span>
+                {% endcomment %}
             </li>
             {% endfor %}
             {% if category.description %}
diff --git a/chimere/templates/chimere/blocks/map.html b/chimere/templates/chimere/blocks/map.html
index c37f5f9..10f1c97 100644
--- a/chimere/templates/chimere/blocks/map.html
+++ b/chimere/templates/chimere/blocks/map.html
@@ -15,12 +15,6 @@
 <div id='{{map_id}}'></div>
 <script type="text/javascript">
 $("#{{map_id}}").show();
-$(function(){
-   $('#cluster_list').dialog({'autoOpen':false,
-                              'resizable':false,
-                              'width':340,
-                              'dialogClass':'no-titlebar'});
-});
 </script>
 <div id="waiting">
     <div id="waiting-content">
@@ -37,54 +31,49 @@ $(function(){
     {% if not display_category_menu %}
     $(function() {
         $('#panel').hide();
-        $(".show-hide-panel").hide();
         $("#categories-lnk").hide();
     });{% endif %}
     {{extra_js|safe}}
-    var chimere_init_options = {};
-    {% if MOBILE %}chimere_init_options["mobile"] = true;{% endif %}
-    {% if enable_clustering %}chimere_init_options["enable_clustering"] = true;{% endif %}
-    chimere_init_options["default_icon"] = '{{STATIC_URL}}img/marker-green.png';
-    {% if js_map_layers %}chimere_init_options["map_layers"] = [{{js_map_layers|safe|escape}}];{% endif %}
-    chimere_init_options['permalink_label'] = '{%trans "Permalink"%}';
-    chimere_init_options['permalink_element'] = document.getElementById('permalink');
-    chimere_init_options['routing'] = {{routing}};
-    {% if dynamic_categories %}chimere_init_options['dynamic_categories'] = true;{% endif %}
-    {% if default_area %}
-    chimere_init_options["default_area"] = new Array({{default_area.upper_left_corner.x}}, {{default_area.upper_left_corner.y}}, {{default_area.lower_right_corner.x}}, {{default_area.lower_right_corner.y}});
-    {% endif %}
-    {% if p_zoom %}chimere_init_options["zoom"] = {{ p_zoom }};{% endif %}
-    {% if p_lat %}chimere_init_options["lat"] = {{ p_lat }};{% endif %}
-    {% if p_lon %}chimere_init_options["lon"] = {{ p_lon }};{% endif %}
-    {% if p_routing_start_lon %}chimere_init_options["routing_start_lon"] = {{ p_routing_start_lon }};{% endif %}
-    {% if p_routing_start_lat %}chimere_init_options["routing_start_lat"] = {{ p_routing_start_lat }};{% endif %}
-    {% if p_routing_end_lon %}chimere_init_options["routing_end_lon"] = {{ p_routing_end_lon }};{% endif %}
-    {% if p_routing_end_lat %}chimere_init_options["routing_end_lat"] = {{ p_routing_end_lat }};{% endif %}
-    {% if p_routing_steps %}chimere_init_options["routing_steps_lonlat"] = [{{ p_routing_steps }}];{% endif %}
-    {% if p_routing_transport %}chimere_init_options["routing_transport"] = "{{ p_routing_transport }}";{% endif %}
-    {% if p_routing_speed %}chimere_init_options["routing_speed"] = "{{ p_routing_speed }}";{% endif %}
-    chimere_init_options["icon_offset"] = ({{icon_offset_x}}, {{icon_offset_y}});
-    chimere_init_options["dynamic_categories"] = {{ dynamic_categories }};
-    {% if p_display_submited %}chimere_init_options["display_submited"] = {{ p_display_submited }};{% endif %}
-    chimere_init_options["checked_categories"] = [{% for cc in checked_categories %}{% if forloop.counter0 > 0 %}, {% endif %}{{cc}}{% endfor %}];
-    {% if area_id %}chimere_init_options['area_id'] = "{{area_id}}";{% endif %}
-    {% if p_current_feature %}
-    chimere_init_options["display_feature"] = {{ p_current_feature }};{% endif %}
-    {% if p_current_route %}
-    chimere_init_options["display_route"] = {{ p_current_route }};{% endif %}
+    var chimere_init_options = {
+        {% if MOBILE %}"mobile": true,{% endif %}
+        {% if enable_clustering %}"enable_clustering": true,{% endif %}
+        {% if js_map_layers %}"map_layers": [{{js_map_layers|safe|escape}}],{% endif %}
+        {% if dynamic_categories %}'dynamic_categories': true,{% endif %}
+        {% if default_area %}"default_area": new Array({{default_area.upper_left_corner.x}}, {{default_area.upper_left_corner.y}}, {{default_area.lower_right_corner.x}}, {{default_area.lower_right_corner.y}}),{% endif %}
+        {% if p_zoom %}"zoom": {{ p_zoom }},{% endif %}
+        {% if p_lat %}"lat": {{ p_lat }},{% endif %}
+        {% if p_lon %}"lon": {{ p_lon }},{% endif %}
+        {% if p_routing_start_lon %}"routing_start_lon": {{ p_routing_start_lon }},{% endif %}
+        {% if p_routing_start_lat %}"routing_start_lat": {{ p_routing_start_lat }},{% endif %}
+        {% if p_routing_end_lon %}"routing_end_lon": {{ p_routing_end_lon }},{% endif %}
+        {% if p_routing_end_lat %}"routing_end_lat": {{ p_routing_end_lat }},{% endif %}
+        {% if p_routing_steps %}"routing_steps_lonlat": [{{ p_routing_steps }}],{% endif %}
+        {% if p_routing_transport %}"routing_transport": "{{ p_routing_transport }}",{% endif %}
+        {% if p_routing_speed %}"routing_speed": "{{ p_routing_speed }}",{% endif %}
+        "dynamic_categories": {{ dynamic_categories }},
+        {% if p_display_submited %}"display_submited": {{ p_display_submited }},{% endif %}
+        "checked_categories": [{% for cc in checked_categories %}{% if forloop.counter0 > 0 %}, {% endif %}{{cc}}{% endfor %}],
+        {% if area_id %}'area_id': "{{area_id}}",{% endif %}
+        {% if p_current_feature %}
+        "display_feature": {{ p_current_feature }},{% endif %}
+        {% if p_current_route %}
+        "display_route": {{ p_current_route }},{% endif %}
+        {% if popupContentFull %}"popupContentFull": true,{% endif %}
+        {% if selected_map_layer %}"selected_map_layer": {{selected_map_layer}},{% endif %}
+        "open_dialog_fx": function (title, content){
+            $('#category_description-content').html(content);
+            $('#category_description-label').html(title);
+            $('#category_description').modal('show');},
+        'permalink_element': document.getElementById('permalink'),
+        "default_icon": '{{STATIC_URL}}img/marker-green.png',
+        'routing': {{routing}},
+        'permalink_label': '{%trans "Permalink"%}'
+    };
     {% if restricted_extent %}{{ restricted_extent }}
     chimere_init_options["restricted_extent"] = bounds;
     {% endif %}
-    {% if selected_map_layer %}
-    chimere_init_options["selected_map_layer"] = {{selected_map_layer}};
-    {% endif %}
 
     $('#category_description').modal({show:false});
-    chimere_init_options["open_dialog_fx"] = function (title, content){
-        $('#category_description-content').html(content);
-        $('#category_description-label').html(title);
-        $('#category_description').modal('show');
-    }
     $("#main-map").chimere(chimere_init_options);
     {% if zoom %}
     $('#maps').chimere('zoom', {'area':{{zoom}} });
@@ -118,5 +107,16 @@ $(function(){
     */
 </script>
 <div id='marker_hover'><div id='marker_hover_content'></div></div>
-<div id='cluster_list'></div>
+<div class="modal fade" id="cluster_list" tabindex="-1" role="dialog" aria-labelledby="cluster-label" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header modal-header-success">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="cluster-label">&nbsp;</h4>
+      </div>
+      <div class="modal-body">
+      </div>
+    </div>
+  </div>
+</div>
 
diff --git a/chimere/templates/chimere/detail.html b/chimere/templates/chimere/detail.html
index c7a56ec..91826d1 100644
--- a/chimere/templates/chimere/detail.html
+++ b/chimere/templates/chimere/detail.html
@@ -1,7 +1,9 @@
 {% load i18n sanitize chimere_tags %}
 <div id='detail-wrapper'>
+{% if not popup %}
 <button onclick='$("#detail").fadeOut();return false;' type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 <h2>{{ marker.name }}</h2>
+{% endif %}
 <div class='detail_content'>
     {% if marker.default_pictures or marker.default_pictures or marker.default_multimedia_items%}
     <div class='small-gallery'>
@@ -21,11 +23,11 @@
     {% if marker.description %}
     <p class='description'>{{ marker.description|sanitize:"p b i br hr strong em img:src:alt span:style a:href:target ul li ol h1 h2 h3 h4 table td tr th"|safe}}</p>
     {% endif %}
-    {% for property in properties %}
+    {% for property in properties %}{% if property.value %}
     <p class='{{property.propertymodel.getNamedId}}'><strong>{{property.propertymodel}}</strong>{% trans ":" %} {{ property.value|sanitize:"p b i br hr strong em img:src:alt span:style a:href:target ul li ol h1 h2 h3 h4 table td tr th"|safe}}</p>
-    {% endfor %}
-    {% if marker.origin %}<p class='detail_source'><strong>{% trans "Source:" %}</strong> <span>{{marker.origin}}</span></p>{% endif %}
-    {% if marker.license %}<p class='detail_license'><strong>{% trans "License:" %}</strong> <span>{{marker.license}}</span></p>{% endif %}
+    {% endif %}{% endfor %}
+    {% if marker.origin %}<p class='detail_source'><strong>{% trans "Source:" %}</strong> <span>{{marker.origin|sanitize:"a:href:target"|safe}}</span></p>{% endif %}
+    {% if marker.license %}<p class='detail_license'><strong>{% trans "License:" %}</strong> <span>{{marker.license|sanitize:"a:href:target"|safe}}}</span></p>{% endif %}
     {% if marker.multimedia_items %}<p class='detail_multimedia'>
         <a data-toggle='modal' data-target="#multimedia-gallery-{{time_now}}" href='#' id='multimedia-gallery-button'><span class='fa fa-chimere-action fa-camera'></span> <span class='lbl'>{% trans "Show the gallery"%}</span></a>
     </p>{% endif %}
diff --git a/chimere/templates/chimere/main_map.html b/chimere/templates/chimere/main_map.html
index 7909523..fd3f0b8 100644
--- a/chimere/templates/chimere/main_map.html
+++ b/chimere/templates/chimere/main_map.html
@@ -13,8 +13,6 @@
 {% block message_edit %}{% endblock %}
 {% block sidebar %}
 {% display_news %}
-    <div class='show-hide-panel' id='hide-panel'><span class='fa fa-arrow-circle-left'></span></div>
-    <div class='show-hide-panel' id='show-panel'><span class='fa fa-arrow-circle-right'></span></div>
     <div id='panel' class='navbar-default'>
       <form id="frm_categories"><div id='categories'></div></form>
       <div id='search-box' class='ui-widget ui-corner-all'></div>
diff --git a/chimere/templatetags/chimere_tags.py b/chimere/templatetags/chimere_tags.py
index 7765452..9337f75 100644
--- a/chimere/templatetags/chimere_tags.py
+++ b/chimere/templatetags/chimere_tags.py
@@ -215,11 +215,8 @@ def routing(context):
 def map(context, map_id='map'):
     context_data = {'map_id': map_id,
                     "STATIC_URL": settings.STATIC_URL,
-                    "enable_clustering": settings.CHIMERE_ENABLE_CLUSTERING}
-    context_data['icon_offset_x'] = settings.CHIMERE_ICON_OFFSET_X
-    context_data['icon_offset_y'] = settings.CHIMERE_ICON_OFFSET_Y
-    context_data['icon_width'] = settings.CHIMERE_ICON_WIDTH
-    context_data['icon_height'] = settings.CHIMERE_ICON_HEIGHT
+                    "enable_clustering": settings.CHIMERE_ENABLE_CLUSTERING,
+                    "popupContentFull": settings.CHIMERE_CONTENT_INSIDE_POPUP}
     context_data['MOBILE'] = context['MOBILE']
     context_data['routing'] = 'true' \
         if hasattr(settings, 'CHIMERE_ENABLE_ROUTING') and \
diff --git a/chimere/urls.py b/chimere/urls.py
index a956e44..d5a31c0 100644
--- a/chimere/urls.py
+++ b/chimere/urls.py
@@ -116,6 +116,9 @@ urlpatterns += patterns(
     url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?getDetail/'
         r'(?P<key>[a-zA-Z_-]*\d+)/?$',
         'getDetail', name="get_detail"),
+    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?getDetail/popup/'
+        r'(?P<key>[a-zA-Z_-]*\d+)/?$',
+        'getDetail', {'popup': True}, name="get_detail"),
     url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?getDetail/undefined',
         'getDetailUndefined', name="get_detail_undefined"),
     url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?getDescriptionDetail/'
diff --git a/chimere/views.py b/chimere/views.py
index 0866c90..eab700e 100644
--- a/chimere/views.py
+++ b/chimere/views.py
@@ -573,7 +573,7 @@ def getDetailUndefined(request, area_name):
     return HttpResponse('')
 
 
-def getDetail(request, area_name, key):
+def getDetail(request, area_name, key, popup=False):
     '''
     Get the detail of a geographic item
     '''
@@ -596,6 +596,7 @@ def getDetail(request, area_name, key):
     if redir:
         return redir
     response_dct['marker'] = marker
+    response_dct['popup'] = popup
     if request.method == 'GET':
         if 'simple' in request.GET and request.GET['simple']:
             response_dct['simple'] = True
diff --git a/chimere_example_project/chimere_example_static/chimere/css/extra-styles.css b/chimere_example_project/chimere_example_static/chimere/css/extra-styles.css
deleted file mode 100644
index d326aeb..0000000
--- a/chimere_example_project/chimere_example_static/chimere/css/extra-styles.css
+++ /dev/null
@@ -1,474 +0,0 @@
-#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;
-}
-
-.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{
-    max-height:none;
-    left:0;
-    bottom:0;
-    border:0 transparent;
-    border-left:1px solid #E7E7E7;
-    padding:16px;
-    padding-top:60px;
-    width:400px;
-    background-image:url('../img/logo.jpg');
-    background-position:bottom center;
-    background-repeat:no-repeat;
-    z-index:12;
-}
-
-#detail {
-    position:static;
-    border:0 transparent;
-}
-
-#detail div {
-    margin:auto;
-}
-
-#detail-wrapper div {
-}
-
-#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;
-}
-
-#categories input{
-    display:None;
-}
-
-.category_name{
-    font-weight:bold;
-}
-
-.subcategory label{
-    padding: 0 0.5em;
-    border-radius:5px;
-    font-weight:normal;
-}
-
-.subcategory.selected label{
-    background-color:rgb(175, 231, 175);
-}
-
-#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-hide-panel{
-    position:absolute;
-    left: 400px;
-    top: 0;
-    bottom: 0;
-    background-color:#eee;
-    width:20px;
-    z-index:10;
-    color:#666;
-}
-
-.show-hide-panel:hover{
-    cursor:pointer;
-}
-
-.show-hide-panel span {
-    position:absolute;
-    left:2px;
-    top:200px;
-    color:#449506;
-}
-
-#show-panel{
-    left:0;
-    display:none;
-}
-
-@media (max-width: 767px) {
-    #show-panel{
-        display:block;
-    }
-    #panel, #hide-panel{
-        display:none;
-    }
-    #footer .map-footer {
-        right:20px;
-    }
-}
-
-@media (min-height: 400px) {
-    .show-hide-panel span {
-        top:300px;
-    }
-}
-
-#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_example_project/settings.py b/chimere_example_project/settings.py
index 6878def..e96f2cb 100644
--- a/chimere_example_project/settings.py
+++ b/chimere_example_project/settings.py
@@ -62,10 +62,8 @@ CHIMERE_FEEDS = True
 # display a directory of items
 CHIMERE_DIRECTORY = True
 
-CHIMERE_ICON_WIDTH = 21
-CHIMERE_ICON_HEIGHT = 25
-CHIMERE_ICON_OFFSET_X = 10
-CHIMERE_ICON_OFFSET_Y = 25
+# content inside the popup or on a specific window
+CHIMERE_CONTENT_INSIDE_POPUP = False
 
 # display picture inside the description by default or inside a galery?
 CHIMERE_MINIATURE_BY_DEFAULT = False