summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--chimere/static/chimere/css/styles.css518
-rw-r--r--chimere/static/chimere/js/jquery.chimere.js497
-rw-r--r--chimere/templates/chimere/base.html6
-rw-r--r--chimere/templates/chimere/blocks/categories.html4
-rw-r--r--chimere/templates/chimere/blocks/map.html94
-rw-r--r--chimere/templates/chimere/detail.html10
-rw-r--r--chimere/templates/chimere/main_map.html2
-rw-r--r--chimere/templatetags/chimere_tags.py7
-rw-r--r--chimere/urls.py3
-rw-r--r--chimere/views.py3
-rw-r--r--chimere_example_project/chimere_example_static/chimere/css/extra-styles.css474
-rw-r--r--chimere_example_project/settings.py6
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
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-16 16:36:37 +0000