diff options
| -rw-r--r-- | chimere/admin.py | 4 | ||||
| -rw-r--r-- | chimere/static/chimere/img/empty.png | bin | 0 -> 165 bytes | |||
| -rw-r--r-- | chimere/static/chimere/img/marker-cluster.png | bin | 0 -> 949 bytes | |||
| -rw-r--r-- | chimere/static/chimere/js/jquery.chimere.js | 138 |
4 files changed, 133 insertions, 9 deletions
diff --git a/chimere/admin.py b/chimere/admin.py index 24d28ed..977a9b4 100644 --- a/chimere/admin.py +++ b/chimere/admin.py @@ -244,6 +244,10 @@ class MultimediaTypeAdmin(admin.ModelAdmin): list_display = ('name', 'media_type', 'mime_type', 'iframe', 'available') list_filter = ('media_type', 'available') +class MultimediaExtensionAdmin(admin.ModelAdmin): + list_display = ('name', 'multimedia_type') + list_filter = ('multimedia_type',) + class PropertyModelChoiceInline(admin.TabularInline): model = PropertyModelChoice extra = 1 diff --git a/chimere/static/chimere/img/empty.png b/chimere/static/chimere/img/empty.png Binary files differnew file mode 100644 index 0000000..1ad1e19 --- /dev/null +++ b/chimere/static/chimere/img/empty.png diff --git a/chimere/static/chimere/img/marker-cluster.png b/chimere/static/chimere/img/marker-cluster.png Binary files differnew file mode 100644 index 0000000..3d15153 --- /dev/null +++ b/chimere/static/chimere/img/marker-cluster.png diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js index c5a88a5..37f27a4 100644 --- a/chimere/static/chimere/js/jquery.chimere.js +++ b/chimere/static/chimere/js/jquery.chimere.js @@ -107,7 +107,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { default_icon: new OpenLayers.Icon( 'http://www.openlayers.org/dev/img/marker-green.png', new OpenLayers.Size(21, 25), - new OpenLayers.Pixel(-(21/2), -25)) + new OpenLayers.Pixel(-(21/2), -25)), + cluster_icon: null }; var settings = {}; /* @@ -119,6 +120,13 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { */ init: function ( options ) { /* Manage parameters */ + // not staticaly in default because of STATIC_URL init + if (defaults.cluster_icon == null){ + defaults.cluster_icon = new OpenLayers.Icon( + STATIC_URL+'chimere/img/marker-cluster.png', + new OpenLayers.Size(36, 36), + new OpenLayers.Pixel(-(36/2), -(36/2))); + } settings = $.extend({}, defaults); if ( options ) $.extend(settings, options); var map_element = $(this).get(0); @@ -251,6 +259,71 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { settings.map.addControl(new OpenLayers.Control.ModifyFeature( settings.layerVectors, {clickout:false, toggle:false})); } + + var style = new OpenLayers.Style({ + graphicTitle: "${name}", + externalGraphic: "${icon}", + graphicWidth: "${width}", + graphicHeight: "${height}", + graphicXOffset: "${offsetx}", + graphicYOffset: "${offsety}", + graphicOpacity: 1, + label: "${label}", + fontWeight:'bold', + fontSize:'1.3em' + }, { + context: { + name: function(feature) { + if(feature.cluster) { + feature.attributes.width = settings.cluster_icon.size.w; + feature.attributes.height = settings.cluster_icon.size.h; + feature.attributes.offsetx = settings.cluster_icon.offset.x; + feature.attributes.offsety = settings.cluster_icon.offset.y; + } else{ + var marker = feature.attributes.marker + feature.attributes.width = marker.icon.size.w; + feature.attributes.height = marker.icon.size.h; + feature.attributes.offsetx = settings.icon_offset.x; + feature.attributes.offsety = settings.icon_offset.y; + } + return feature.attributes.name; + }, + label: function(feature) { + // clustered features count or blank if feature is not a cluster + return feature.cluster ? feature.cluster.length : ""; + }, + icon: function(feature) { + if (feature.cluster){ + return settings.cluster_icon.url; + } else { + return STATIC_URL + 'chimere/img/empty.png'; + } + }, + width: function(feature) { return feature.attributes.width; }, + height: function(feature) { return feature.attributes.height; }, + offsetx: function(feature) { return feature.attributes.offsetx; }, + offsety: function(feature) { return feature.attributes.offsety; } + }}); + + + /* Cluster layer */ + var strategy = new OpenLayers.Strategy.Cluster({distance: 20, + threshold: 3}); + settings.layerCluster = new OpenLayers.Layer.Vector("Cluster layer", + {styleMap: new OpenLayers.StyleMap({'default': style}), + strategies: [strategy]}); + settings.map.addLayer(settings.layerCluster); + + var clusterSelect = new OpenLayers.Control.SelectFeature( + settings.layerCluster); + settings.map.addControl(clusterSelect); + clusterSelect.activate(); + settings.layerCluster.events.on({ + 'featureselected': methods.zoomOnCluster, + 'featurehighlighted': function (evt) { + document.body.style.cursor='pointer';} + }); + /* Markers layer */ settings.layerMarkers = new OpenLayers.Layer.Markers('POIs'); settings.map.addLayer(settings.layerMarkers); @@ -280,6 +353,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { } if (!settings.edition){ + settings.map.events.register('zoomend', null, + methods.cleanCluster); methods.loadCategories(); methods.loadGeoObjects(); methods.activateContextMenu() @@ -352,12 +427,6 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { settings.map.zoomIn(); }, - // zoom in from the map menu - zoomIn: function(){ - methods.mapCenter(); - settings.map.zoomIn(); - }, - // zoom out from the map menu zoomOut: function(){ methods.mapCenter(); @@ -374,6 +443,16 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { setCurrentPosition: function(lonlat){ settings.current_position = lonlat; }, + zoomOnCluster: function(e){ + if(!e.feature.cluster) // if not cluster + { + e.feature.attributes.marker.events.triggerEvent('click'); + } else { + settings.map.setCenter( + e.feature.geometry.getBounds().getCenterLonLat()); + methods.zoomIn(); + } + }, /* * Display menu on the map @@ -408,6 +487,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { success: function (data) { settings.layerMarkers.clearMarkers(); settings.layerVectors.removeAllFeatures(); + settings.cluster_array = []; for (var i = 0; i < data.features.length; i++) { var feature = data.features[i]; if (feature.geometry.type == 'Point'){ @@ -416,6 +496,9 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { methods.addRoute(feature); } } + settings.layerCluster.addFeatures( + settings.cluster_array); + methods.cleanCluster(); }, error: function (data) { settings.layerMarkers.clearMarkers(); @@ -541,6 +624,26 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { } }, /* + * Hide clusterized markers + */ + cleanCluster: function (){ + var hidden_feature_idx = []; + for(var idx=0; idx<settings.layerCluster.features.length; idx++){ + if(settings.layerCluster.features[idx].cluster){ + for(var c=0; c < settings.layerCluster.features[idx].cluster.length; c++) { + hidden_feature_idx.push(settings.layerCluster.features[idx].cluster[c].attributes.pk); + } + } + } + for(j=0; j<settings.layerMarkers.markers.length;j++){ + if(hidden_feature_idx.indexOf(settings.layerMarkers.markers[j].pk) > -1){ + settings.layerMarkers.markers[j].display(false); + } else { + settings.layerMarkers.markers[j].display(true); + } + } + }, + /* * Put a marker on the map */ addMarker: function (mark) { @@ -554,9 +657,11 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { mark.properties.icon_height); var iconclone = new OpenLayers.Icon(MEDIA_URL + mark.properties.icon_path, size, settings.icon_offset); + var feature = new OpenLayers.Feature(settings.layerMarkers, - new OpenLayers.LonLat(lon, lat).transform(EPSG_DISPLAY_PROJECTION, - EPSG_PROJECTION), + new OpenLayers.LonLat(lon, lat).transform( + EPSG_DISPLAY_PROJECTION, + EPSG_PROJECTION), {icon:iconclone}); feature.pk = mark.properties.pk; feature.popupClass = settings.popupClass; @@ -565,6 +670,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { feature.data.popupContentHTML += "</div>"; feature.data.overflow = 'hidden'; var marker = feature.createMarker(); + marker.pk = feature.pk; /* manage markers events */ var _popup = function() { /* show the popup */ @@ -646,6 +752,20 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { _repan_popup(); methods.loadCategories(); } + + + // manage cluster layer + var point = new OpenLayers.Geometry.Point(lon, lat).transform( + EPSG_DISPLAY_PROJECTION, + 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}; + settings.cluster_array.push(feat); + + + return feature; }, |
