jQuery Clusting Plugin
======================


This plugin takes a List (i.e an unordered List) with positioned (via CSS) elements and clusters them by proximity.

The clustering works in three steps: 

  1) Collecting the markerdata. 
   * The markers are collected by a jquery-selector by the function collect_markers.   
     For each marker one object is created to encapsulate all the necessary information about the marker.  To have flexiblity in that matter it's possible to register collector functions.  Each collector function will be called for each marker and will be passed the marker as a jquery-object and the data-object. The function can manipulate the data-object and is expeced to return the altered version.
     There are some standard functions ready to use in $.fn.clusters.collectors


  2) Creating clusters.

The clusters are generated automatically. For each cluster there is an object with its data including an array ('markers') of the markers clustered together in this bunch. 
The fuction is called cluster

  3) Displaying the clusters. 

  Works simillar to 1) but reversed. Described more detailed below.  


Usage 
-----


HTML:

<ul id="mymap"> 
  <li style="left:1.2em; top:1em;">Marker 1</li>
  <li style="left:0.3em; top:1.4em;">Marker 2</li>
  <li style="left:2.3em; top:1.7em;">Marker 3</li>
</ul> 

CSS:

ul#mymap {
  position:relative; 
} 

ul#mymap li {
  position:absolute;
}

JAVASCRIPT: 

$(document).ready(function(){
  $('ul#mymap').cluster();
});


Options: 
------------------------------------------------------------------
  * radius (2.3) 
  Max. proximity of a marker to a clusters center to be included in the cluster.

  * distance_func 
  The function to calculate the distance between two objects.
  
  * marker_image 
  image src for a marker

  * repesentation

  .... a lot missing here ... 


How to alter the appearance of bunches on the Map?
-------------------------------------------------------------------

The bunches are positioned by jquery-clustering. The positioned Dom-Nodes (usually <li>s) don't contain style information apart from position. 

To control the representation of a bunch functions that act on the Dom-Node will be called by jquery-clustering.  Each function will be passed the dom-node representing the bunch as the first argument and the actual bunch object as the second argument. 
The functions that are called are the ones in the array $.fn.clusters.default.displayer.

There are a couple of representation-functions in $.fn.clusters.displayers
Put them into $.fn.clusters.default.displayers like in the demo to try them out.



====== Participants ======

* Vangelis Tsoumenis 
* and you?