ESRI Point Clustering

DiptiSheth

Hello,

I've modified code for ESRI point clustering as per my need. I'm creating object of arrays and passing it as data to show point clustering on map.

But, its not showing any results. Please look at the below code and tell me why it is not working.

map.on("load", function () {
// hide the popup's ZoomTo link as it doesn't make sense for cluster features
domStyle.set(query("a.action.zoomTo")[0], "display", "none");

addClusters();
});

function addClusters() {
var lat;
var long;
var treePointInfo = {};
var attributes;

treePointInfo = [
{ lat: "175.10345988912422", long: "-37.187682856475966", attributes: "" },
{ lat: "175.10347539747", long: "-37.187835793400758", attributes: "" },
{ lat: "175.10351267433421", long: "-37.18796130619176", attributes: "" }
];

treePointInfo.data = arrayUtils.map(treePointInfo, function (p) {
var pointX = p.long;
var pointY = p.lat;
var att = p.attributes;
return {
"x": pointX,
"y": pointY,
"attributes": att
};
});

// popupTemplate to work with attributes specific to this dataset
var popupTemplate = PopupTemplate({
"title": ""
});


// cluster layer that uses OpenLayers style clustering
clusterLayer = new ClusterLayer({

"data": treePointInfo.data,
"distance": 100,
"id": "clusters",
"labelColor": "#fff",
"labelOffset": 10,
"resolution": map.extent.getWidth() / map.width,
"singleColor": "#888",
"singleTemplate": popupTemplate
});

var defaultSym = new esri.symbol.SimpleMarkerSymbol().setSize(4);
var renderer = new esri.renderer.ClassBreaksRenderer(defaultSym, "clusterCount");

var picBaseUrl = "http://static.arcgis.com/images/Symbols/Shapes/";
var blue = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
var green = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
var red = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
renderer.addBreak(0, 2, blue);
renderer.addBreak(2, 200, green);
renderer.addBreak(200, 1001, red);

clusterLayer.setRenderer(renderer);
map.addLayer(clusterLayer);

// close the info window when the map is clicked
map.on("click", cleanUp);
// close the info window when esc is pressed
map.on("key-down", function (e) {
if (e.keyCode === 27) {
cleanUp();
}
});
}



Thanks,

Dipti Sheth

DiptiSheth

Hello Dipti,

Please check this link contains example+source code..

Hope this will help you..

thanks...

Hi sunilpalkar,

First of all really sorry for the late reply. I checked the link and it passes data through a service layer, but in my case, data comes from sql db. So, it won't work.

Anyways, really thankful to send me such a good post.

Thanks,
Dipti Sheth