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

[TyroneLigon]

One thing that jumps out at me - your lat/long values need to be numbers instead of strings. Try entering your lat/longs as numbers in your "treePointInfo" array, or convert the lat/longs to numbers using "parseFloat" when you convert your array into a map.

[DiptiSheth]

One thing that jumps out at me - your lat/long values need to be numbers instead of strings. Try entering your lat/longs as numbers in your "treePointInfo" array, or convert the lat/longs to numbers using "parseFloat" when you convert your array into a map.

Hi tligon,

Thanks for your reply. But, Its not working. I tried both the things i.e. I passed long/lat as number as well as while passing converted it to float, yet it does not work.

Please provide me some working example of it, if you can.

Thanks for your gesture,

Dipti Sheth

[SunilPalkar]

Hello Dipti,

Please check this link contains example+source code..

Hope this will help you..

thanks...

[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