diff options
| -rw-r--r-- | chimere/static/chimere/css/styles.css | 27 | ||||
| -rw-r--r-- | chimere/static/chimere/js/jquery.chimere.js | 27 | ||||
| -rw-r--r-- | chimere/templates/chimere/blocks/map.html | 10 |
3 files changed, 60 insertions, 4 deletions
diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css index ea7d4c0..ab68d68 100644 --- a/chimere/static/chimere/css/styles.css +++ b/chimere/static/chimere/css/styles.css @@ -1024,6 +1024,32 @@ div.pp_default .pp_expand{ padding:0.1em 0.5em; } +#cluster_list{ + background-image:none; +} + +#cluster_list ul{ + list-style-type:none; + margin:0; + padding:0; +} + +#cluster_list img{ + vertical-align:middle; + display:inline-block; +} + +#cluster_list span{ + vertical-align:middle; + display:inline-block; + width:210px; + cursor:pointer; +} + +#cluster_list li{ + padding:0 6px; +} + .olControlSimplePanZoom { top: 10px; right: 10px; @@ -1033,7 +1059,6 @@ div.pp_default .pp_expand{ background-image: url('../img/map_sprite.png'); position:absolute; background-repeat: no-repeat; - cursor:hand; cursor:pointer; } diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js index 59e00c8..f984e22 100644 --- a/chimere/static/chimere/js/jquery.chimere.js +++ b/chimere/static/chimere/js/jquery.chimere.js @@ -527,12 +527,34 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { if(!feature.cluster) // if not cluster { feature.attributes.marker.events.triggerEvent('click'); + feature.attributes.marker.events.triggerEvent('touchstart'); feature.attributes.marker.events.triggerEvent('mouseover'); feature.attributes.marker.events.triggerEvent('mouseout'); } else { + var content = "<div class='dialog-content'><ul>"; + for (var idx=0;idx<feature.cluster.length; idx++){ + var feat = feature.cluster[idx]; + content += "<li><img src="+feat.attributes.icon+">" + + "<span class='cluster_list' id='cluster_list_"+idx+"'>" + + feat.attributes.name + "</span></li>"; + } + content += "</ul></div>"; + $('#cluster_list').html(content); + $('#cluster_list').dialog('open'); methods.zoomIn(); 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]; + m = settings.clustered_feature[parseInt(index)].attributes.marker; + m.events.triggerEvent('click'); + e.stopPropagation(); + }); } }, @@ -799,6 +821,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { feature.data.overflow = 'hidden'; var marker = feature.createMarker(); marker.pk = feature.pk; + marker.name = mark.properties.name; marker.icon_url = icon_url; marker.icon_hover_url = icon_hover_url; marker.category_name = mark.properties.category_name; @@ -945,8 +968,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { EPSG_PROJECTION); var feat = new OpenLayers.Feature.Vector(point); feat.attributes = { icon: MEDIA_URL + mark.properties.icon_path, - name: "", label:"", pk:mark.properties.pk, - marker:marker}; + name: mark.properties.name, label:"", + pk:mark.properties.pk, marker:marker}; settings.cluster_array.push(feat); } diff --git a/chimere/templates/chimere/blocks/map.html b/chimere/templates/chimere/blocks/map.html index 75be866..07f0618 100644 --- a/chimere/templates/chimere/blocks/map.html +++ b/chimere/templates/chimere/blocks/map.html @@ -1,7 +1,13 @@ {% load i18n %} <div id='{{map_id}}'></div> <script type="text/javascript"> - $("#{{map_id}}").show(); +$("#{{map_id}}").show(); +$(function(){ + $('#cluster_list').dialog({'autoOpen':false, + 'resizable':false, + 'width':340, + 'dialogClass':'no-titlebar'}); +}); </script> <div id="waiting"> <div id="waiting-content"> @@ -83,3 +89,5 @@ }); </script> <div id='marker_hover'><div id='marker_hover_content'></div></div> +<div id='cluster_list'></div> + |