From 7f1a18283284729bfd5e4c438f0bc8675ba4e8bb Mon Sep 17 00:00:00 2001 From: Étienne Loks Date: Wed, 28 Sep 2016 23:14:04 +0200 Subject: JS ol3: first version managing cluster (with caching) --- chimere/static/chimere/js/jquery.chimere.js | 130 ++++++++++++++++++++++++---- 1 file changed, 113 insertions(+), 17 deletions(-) diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js index 2cbfced..87e22ea 100644 --- a/chimere/static/chimere/js/jquery.chimere.js +++ b/chimere/static/chimere/js/jquery.chimere.js @@ -133,6 +133,13 @@ function transform(obj) { return obj.transform(EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION); } +var invisibleStyleIcon = new ol.style.Style({ + image: new ol.style.Icon({ + src : STATIC_URL+'chimere/img/marker-cluster.png', //still need something even if it's invisible + opacity : 0 + }) + }); + /* * Little hasattr helper */ @@ -274,6 +281,7 @@ function transform(obj) { })]; } settings = $.extend({}, defaults); + settings._revision = 0; if ( options ) $.extend(settings, options); if (settings.controls == null){ @@ -289,13 +297,18 @@ 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'); @@ -635,6 +648,11 @@ function transform(obj) { } */ + + + if (settings.enable_clustering){ + methods.enableClustering(); + } /* OL3-deprecated-cluster if (settings.enable_clustering){ var style = new OpenLayers.Style({ @@ -764,9 +782,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(); @@ -856,6 +874,7 @@ function transform(obj) { }, 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 +907,86 @@ 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 features = feature.get('features'); + var size = features.length; + 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); + + }, /* Preload icons */ preload_images: function(){ if (typeof extra_url == 'undefined') return; @@ -1087,20 +1186,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 +1208,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(); @@ -1393,9 +1485,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 /* -- cgit v1.2.3 From 8c1c06e773bd71ded8a553af035859c897b40864 Mon Sep 17 00:00:00 2001 From: Étienne Loks Date: Wed, 28 Sep 2016 23:41:29 +0200 Subject: JS ol3: smooth pan and zoom when clicking on a cluster --- chimere/static/chimere/js/jquery.chimere.js | 56 +++++++++++++++++------------ 1 file changed, 34 insertions(+), 22 deletions(-) diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js index 87e22ea..7771b7f 100644 --- a/chimere/static/chimere/js/jquery.chimere.js +++ b/chimere/static/chimere/js/jquery.chimere.js @@ -513,7 +513,7 @@ var invisibleStyleIcon = new ol.style.Style({ // 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){ @@ -523,28 +523,39 @@ var invisibleStyleIcon = new ol.style.Style({ 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'){ + var v = settings.map.getView(); + var pan = ol.animation.pan( + {duration: 500, source: v.getCenter()}) + var zoom = ol.animation.zoom( + {duration: 500, resolution: v.getResolution()}) + settings.map.beforeRender(pan, zoom); + v.setZoom(v.getZoom() + 1); + v.setCenter(feature.getGeometry().getCoordinates()); + } else { + 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]); + } + $(settings.popup_item).popover({ + 'placement': 'top', + 'html': true, + 'content': feature.get('name') + }); + $(settings.popup_item).popover('show'); + methods.display_feature_detail(key); } - $(settings.popup_item).popover({ - 'placement': 'top', - 'html': true, - 'content': feature.get('name') - }); - $(settings.popup_item).popover('show'); - methods.display_feature_detail(key); } else { $(settings.popup_item).popover('destroy'); } @@ -914,6 +925,7 @@ var invisibleStyleIcon = new ol.style.Style({ settings._remindUpdated = {}; settings._currentRemind = -1; function clusterGetStyle (feature, resolution){ + var key = feature.set('key', 'cluster'); var features = feature.get('features'); var size = features.length; var style = settings._styleCache[size]; -- cgit v1.2.3 From a6600ae9cf270460b3b6e37b4f95081405d2f9a8 Mon Sep 17 00:00:00 2001 From: Étienne Loks Date: Fri, 30 Sep 2016 20:43:14 +0200 Subject: JS ol3: multiple zoom on click when the cluster is not exploded - display list for the cluster when at max zoom --- chimere/static/chimere/js/jquery.chimere.js | 176 ++++++++++++++++++++++------ 1 file changed, 140 insertions(+), 36 deletions(-) diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js index 7771b7f..c76267e 100644 --- a/chimere/static/chimere/js/jquery.chimere.js +++ b/chimere/static/chimere/js/jquery.chimere.js @@ -74,6 +74,12 @@ var LayerSwitcher = function(options){ }; // 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 = []; @@ -135,7 +141,7 @@ function transform(obj) { var invisibleStyleIcon = new ol.style.Style({ image: new ol.style.Icon({ - src : STATIC_URL+'chimere/img/marker-cluster.png', //still need something even if it's invisible + src : MEDIA_URL+'chimere/img/marker-cluster.png', //still need something even if it's invisible opacity : 0 }) }); @@ -198,7 +204,8 @@ var invisibleStyleIcon = new ol.style.Style({ 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, @@ -314,12 +321,16 @@ var invisibleStyleIcon = new ol.style.Style({ 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, @@ -524,37 +535,9 @@ var invisibleStyleIcon = new ol.style.Style({ } if (key && key.length > 6 && key.substring(0, 7) == 'cluster'){ - var v = settings.map.getView(); - var pan = ol.animation.pan( - {duration: 500, source: v.getCenter()}) - var zoom = ol.animation.zoom( - {duration: 500, resolution: v.getResolution()}) - settings.map.beforeRender(pan, zoom); - v.setZoom(v.getZoom() + 1); - v.setCenter(feature.getGeometry().getCoordinates()); + feature = methods.clickOnCluster(feature); } else { - 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]); - } - $(settings.popup_item).popover({ - 'placement': 'top', - 'html': true, - 'content': feature.get('name') - }); - $(settings.popup_item).popover('show'); - methods.display_feature_detail(key); + methods.openPopup(feature); } } else { $(settings.popup_item).popover('destroy'); @@ -999,6 +982,125 @@ var invisibleStyleIcon = new ol.style.Style({ settings.map.addLayer(settings.clusterLayer); }, + clickOnCluster: function(feature, zoom_level, duration, nb_zoom, + current_nb_items){ + if (!duration) duration = 500; + 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 = "
    "; + for (idx in feats){ + var props = feats[idx].getProperties(); + content += "
  • " + + "" + + props.name + "
    • "; + } + content += "
"; + $('#cluster_list').html(content); + $('#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').dialog('close'); + var splitted = $(this).attr('id').split('_'); + var index = splitted[splitted.length-1]; + feat = feats[parseInt(index)] + methods.openPopup(feat); + //.attributes.marker; + //m.events.triggerEvent('click'); + e.stopPropagation(); + return false; + }); + return feature; + }, + openPopup: function(feature){ + 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]); + } + $(settings.popup_item).popover({ + 'placement': 'top', + 'html': true, + 'content': feature.get('name') + }); + $(settings.popup_item).popover('show'); + methods.display_feature_detail(feature.get('key')); + }, + /* end of new ol3 */ /* Preload icons */ preload_images: function(){ if (typeof extra_url == 'undefined') return; @@ -1102,6 +1204,7 @@ var invisibleStyleIcon = new ol.style.Style({ addLayer: function(layer){ settings.map.addLayer(layer); }, + /* zoomOnCluster: function(feature){ if(!feature.cluster) // if not cluster { @@ -1136,7 +1239,7 @@ var invisibleStyleIcon = new ol.style.Style({ }); } }, - + */ /* * Display menu on the map */ @@ -1469,6 +1572,7 @@ var invisibleStyleIcon = new ol.style.Style({ 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 }); -- cgit v1.2.3 From 94884953cd73aeb1001485d92d43e4b6626a13d3 Mon Sep 17 00:00:00 2001 From: Étienne Loks Date: Sat, 1 Oct 2016 13:08:10 +0200 Subject: Merge extra-styles.css in styles.css --- chimere/static/chimere/css/styles.css | 507 ++++++++++++++++++++- .../chimere/css/extra-styles.css | 474 ------------------- 2 files changed, 500 insertions(+), 481 deletions(-) delete mode 100644 chimere_example_project/chimere_example_static/chimere/css/extra-styles.css diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css index e873b8a..a0e6a26 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; } @@ -1124,7 +1141,6 @@ div.pp_default .pp_expand{ #cluster_list span{ vertical-align:middle; display:inline-block; - width:210px; cursor:pointer; } @@ -1300,3 +1316,480 @@ 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{ + 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/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; -} -- cgit v1.2.3 From ea4e994b8b9c8dec7f2851810533914595a773e5 Mon Sep 17 00:00:00 2001 From: Étienne Loks Date: Sat, 1 Oct 2016 13:09:30 +0200 Subject: Cluster: manage item list at max zoom - now use bootstrap for the window --- chimere/static/chimere/js/jquery.chimere.js | 57 +++++++++++++++++++---------- chimere/templates/chimere/base.html | 5 +-- chimere/templates/chimere/blocks/map.html | 16 +++++++- 3 files changed, 53 insertions(+), 25 deletions(-) diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js index c76267e..fe75c72 100644 --- a/chimere/static/chimere/js/jquery.chimere.js +++ b/chimere/static/chimere/js/jquery.chimere.js @@ -911,6 +911,7 @@ var invisibleStyleIcon = new ol.style.Style({ 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){ @@ -1053,22 +1054,30 @@ var invisibleStyleIcon = new ol.style.Style({ props.name + ""; } content += ""; - $('#cluster_list').html(content); - $('#cluster_list').dialog('open'); + $('#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').dialog('close'); + $('#cluster_list').modal('hide'); var splitted = $(this).attr('id').split('_'); var index = splitted[splitted.length-1]; - feat = feats[parseInt(index)] - methods.openPopup(feat); + 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()); //.attributes.marker; //m.events.triggerEvent('click'); e.stopPropagation(); @@ -1076,22 +1085,30 @@ var invisibleStyleIcon = new ol.style.Style({ }); return feature; }, - openPopup: function(feature){ - 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]); + openPopup: function(feature, offset_x, offset_y, alt_coordinates){ + 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, diff --git a/chimere/templates/chimere/base.html b/chimere/templates/chimere/base.html index fc3afb8..5417fea 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 %} + + {% if css_area %} @@ -8,10 +10,7 @@ {% if MOBILE %} {%endif%} - - -
@@ -118,5 +119,16 @@ $(function(){ */
-
+ -- cgit v1.2.3 From e1448d214af042878a799582183a7cb0b52d8bbf Mon Sep 17 00:00:00 2001 From: Étienne Loks Date: Sat, 1 Oct 2016 16:20:52 +0200 Subject: Simplify show-hide --- chimere/static/chimere/css/styles.css | 48 ++++++------------------------- chimere/templates/chimere/blocks/map.html | 1 - chimere/templates/chimere/main_map.html | 2 -- 3 files changed, 8 insertions(+), 43 deletions(-) diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css index a0e6a26..d6c7ca3 100644 --- a/chimere/static/chimere/css/styles.css +++ b/chimere/static/chimere/css/styles.css @@ -1462,18 +1462,14 @@ label.labelSpan.olButton{ } #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; + 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 { @@ -1733,28 +1729,6 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button, } } -.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; @@ -1772,12 +1746,6 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button, } } -@media (min-height: 400px) { - .show-hide-panel span { - top:300px; - } -} - #content .olControlSimplePanZoom{ top: 58px !important; left: auto !important; diff --git a/chimere/templates/chimere/blocks/map.html b/chimere/templates/chimere/blocks/map.html index a2b6cba..04cf56f 100644 --- a/chimere/templates/chimere/blocks/map.html +++ b/chimere/templates/chimere/blocks/map.html @@ -38,7 +38,6 @@ $(function(){ {% if not display_category_menu %} $(function() { $('#panel').hide(); - $(".show-hide-panel").hide(); $("#categories-lnk").hide(); });{% endif %} {{extra_js|safe}} 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 %} -
-