Hi experts , I have a set of coordinates returned from my database using ajax. There are alot of same coordinates which caused the graphics to overlap each other, and i am unable to click on the infotemplate.I am trying to use cluster map layer to do this.Facing some error. Please help me along.. thanks..This is the codes./*--------------------------------------------@AUTHOR- MINGXUAN-----------------------------------------------*/
var TwitterStationLocation = [];
var PointGraphic2;
var twitterheatlocation = [];
function PinPointForTwitter(map, control) {
var Grid_Table = document.getElementById('CheckinTable');
var chkBox = document.getElementById("CHECKTWITTER");
var twitterPlaces = [];
if(chkBox.checked)
{
localStorage.setItem("CHECKTWITTER", "checked");
map.infoWindow.hide();
map.infoWindow.resize(410, 160);
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "WebService.asmx/getTwitter", false);
xmlhttp.send();
if (document.getElementById("btnHeatMap1")) {
//this means it is unchecked, make sure heatmap is hidden
if (heatLayer) {
heatLayer.clearData();
}
// map.removeLayer(heatLayer);
}
var xmlDoc = xmlhttp.responseXML;
var xmlalbums = xmlDoc.documentElement.getElementsByTagName("Twitter");
$.each(xmlalbums, function () {
varname = $(this).find("id").text();
foodstation = $(this).find("hashtag").text();
coordX = $(this).find("X").text();
coordY = $(this).find("Y").text();
placename = $(this).find("placename").text();
message = $(this).find("message").text();
retweetcount = $(this).find("retweetcount").text();
favcount = $(this).find("favcount").text();
platform = $(this).find("platform").text();
datepost = $(this).find("dt").text();
address = $(this).find("Address").text();
var point = new esri.geometry.Point({ "x": coordX, "y": coordY, "spatialReference": { "wkid": 3414} });
var symbol = new esri.symbol.PictureMarkerSymbol('Images/icons/Twitter_logo_blue.png', 25, 25);
// var symbol = new esri.symbol.TextSymbol("hastag" + foodstation);
var PointGraphic = new esri.Graphic(point, symbol);
PointGraphic2 = new esri.Graphic(point, null);
OneMap.map.graphics.add(PointGraphic);
clusterLayer = new modules.ClusterLayer({
"data": point,
"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);
twitterheatlocation.push(heatmapGraphics.add(PointGraphic2));
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle("<img src = 'Images/icons/Twitter_logo_blue.png' style='width:25px; height:25px;' /> " + address);
infoTemplate.setContent("<b>hashtag: </b>" + "#" + foodstation + "<br/>"
+ "<b>message: </b>" + message + "<br/>"
+ "<b>retweet count: </b>" + retweetcount + "<br/>"
+ "<b>favorite count: </b>" + favcount + "<br/>"
+ "<b>platform: </b>" + platform + "<br/>"
+ "<b>datepost: </b>" + datepost + "<br/>"
);
var graphic = PointGraphic;
graphic.setSymbol(symbol);
graphic.setInfoTemplate(infoTemplate);
TwitterStationLocation.push(OneMap.map.graphics.add(graphic));
addClusters();
});
map.on("click", cleanUp);
// close the info window when esc is pressed
map.on("key-down", function (e) {
if (e.keyCode === 27) {
cleanUp();
}
});
if (document.getElementById("btnHeatMap2")) {
//means the heatmap button is checked, add to map
if (heatLayer) {
heatLayer.setData(heatmapGraphics.graphics);
heatmapGraphics.add(PointGraphic);
}
}
}
else {
localStorage.setItem("CHECKTWITTER", "unchecked"); //remove graphics
for (var a = twitterheatlocation.length - 1; a >= 0; a--) {
heatmapGraphics.remove(twitterheatlocation);
}
for(var i = TwitterStationLocation.length - 1; i>=0; i--) {
ma...
it's causing alot of error. Please help..
