OpenLayers cluster sample

cluster.js

var map, proj, selectControl, selectedFeature, sectorLayer;
proj = new OpenLayers.Projection("EPSG:4326");

OpenLayers.Popup.MinvuPopup = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
	autoSize: true,
	maxSize: new OpenLayers.Size(300, 157),
	minSize: new OpenLayers.Size(300, 157),
	calculateRelativePosition: function () {
		return 'tr';
	},
	positionBlocks: {
		"tr": {
			'offset': new OpenLayers.Pixel(-55, 10),
			'padding': new OpenLayers.Bounds(5, 5, 5, 5),
			'blocks': []
		}
	},
	CLASS_NAME: "OpenLayers.Popup.MinvuPopup"
});

OpenLayers.Strategy.RuleCluster = OpenLayers.Class(OpenLayers.Strategy.Cluster, {
	rule: null,
	shouldCluster: function(cluster, feature) {
		var superProto = OpenLayers.Strategy.Cluster.prototype;
		return this.rule.evaluate(cluster.cluster[0]) &&
			   this.rule.evaluate(feature) &&
			   superProto.shouldCluster.apply(this, arguments);
	},
	CLASS_NAME: "OpenLayers.Strategy.RuleCluster"
});

function drawRandomSector(lonlat) {
	var radio = 500;
	sectorLayer.removeAllFeatures();
	var point = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
	var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(
		point,
		radio,
		30,
		0
	);
	var attributes = {name: "Área"};
	var style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
	style.fillColor = '#f00';
	style.strokeColor = '#f00';

	var feature = new OpenLayers.Feature.Vector(circle, attributes, style);
	sectorLayer.addFeatures([feature]);
	sectorLayer.redraw();
	map.zoomToExtent(sectorLayer.getDataExtent());
}

var parseFeatures = function(data) {
	var features = new Array();
	var tieneresultado = data.toString().substring(0, data.indexOf('#'));
	data = data.toString().substring(data.indexOf('#') + 1);
	var lines = data.toString().split(/\r\n|\r|\n/);
	for (var i in lines) {
		if(!(/\S/.test(lines[i]))) continue;
		var info = lines[i].toString().split('	');
		var px = info[1];
		var py = info[0];
		var p = new OpenLayers.Geometry.Point(px, py)
			.transform(proj, map.getProjectionObject());
		var revisada = info[2] || 0;
		var sectorizada = info[3] || 0;
		var f = new OpenLayers.Feature.Vector(p, {
			revisada: revisada, 
			sectorizada: sectorizada
		});
		f.closeBox = false;
		f.data.popupContentHTML = info[4];
		f.data.overflow = "hidden";
		features.push(f);
	}
	return features;
}

function onPopupClose(evt) {
	selectControl.unselect(selectedFeature);
}

function onFeatureSelect(feature) {
	selectedFeature = feature;
	var lonlat = feature.geometry.getBounds().getCenterLonLat();
	var html = "";
	if (feature.cluster) {
		var n = feature.cluster.length;
		for(var i=0; i<n; ++i) {
			html += feature.cluster[i].data.popupContentHTML;
		}
	} else {
		html += feature.data.popupContentHTML;
	}
	var popup = new OpenLayers.Popup.MinvuPopup("vivienda", 
		lonlat, null, html, null, true, onPopupClose);
	
	if (feature.attributes && feature.attributes.sectorizada && feature.attributes.sectorizada > 0) {
		$(popup.contentDiv).removeClass("globo").addClass("globo_sector");
		drawRandomSector(lonlat);	
	} else {
		$(popup.contentDiv).addClass("globo");
	}
	$(popup.closeDiv).addClass("closebtn");
	popup.maxSize = new OpenLayers.Size(297+30, 157);
	popup.minSize = new OpenLayers.Size(297+30, 157);
	popup.autoSize = true;
	//popup.relativePosition = "bl";
	popup.fixedRelativePosition = true;
	feature.popup = popup;
	map.addPopup(popup);
}

function onFeatureUnselect(feature) {
	map.removePopup(feature.popup);
	feature.popup.destroy();
	feature.popup = null;
	sectorLayer.removeAllFeatures();
}

function map_init(){
	// context to style the vectorlayer
	var context = {
		getIcon: function(feature) {
			var icon = 'Content/img/minvu_vivienda_gris.png';
			if (feature.cluster) {
				icon = 'Content/img/minvu_vivienda_grupo.png';
			} else if (feature.attributes.sectorizada && feature.attributes.sectorizada > 0) {
				icon = 'Content/img/minvu_vivienda_rojo.png';
			} else if (feature.attributes.revisada && feature.attributes.revisada > 0) {
				icon = 'Content/img/minvu_vivienda_azul.png';
			}
			return icon;
		}
	};
	// style the vectorlayer
	var stylemap = new OpenLayers.StyleMap({
		'default': new OpenLayers.Style({
			pointRadius: 10,
			externalGraphic: "${getIcon}",
			graphicWidth: 20,
			graphicHeight: 20,
			fillOpacity: 1.0,
			graphicZIndex: 1
		}, {
			context: context
		}),
		'select' : new OpenLayers.Style({
			graphicWidth: 20,
			graphicHeight: 20,
			fillOpacity: 0.0,
			graphicZIndex: 2
		})
	});
	// set rule for cluster strategy in vectorlayer
	var strategy = new OpenLayers.Strategy.RuleCluster({
		rule: new OpenLayers.Rule({
			filter: new OpenLayers.Filter.Comparison({
				type: OpenLayers.Filter.Comparison.NOT_EQUAL_TO,
				property: "sectorizada",
				value: 1
			})
		})
	});
	strategy.distance = 15;
	strategy.threshold = 2;
	
	// map definition
	map = new OpenLayers.Map({
		div: 'map',
		maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
		maxResolution: 156543,
		units: 'm',
		projection: proj,
		controls: [new OpenLayers.Control.Navigation()],
		numZoomLevels:10
	});
	
	var wmsLayer = new OpenLayers.Layer.WMS("OpenLayers WMS", 
		"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});

	var gmapLayer = new OpenLayers.Layer.Google("Google Streets", {
		numZoomLevels: null, 
		minZoomLevel: 4, 
		maxZoomLevel: 19,
		sphericalMercator: true,
		'maxExtent': new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
	});

	var proyLayer = new OpenLayers.Layer.Vector("Proyectos", {
		styleMap: stylemap,
		strategies: [strategy],
	});

	sectorLayer = new OpenLayers.Layer.Vector("Sectores", {
		styleMap: stylemap
		});
	
	map.addLayers([gmapLayer, proyLayer, sectorLayer]);
	
	// get data, parse to features, add to vector layer
	var queryString = "UbicacionesProyectos.txt";
	$.ajax({
		url: queryString,
		type: 'get',
		dataType: 'text',
		cache: false,
		success: (
			function(proyLayer) {
				return function(data, textStatus, jqXHR) {
					proyLayer.addFeatures(parseFeatures(data));
					proyLayer.refresh({force:true});
					map.zoomToExtent(proyLayer.getDataExtent());
				};
			}(proyLayer)
		),
		error: function () {
			alert("error ajax");
		}
	});
	
	// add select control
	selectControl = new OpenLayers.Control.SelectFeature(proyLayer, {
		onSelect: onFeatureSelect,
		onUnselect: onFeatureUnselect
		});
	map.addControl(selectControl);
	selectControl.activate();
	map.addControl(new OpenLayers.Control.PanZoomBar());
	map.addControl(new OpenLayers.Control.MousePosition());
	map.addControl(new OpenLayers.Control.KeyboardDefaults());

	map.setCenter(
		new OpenLayers.LonLat(-71.542969, -35.675147)
			.transform(proj, map.getProjectionObject()),
		3);
}

jQuery(function ($) {
	map_init();
});