Point Clustering

akashmagoon

http://developers.arcgis.com/en/javascript/jssamples/layers_point_clustering.html

How can I add point clustering to a map... lets say that I have 100 pinpoints at chicago... how can I cluster them?

TracySchloss

This sample helped me too, but my information wasn't in JSON format, it was in my map service.  I used the onComplete function of a queryTask to generate the input format that clusterLayer needed.

    function createCluster(){
    var queryTask = new esri.tasks.QueryTask("https:servername/arcgis/rest/services/pointLocation/MapServer/0");
    var query = new esri.tasks.Query();
    query.returnGeometry = true;
    query.where = '1=1';
    query.outFields = ["*"];
    
    dojo.connect(queryTask, "onComplete", function(featureSet){
        var inputInfo = {};
        inputInfo.data = dojo.map(featureSet.features, function(feature){
            var point = feature.geometry;
            var att = feature.attributes; 
            var pointX = feature.geometry.x;
            var pointY = feature.geometry.y;
            return {
                "x": pointX,
                "y": pointY,
                "attributes": att
            };
        });
        
        var singleServerSymbol =  new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10, 
         new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1),new dojo.Color([0,205,0,0.25]));
        // cluster layer that uses OpenLayers style clustering 
        clusterLayer = new extras.ClusterLayer({
            "data": inputInfo.data,
            "distance": 5,
            "id": "clusterLayer",
            "labelColor": "#fff",
            "labelOffset": 10,
            "resolution": map.extent.getWidth() / map.width,
            "singleColor": "#00ca00",
            "singleSym": "singleServerSymbol",           
            "singleTemplate": infoTemplate
        });
        var renderer = new esri.renderer.ClassBreaksRenderer(singleServerSymbol, "clusterCount");
      
        var single = new esri.symbol.PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/GreenCircleLargeB.png", 18, 18);
        var small = new esri.symbol.PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png", 48, 48).setOffset(0, 15);
        var medium = new esri.symbol.PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
        var large = new esri.symbol.PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png", 96, 96).setOffset(0, 15);
        
        renderer.addBreak(0, 2, single);
        renderer.addBreak(2, 25, small);
        renderer.addBreak(25, 100, medium);
        renderer.addBreak(100, 1001, large);
   
        clusterLayer.setRenderer(renderer);

        map.addLayer(clusterLayer);

        dojo.connect(queryTask, "onError", function(err){
            alert(err.details);
        });
        

        dojo.connect(map, "onKeyDown", function(e){
            if (e.keyCode == 27) {
                cleanUp();
            }
        });
         
        
    });
    queryTask.execute(query);
} 

    function cleanUp() { 
        map.infoWindow.hide(); 
        clusterLayer.clearSingles(); 
      }