';
sLegend=sLegend+'!['+markers.marks[i].BrandName+'](/img/colorscheme/'+markers.marks[i].Color+'/map.dot.'+markers.marks[i].ColorPriority+'.gif) | ';
sLegend=sLegend+''+markers.marks[i].BrandName+' | ';
sLegend=sLegend+'';
}
}
// Set styles
// These are the same styles as default, assignment is only for demonstration ...
fluster.styles = {
// This style will be used for clusters with more than 0 markers
0: {
image: 'http://www.khov.com/img/common/map.dot.1.gif',
textColor: '#FFFFFF',
width: 14,
height: 14
},
// This style will be used for clusters with more than 10 markers
10: {
image: 'http://www.khov.com/img/common/map.dot.1.gif',
textColor: '#FFFFFF',
width: 14,
height: 14
},
20: {
image: 'http://www.khov.com/img/common/map.dot.1.gif',
textColor: '#FFFFFF',
width: 14,
height: 14
}
};
// Initialize Fluster
// This will set event handlers on the map and calculate clusters the first time.
fluster.initialize();
map.fitBounds(bounds);
}
function inspect(obj, maxLevels, level)
{
var str = '', type, msg;
// Start Input Validations
// Don't touch, we start iterating at level zero
if(level == null) level = 0;
// At least you want to show the first level
if(maxLevels == null) maxLevels = 1;
if(maxLevels < 1)
return 'Error: Levels number must be > 0';
// We start with a non null object
if(obj == null)
return 'Error: Object NULL';
// End Input Validations
// Each Iteration must be indented
str += '';
// Start iterations for all objects in obj
for(property in obj)
{
try
{
// Show "property" and "type property"
type = typeof(obj[property]);
str += '- (' + type + ') ' + property +
( (obj[property]==null)?(': null'):('')) + '
';
// We keep iterating if this property is an Object, non null
// and we are inside the required number of levels
if((type == 'object') && (obj[property] != null) && (level+1 < maxLevels))
str += inspect(obj[property], maxLevels, level+1);
}
catch(err)
{
// Is there some properties in obj we can't access? Print it red.
if(typeof(err) == 'string') msg = err;
else if(err.message) msg = err.message;
else if(err.description) msg = err.description;
else msg = 'Unknown';
str += '- (Error) ' + property + ': ' + msg +'
';
}
}
// Close indent
str += '
';
return str;
}
/**
* Creates a new Fluster to manage masses of markers in a Google Maps v3.
*
* @constructor
* @param {google.maps.Map} the Google Map v3
* @param {bool} run in debug mode or not
*/
function Fluster2(_map, _debug)
{
// Private variables
var map = _map;
var projection = new Fluster2ProjectionOverlay(map);
var me = this;
var clusters = new Object();
var markersLeft = new Object();
// Properties
this.debugEnabled = _debug;
this.gridSize = 14;
this.markers = new Array();
this.currentZoomLevel = -1;
this.styles = {
0: {
image: 'http://www.khov.com/img/spacer.gif',
textColor: '#FFFFFF',
width: 53,
height: 52
},
10: {
image: 'http://www.khov.com/img/spacer.gif',
textColor: '#FFFFFF',
width: 56,
height: 55
},
20: {
image: 'http://www.khov.com/img/spacer.gif',
textColor: '#FFFFFF',
width: 66,
height: 65
}
};
// Timeouts
var zoomChangedTimeout = null;
/**
* Create clusters for the current zoom level and assign markers.
*/
function createClusters()
{
var zoom = map.getZoom();
if(clusters[zoom])
{
me.debug('Clusters for zoom level ' + zoom + ' already initialized.');
}
else
{
// Create clusters array
var clustersThisZoomLevel = new Array();
// Set cluster count
var clusterCount = 0;
// Get marker count
var markerCount = me.markers.length;
// Walk all markers
for(var i = 0; i < markerCount; i++)
{
var marker = me.markers[i];
var markerPosition = marker.getPosition();
var done = false;
// Find a cluster which contains the marker
for(var j = clusterCount - 1; j >= 0; j--)
{
var cluster = clustersThisZoomLevel[j];
if(cluster.contains(markerPosition))
{
cluster.addMarker(marker);
done = true;
break;
}
}
if(!done)
{
// No cluster found, create a new one
var cluster = new Fluster2Cluster(me, marker);
clustersThisZoomLevel.push(cluster);
// Increase cluster count
clusterCount++;
}
}
clusters[zoom] = clustersThisZoomLevel;
//alert(inspect(clusters[zoom][0].markers.length));
for(n=0; n1)
{
clusterCount=42;
}
}
if(clusterCount==42)
{
sLegend=sLegend+'';
sLegend=sLegend+' | ';
sLegend=sLegend+'Community Group | ';
sLegend=sLegend+'
';
}
sLegend=sLegend+'';
echoToElement('MapLegend',sLegend);
me.debug('Initialized ' + clusters[zoom].length + ' clusters for zoom level ' + zoom + '.');
}
// Hide markers of previous zoom level
if(clusters[me.currentZoomLevel])
{
for(var i = 0; i < clusters[me.currentZoomLevel].length; i++)
{
clusters[me.currentZoomLevel][i].hide();
}
}
// Set current zoom level
me.currentZoomLevel = zoom;
// Show clusters
showClustersInBounds();
}
/**
* Displays all clusters inside the current map bounds.
*/
function showClustersInBounds()
{
var mapBounds = map.getBounds();
for(var i = 0; i < clusters[me.currentZoomLevel].length; i++)
{
var cluster = clusters[me.currentZoomLevel][i];
if(mapBounds.contains(cluster.getPosition()))
{
cluster.show();
//alert("Show Cluster at -> "+cluster.getPosition());
}
}
}
/**
* Callback which is executed 500ms after the map's zoom level has changed.
*/
this.zoomChanged = function()
{
window.clearInterval(zoomChangedTimeout);
zoomChangedTimeout = window.setTimeout(createClusters, 1);
};
/**
* Returns the map assigned to this Fluster.
*/
this.getMap = function()
{
return map;
};
/**
* Returns the map projection.
*/
this.getProjection = function()
{
return projection.getP();
};
/**
* Prints debug messages to console if debugging is enabled.
*/
this.debug = function(message)
{
if(me.debugEnabled)
{
console.log('Fluster2: ' + message);
}
};
/**
* Adds a marker to the Fluster.
*/
this.addMarker = function(_marker)
{
me.markers.push(_marker);
};
/**
* Returns the currently assigned styles.
*/
this.getStyles = function()
{
return me.styles;
};
/**
* Sets map event handlers and setup's the markers for the current
* map state.
*/
this.initialize = function()
{
// Add event listeners
google.maps.event.addListener(map, 'zoom_changed', this.zoomChanged);
//google.maps.event.addListener(map, 'dragend', showClustersInBounds);
// Setup markers for the current state
//window.setTimeout(createClusters, 1000);
};
}
/**
* Cluster which holds one or more markers of the map.
*
* @constructor
* @private
* @param {Fluster2} the Fluster2 itself
* @param {google.maps.Marker} the first marker
*/
function Fluster2Cluster(_fluster, _marker)
{
// Get properties from marker
var markerPosition = _marker.getPosition();
// Properties
this.fluster = _fluster;
this.markers = [];
this.bounds = null;
this.marker = null;
this.lngSum = 0;
this.latSum = 0;
this.center = markerPosition;
this.map = this.fluster.getMap();
var me = this;
// Get properties from fluster
var projection = _fluster.getProjection();
var gridSize = _fluster.gridSize;
//alert(markerPosition);
// Calculate bounds
var position = projection.fromLatLngToDivPixel(markerPosition);
var positionSW = new google.maps.Point(
position.x - gridSize,
position.y + gridSize
);
var positionNE = new google.maps.Point(
position.x + gridSize,
position.y - gridSize
);
this.bounds = new google.maps.LatLngBounds(
projection.fromDivPixelToLatLng(positionSW),
projection.fromDivPixelToLatLng(positionNE)
);
/**
* Adds a marker to the cluster.
*/
this.addMarker = function(_marker)
{
this.markers.push(_marker);
};
/**
* Shows either the only marker or a cluster marker instead.
*/
this.show = function()
{
// Show marker if there is only 1
if(this.markers.length == 1)
{
this.markers[0].setMap(me.map);
}
else if(this.markers.length > 1)
{
// Hide all markers
for(var i = 0; i < this.markers.length; i++)
{
this.markers[i].setMap(null);
}
// Create marker
if(this.marker == null)
{
this.marker = new Fluster2ClusterMarker(this.fluster, this);
google.maps.event.addListener(this.marker, 'mouseover', me.debugShowMarkers);
google.maps.event.addListener(this.marker, 'mouseout', me.debugHideMarkers);
if(this.fluster.debugEnabled)
{
google.maps.event.addListener(this.marker, 'mouseover', me.debugShowMarkers);
google.maps.event.addListener(this.marker, 'mouseout', me.debugHideMarkers);
}
}
// Show marker
this.marker.show();
}
};
/**
* Hides the cluster
*/
this.hide = function()
{
if(this.marker != null)
{
this.marker.hide();
}
};
/**
* Shows all markers included by this cluster (debugging only).
*/
this.debugShowMarkers = function()
{
for(var i = 0; i < me.markers.length; i++)
{
me.markers[i].setVisible(true);
}
};
/**
* Hides all markers included by this cluster (debugging only).
*/
this.debugHideMarkers = function()
{
for(var i = 0; i < me.markers.length; i++)
{
me.markers[i].setVisible(false);
}
};
/**
* Returns the number of markers in this cluster.
*/
this.getMarkerCount = function()
{
return this.markers.length;
};
/**
* Checks if the cluster bounds contains the given position.
*/
this.contains = function(_position)
{
return me.bounds.contains(_position);
};
/**
* Returns the central point of this cluster's bounds.
*/
this.getPosition = function()
{
return this.center;
};
/**
* Returns this cluster's bounds.
*/
this.getBounds = function()
{
return this.bounds;
};
/**
* Return the bounds calculated on the markers in this cluster.
*/
this.getMarkerBounds = function()
{
var bounds = new google.maps.LatLngBounds(
me.markers[0].getPosition(),
me.markers[0].getPosition()
);
for(var i = 1; i < me.markers.length; i++)
{
bounds.extend(me.markers[i].getPosition());
}
return bounds;
};
// Add the first marker
this.addMarker(_marker);
}
/**
* A cluster marker which shows a background image and the marker count
* of the assigned cluster.
*
* @constructor
* @private
* @param {Fluster2} the Fluster2 itself
* @param {Fluster2Cluster} the Fluster2Cluster assigned to this marker
*/
function Fluster2ClusterMarker(_fluster, _cluster)
{
this.fluster = _fluster;
this.cluster = _cluster;
this.position = this.cluster.getPosition();
this.markerCount = this.cluster.getMarkerCount();
this.map = this.fluster.getMap();
this.style = null;
this.div = null;
// Assign style
var styles = this.fluster.getStyles();
for(var i in styles)
{
if(this.markerCount > i)
{
this.style = styles[i];
}
else
{
break;
}
}
// Basics
google.maps.OverlayView.call(this);
this.setMap(this.map);
// Draw
this.draw();
};
try
{
var infowindow3 = new google.maps.InfoWindow({ content: "" });
Fluster2ClusterMarker.prototype = new google.maps.OverlayView();
}
catch(err)
{
}
Fluster2ClusterMarker.prototype.draw = function()
{
if(this.div == null)
{
var me = this;
// Create div
this.div = document.createElement('div');
// Set styles
this.div.style.position = 'absolute';
this.div.style.width = this.style.width + 'px';
this.div.style.height = this.style.height + 'px';
this.div.style.lineHeight = this.style.height + 'px';
this.div.style.background = 'transparent url("' + this.style.image + '") 50% 50% no-repeat';
this.div.style.color = this.style.textColor;
// Marker count
//this.div.style.textAlign = 'center';
//this.div.style.fontFamily = 'Arial, Helvetica';
//this.div.style.fontSize = '11px';
//this.div.style.fontWeight = 'bold';
//this.div.innerHTML = this.markerCount;
// Cursor and onlick
this.div.style.cursor = 'pointer';
google.maps.event.addDomListener(this.div, 'click', function() {
var contentString="";
for(q=0; q";
}
contentString=contentString+"
";
infowindow3.content=contentString;
if(!checkLockInfowindows())
{
infowindow3.open(me.map, me.cluster.markers[0]);
setLockInfowindows(true);
}
});
google.maps.event.addListener(infowindow3, 'closeclick', function() {
map.fitBounds(bounds);
setLockInfowindows(false);
zoomedAlready=false;
});
//this.getPanes().overlayLayer.appendChild(this.div);
this.getPanes().overlayMouseTarget.appendChild(this.div);
}
// Position
var position = this.getProjection().fromLatLngToDivPixel(this.position);
this.div.style.left = (position.x - parseInt(this.style.width / 2)) + 'px';
this.div.style.top = (position.y - parseInt(this.style.height / 2)) + 'px';
};
Fluster2ClusterMarker.prototype.hide = function()
{
// Hide div
this.div.style.display = 'none';
};
Fluster2ClusterMarker.prototype.show = function()
{
// Show div
this.div.style.display = 'block';
};
/**
* An empty overlay which is used to retrieve the map projection panes.
*
* @constructor
* @private
* @param {google.maps.Map} the Google Maps v3
*/
function Fluster2ProjectionOverlay(map)
{
google.maps.OverlayView.call(this);
this.setMap(map);
this.getP = function()
{
return this.getProjection();
};
}
try
{
Fluster2ProjectionOverlay.prototype = new google.maps.OverlayView();
}
catch(err)
{
}
Fluster2ProjectionOverlay.prototype.draw = function()
{
};