https://github.com/viglino/ol3-animatedcluster

OL3-AnimatedCluster is now part of the ol-ext project
https://github.com/viglino/ol3-animatedcluster

animation cluster javascript maps ol3 ol3-ext openlayers

Last synced: 8 days ago
JSON representation

OL3-AnimatedCluster is now part of the ol-ext project

• Host: GitHub
• URL: https://github.com/viglino/ol3-animatedcluster
• Owner: Viglino
• Created: 2015-09-30T15:34:13.000Z (about 9 years ago)
• Default Branch: gh-pages
• Last Pushed: 2018-07-04T07:13:02.000Z (over 6 years ago)
• Last Synced: 2024-11-01T02:34:15.410Z (15 days ago)
• Topics: animation, cluster, javascript, maps, ol3, ol3-ext, openlayers
• Language: JavaScript
• Homepage: http://viglino.github.io/ol-ext/examples/animation/map.animatedcluster.html
• Size: 355 KB
• Stars: 68
• Watchers: 13
• Forks: 21
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# OL3-AnimatedCluster

#### *[DEPRECATED]* OL3-AnimatedCluster is now part of the [ol-ext](https://github.com/Viglino/ol-ext) project and is now available on NPM.

A cluster layer for [OpenLayers](https://github.com/openlayers/openlayers) (ol3/ol4) that animates clusters on zoom change and a select interaction that spread out cluster to allow feature selection in it.

Inspired by [acanimal/AnimatedCluster](https://github.com/acanimal/AnimatedCluster).

[View the live  example...](http://viglino.github.io/OL3-AnimatedCluster)

[](http://viglino.github.io/OL3-AnimatedCluster)

If you like this, you may like [ol3-ext](http://viglino.github.io/ol3-ext/).

## How it runs?

`ol.layer.AnimatedCluster` is a layer that animates clusters on zoom change. The layer is created with an `ol.source.Cluster` as standard cluster vector layers.

`ol.interaction.SelectCluster` is a select interaction that handles clusters. On select cluster springs apart to reveal the features. The revealed features are themselves selectable. Revealed features are a cluster with an attribute `features` that contain the original feature so they can be use as a cluster. 

##Usage

Include the following files in your page:

```html

```

Create a cluster layer to add to the map object:

```javascript

// Cluster Source

var clusterSource = new ol.source.Cluster({

     distance: 40,

     source: new ol.source.Vector()

	});

// Animated cluster layer

var clusterLayer = new ol.layer.AnimatedCluster(

	{	name: 'Cluster',

		source: clusterSource,

		// Use a style function for cluster symbolisation

		style: getStyle

	});

// Add the layer to the map

map.addLayer(clusterLayer);

```

The getStyle function will customize the clusters symbolisation.

Look at the [standard OL3 cluster example](http://openlayers.org/en/master/examples/cluster.html) or [the repo example](http://viglino.github.io/OL3-AnimatedCluster) to know how to define such a function.

## Licence

OL3-ext is licenced under the **French Opensource BSD** compatible CeCILL-B FREE SOFTWARE LICENSE.  

 (c) 2016 - Jean-Marc Viglino

> Full text license in English: (http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt)  

> Full text license in French: (http://www.cecill.info/licences/Licence_CeCILL-B_V1-fr.txt)