acanimal / animatedcluster Goto Github PK
View Code? Open in Web Editor NEWCluster strategy for OpenLayers that animates clusters when zoom changes.
Cluster strategy for OpenLayers that animates clusters when zoom changes.
AnimatedCluster creates new features on the map each time the map moves. This leads to a problem when panning in the following scenario:
Let's say we use OpenLayers SelectControl for opening and closing popups. When a user clicks a cluster a popup opens. Sometimes, when the popup is very big, the map pans. Then a click on the X icon for closing the popup does not unselect the cluster the original cluster feature as it was already replaced by another.
This does not seem to happen if you use the normal cluster strategy with a threshold of 1. So I assume it hast to have something to do with the AnimatedCluster code.
This bug is not very urgent as I found a workaround by radically closing all popups when it seems appropriate. However, it would be nice if the select controls did still work.
Hi Antonio
This is fantastic! I Really want to use this form of clustering in openlayers but how do I go about this if I have a wms? Do I have publish as a wfs firstly?
hello
if i use the function "featureselected" the string feature.attributes.id_test; is undefined
how can i get this value or another one from "attributes" of a feature ?
for (var i=0; i<data.length; i++) {
var lon = data[i].x;
var lat = data[i].y;
var id_poi = data[i].id_poi; // --> i have the value
var f = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point( lon, lat ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),
{
"id_test":data[i].id_poi // --> i add the value
}
);
features.push(f);
}
couche_markers.addFeatures(features); // add POI
// active control
click = new OpenLayers.Control.SelectFeature( [couche_markers], { clickout: false, toggle: false});
map.addControl(click);
couche_markers.events.on({
"featureselected": function(e) {
var feature = e.feature;
id_poi = feature.attributes.id_test;
console.log("show id poi"+id_poi"; //--> ERROR the variable is undefined
}
});
Hi there,
are you planning to make some updates for the new version of OL? Would be great to see it there aswell. I love this animated cluster, but have some issues in 2.12 with flickering map tiles.
kind regards
If I create two identical vector layers with one using OpenLayers.Strategy.AnimatedCluster and the other using OpenLayers.Strategy.Cluster, the layer containing the AnimatedCluster returns the incorrect data bounds (using GetDataExtent()); however, the other layer returns the correct data bounds.
Start the animation action once the zoom end event is fired.
I have added your AnimatedCluster code to a project I have been working on. I really like the way the animations work.
I have noticed a problem, however, when zooming in on the map, the clusters are continually redrawn, making them flash on the map. I have poked around inside AnimatedCluster.js and found that by changing this (at line 147 inside the cluster function):
if (resolution != this.resolution) { this.zoomIn = (!this.resolution || (resolution <= this.resolution)); }
to:
if (resolution != this.resolution) { this.zoomIn = (!this.resolution || ((resolution <= this.resolution)||(resolution > this.resolution))); }
Stopped the flashing.
Once you have made a zoom in action if you pan the map then there are no cluster out there.
It would be really cool if the cluster colors can be defined depending on the feature attribute. This way, it would be possible to cluster all the "houses" red, but all the "schools" green.
hello
when there is only one point in a position i'd like to have a custom marker
so i created this rule
but i can't get one of the attribues value of my feature
i the example below
i'd like to have this (where cat_id is an attributes of a feature)
externalGraphic: "/drawable-hdpi/theme/Cat_${cat_id}_poi.png",
thanks for your help
// Define three rules to style the cluster features.
var oneRule = new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.LESS_THAN,
property: "count",
value: 2
}),
symbolizer: {
fillOpacity: 1,
opacity : 1,
externalGraphic: "/drawable-hdpi/theme/Cat_20_02_poi.png",
graphicHeight: 50, graphicWidth: 50, graphicXOffset:-25, graphicYOffset:-25
}
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.