I can display my points and display cluster but they always end up displaying at incorrect position.
One of the cluster is always on top left which the single points are placed on correct position.
I am not sure what is causing this error, i changed to correct SpatialReference as my Map, which is "26918".
My point is also in UTM coordinates.
Here is the code.
function DrawProjectGeometry(jsBird)
{
var attributes = {"graphicid": jsBird['entry_id'], "species_en" : jsBird['species_en']};
var newpoint = new esri.geometry.Point(jsBird['utm_x'],jsBird['utm_y'],map.spatialReference);
var webMercator = webMercatorUtils.geographicToWebMercator(newpoint);
var webMercator2 = webMercatorUtils.lngLatToXY(jsBird['latitude_y_dd'],jsBird['latitude_x_dd']);
var dd = {"x": newpoint.x,"y": newpoint.y,"attributes": attributes};
birdInfo.data.push(dd);
}
function updateLayout()
{
// popupTemplate to work with attributes specific to this dataset
var popupTemplate = new PopupTemplate({
"title": "",
"fieldInfos": [{
"fieldName": "graphicid",
visible: true
}, {
"fieldName": "species_en",
"label": "On Instagram",
visible: true
}]
});
clusterLayer = new ClusterLayer({
"data": birdInfo.data,
"distance": 50,
"id": "clusters",
"labelColor": "#fff",
"labelOffset": 0,
"resolution": map.extent.getWidth() / map.width,
"singleColor": "#888",
"singleTemplate": popupTemplate,
"spatialReference": map.spatialReference,
"showSingles": false
});
var defaultSym = new SimpleMarkerSymbol().setSize(8);
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
var picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/";
var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
renderer.addBreak(0, 1, blue);
renderer.addBreak(2, 200, green);
renderer.addBreak(200, 1001, red);
clusterLayer.setRenderer(renderer);
map.addLayer(clusterLayer);
}
