nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ESRI point clustering example using featurelayer or querytask as input?

TracySchloss

I have tried to implement the ESRI forum example for clustering "Clustering with Javascript API" http://www.arcgis.com/home/item.html?id=c546bc8d4f0b4c0fbdf149b92223e681 with mixed results. Sometimes the cluster layer draws fine and sometimes it doesn't draw at all. Even when it draws it's very slow and I'm not sure the users will be satisfied. There seems to be mixed reviews on this. The fact that it's display seem to be intermittent for me is enough for me to look to another clustering solution.

More recently, the ESRI sample "Point Clustering" was posted. http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/layers_point_clustering.html I like the way this looks, but I'm having a hard time understanding how to make it work with a layer as input, since my data is already in a service. It seems like either I should add a function to step through all my features to create properly formatted input data, or I should edit the custom layer to handle features of a featureset or featurelayer instead.

Has anyone modified ESRI's point clustering example to use something besides the input JSON file?

Find more posts tagged with

Accepted answers

TracySchloss

I can't believe I got it work! This method executes much faster than the forum example, so I'm glad I switched.

Here's the function that creates the cluster layer. I have an init function that calls it, and that is where infoTemplate is defined.

function runQuery(){     // layer 1 in the service contains all server locations and will be used to cluster     var queryTask = new esri.tasks.QueryTask("http://<myserver>/ArcGIS/rest/services/ITSD/serverLocations/MapServer/1");     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 pointX = feature.geometry.x;             var pointY = feature.geometry.y;             var att = feature.attributes;             return {                 "x": pointX,                 "y": pointY,                 "attributes": att             };         });                  // cluster layer that uses OpenLayers style clustering          clusterLayer = new extras.ClusterLayer({             "data": inputInfo.data,             "distance": 100,             "id": "clusters",             "labelColor": "#fff",             "labelOffset": 10,             "resolution": map.extent.getWidth() / map.width,             "singleColor": "#888",             "singleTemplate": infoTemplate         });         var defaultSym = new esri.symbol.SimpleMarkerSymbol().setSize(4);         var renderer = new esri.renderer.ClassBreaksRenderer(defaultSym, "clusterCount");         var blue = new esri.symbol.PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", 32, 32).setOffset(0, 15);         var green = new esri.symbol.PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png", 64, 64).setOffset(0, 15);         var red = new esri.symbol.PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/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          // dojo.connect(map, "onClick", cleanUp);          // close the info window when esc is pressed          dojo.connect(map, "onKeyDown", function(e){             if (e.keyCode == 27) {                 cleanUp();             }         });         dojo.connect(queryTask, "onError", function(err){             alert(err.details);         });                       });     queryTask.execute(query); }

All comments

GordonBooth

Having the same problem. Please help.

derekswingley1

One of the parameters for cluster layer is "data". As noted in the sample description, data is an array of objects and each object has the following properties: x, y and attributes.

Here's the workflow to get data from a layer in a map service or feature service in this format:

send a request to the layer's query endpoint with esri.request
when data comes back, use dojo.map to create an array of objects with x, y and attributes properties
pass the result from dojo.map to the cluster layer

That's a high level overview. Can one of you take a crack at coding it up and post back here? I can provide further help if you can't make it work.

StephenLead

Sometimes the cluster layer draws fine and sometimes it doesn't draw at all

Note that by default, ArcGIS Server only returns 1,000 features as a result of a query. In the problem above, it may be the case that you're zooming to an extent which doesn't contain any returned features (depending on how you're structuring the query).

TracySchloss

I"m not sure why I would use an esri.request to the query endpoint as opposed to executing a standard query task. I usually execute my query tasks with a callback to generate my featureset. Is is faster to request the data or formatted differently if I use esri.request instead?

derekswingley1

I"m not sure why I would use an esri.request to the query endpoint as opposed to executing a standard query task. I usually execute my query tasks with a callback to generate my featureset. Is is faster to request the data or formatted differently if I use esri.request instead?

You could use a QueryTask to pull your features out. I said esri.request because it's always available (no additional modules to load) and you don't need any of Query's special functionality. I wouldn't expect a noticeable performance difference between the two.

NicolasGIS_3-1783325396486.png

NicolasGIS_0-1783332635541.png

TracySchloss

I'll just stick with my standard query task syntax then, which I'm more familiar with.

I'm getting stuck at the very beginning with the dojo.Config, which is generating an error in Aptana (version 2). I got this error when I loaded the sample too:

    <script> 
        var dojoConfig = {  
        parseOnLoad: true, 
        packages: [{ 
         "name": "extras", 
          "location": location.pathname.replace(/\/[^/]+$/, '') + "/extras" }] 
      }; 
</script>

The error:
Multiple items missing at this position:
missing ) after argument list
Bad regular expression:
\/[^/]+$/, '') + "/extras"

In the ESRI example, I changed this to have the location as just "/extras", which got rid of the error and then the sample ran.

When I made the same changes in my own code for dojo.Config, it errors on the line

dojo.require("extras,ClusterLayer);

The error in Firebug is 'url is undefined', which I take to mean it's not finding ClusterLayer.js after all.

I wouldn't call myself a novice programmer, but I am relatively new to JavaScript. I'm pretty comfortable with the coding of the functions, so probably the error toward the top. I don't know if my query task function is correct because it's not making it that far before it blows up!

forumUpload_100912.zip

TracySchloss

I see now that I still had all my references to version 2.5 of the API because that's what the forum post for clusters used. I changed my API references to 3.2 and I'm not getting the error on the dojo.require("extras.ClusterLayer").

The code still isn't working right, but at least I'm past the first error.

derekswingley1

I see now that I still had all my references to version 2.5 <snip>

That will make a big difference. Glad you moved up to 3.2.

The code still isn't working right, but at least I'm past the first error.

Post the code you're currently using and a description of what isn't working?

TracySchloss

function runQuery(){     // layer 1 in the service contains all server locations and will be used to cluster     var queryTask = new esri.tasks.QueryTask("http://<myserver>/ArcGIS/rest/services/ITSD/serverLocations/MapServer/1");     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 pointX = feature.geometry.x;             var pointY = feature.geometry.y;             var att = feature.attributes;             return {                 "x": pointX,                 "y": pointY,                 "attributes": att             };         });                  // cluster layer that uses OpenLayers style clustering          clusterLayer = new extras.ClusterLayer({             "data": inputInfo.data,             "distance": 100,             "id": "clusters",             "labelColor": "#fff",             "labelOffset": 10,             "resolution": map.extent.getWidth() / map.width,             "singleColor": "#888",             "singleTemplate": infoTemplate         });         var defaultSym = new esri.symbol.SimpleMarkerSymbol().setSize(4);         var renderer = new esri.renderer.ClassBreaksRenderer(defaultSym, "clusterCount");         var blue = new esri.symbol.PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", 32, 32).setOffset(0, 15);         var green = new esri.symbol.PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png", 64, 64).setOffset(0, 15);         var red = new esri.symbol.PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/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          // dojo.connect(map, "onClick", cleanUp);          // close the info window when esc is pressed          dojo.connect(map, "onKeyDown", function(e){             if (e.keyCode == 27) {                 cleanUp();             }         });         dojo.connect(queryTask, "onError", function(err){             alert(err.details);         });                       });     queryTask.execute(query); }

derekswingley1

I can't believe I got it work! This method executes much faster than the forum example, so I'm glad I switched.

That's awesome! Glad you got it working.

TracySchloss

Do you have any thoughts on the error I'm getting in location.pathname.replace? It seems like I would be better of with this type of syntax instead of changing it to be more "hard coded".

Jay_Gregory

One question I have about this: is there any way to configure a cluster layer for a feature service so it isn't limited by the 1000 feature return limit on Server? It seems that one of the benefits of clustering would be being able to visualize total number of events in an area, even if the total events are greater than 1000.

Jay

derekswingley1

One question I have about this: is there any way to configure a cluster layer for a feature service so it isn't limited by the 1000 feature return limit on Server? It seems that one of the benefits of clustering would be being able to visualize total number of events in an area, even if the total events are greater than 1000.

Change the limit on the server, or do multiple requests to retrieve your data before handing it off to the cluster layer.

muhammadalmas

Any chance of having 'flare effect' with this clustering (just like silverlight/flex counterpar)?

TracySchloss

Don't hold your breath. There is quite a bit of animation that easily used in FLEX that isn't there in JS. I actually started out with the FLEX version, but have had to move away from it because of lack of mobile support. Yes, I know it can be written as an app, but that's not a popular alternative in this office.

danbonab

I'm sorry but I don't care much for ClusterLayer. Clustering is a feature of a graphic based layer (esri.layers.GraphicsLayer).
Why should my layer lets say a featureLayer (which is a graphicsLayer subclass) morph into a different type of layer to display feature clusters? It doesn't make any sense!
Silverlight API got this right. In Silverlight, GraphicsLayer has a Clusterer property which encapsulates all the clustering logic, so if you need clustering you don't need to create a different type of layer and add it to the map.
Clustering in Silverlight happens when graphics are being added and you could easily extend the OnGraphicsAdded event handler to apply your own clustering logic or use existing FlareClusterer which works decently.
I'm not expecting all the flare animation, I'm aware of the challenges of that when it comes to running in different browsers, the only thing I'm expecting is a clusterer property for graphicsLayer and a defaultClusterer that would support basic clustering properties like maxFeatureCount, radius, and color.

StephenLead

a clusterer property for graphicsLayer and a defaultClusterer that would support basic clustering properties like maxFeatureCount, radius, and color.

+1, that would be very nice. Ideally it would work for a featureLayer too.

bdv_works

Hi, we did it through the server-side clustering solutions and use Esri js-apis to plot the JSON outputs;
pls see the app link:

http://www.bigdatavisulization.com:8...er_locate.html

// we can remove the house number when searching, which will give 70 million records on-the-fly...

BrianFischer

I noticed the link doesn't work, display's a blank map. Is there a different link to look at?

We have the clustering working well on 100,000+ points but noticed that when the cluster marker has more than 1000 count it drops the marker graphic and only displays the label. Is this a limitation of the Javascript api or a bug with it? Could it be it is droping it because it can't fit a 4 digit label inside the graphic? I noticed ESRI example doesn't go over 999 either. https://developers.arcgis.com/en/javascript/jssamples/layers_point_clustering.html

Anyone have suggestions on how to get the marker to work for counts of more than 999?

Thanks,
Brian

WuxuanXiang

I would like to know the answer to the last question too. Any updates?

Thanks!

-Aster

I noticed the link doesn't work, display's a blank map. Is there a different link to look at?

We have the clustering working well on 100,000+ points but noticed that when the cluster marker has more than 1000 count it drops the marker graphic and only displays the label. Is this a limitation of the Javascript api or a bug with it? Could it be it is droping it because it can't fit a 4 digit label inside the graphic? I noticed ESRI example doesn't go over 999 either. https://developers.arcgis.com/en/javascript/jssamples/layers_point_clustering.html

Anyone have suggestions on how to get the marker to work for counts of more than 999?

Thanks,
Brian

StephenLead

We have the clustering working well on 100,000+ points but noticed that when the cluster marker has more than 1000 count it drops the marker graphic and only displays the label. Is this a limitation of the Javascript api or a bug with it? Could it be it is droping it because it can't fit a 4 digit label inside the graphic? I noticed ESRI example doesn't go over 999 either. https://developers.arcgis.com/en/javascript/jssamples/layers_point_clustering.html

Anyone have suggestions on how to get the marker to work for counts of more than 999?

I think there are 2 reasons why people aren't seeing more than 1000 markers:

- by default ArcGIS Server / ArcGIS Online only return the first 1000 features from a query
- if you've circumvented this (which it sounds like you have, if you're seeing 100k markers) check the renderer.

The renderer in the sample above contains:

renderer.addBreak(200, 1001, red);

Try adding class breaks which contain a valid range for your data.

WuxuanXiang

changing this line

renderer.addBreak(200, 1001, red)

did solve the problem. Thanks!

aster

I think there are 2 reasons why people aren't seeing more than 1000 markers:

- by default ArcGIS Server / ArcGIS Online only return the first 1000 features from a query
- if you've circumvented this (which it sounds like you have, if you're seeing 100k markers) check the renderer.

The renderer in the sample above contains:
renderer.addBreak(200, 1001, red);
Try adding class breaks which contain a valid range for your data.

TracySchloss

When I posted that example, 1001 was more than enough for what I had in my data. I'm not sure of the code off the top of my head, but maybe there would be a way to first determine the maximum and use that as a variable instead of hard coding it?

firstlast1

I have been trying to use the re-created cluster function that was posted above and that makes use of QueryTask as input, but without success. The only difference is that I tried to implement Dojo's new AMD pattern as opposed to the legacy one used in the initial code. I have attached the full code in the zip file for reference. After debugging over and over I think it boils down to the following part:

queryTask.on("complete", function(featureSet) {
   
   var inputInfo = {};
   inputInfo.data = arrayUtils.map(featureSet.features, function(feature) {
    var pointX = feature.geometry.x;
    var pointY = feature.geometry.y;
    var att = feature.attributes;
    return {
     "x": pointX,
     "y": pointY,
     "attributes": att
    };
   });

My QueryTask returns the featureSet features alright. I'm seeing every single feature in there. The problem is assigning it to inputInfo.data...it just doesn't pass it through. There are no other errors while running this, basemap loads fine and nothing else. The attached code can be run directly in a browser, everything is in there.

This may be something very simple to fix, I'm new at this as well. I'm just wondering if I missed something earlier in the code, like a loading a module or anything like that.

suppliers_dev.zip

TracySchloss

I haven't quite wrapped my brain around the difference, but it doesn't look like the exact same object type is getting returned from

queryTask.on("complete", function(results)

as opposed to the dojo non-AMD

 dojo.connect(queryTask, "onComplete", function(featureSet)

What I noticed was in this section

queryTask.on("complete", function(featureSet) {
   
   var inputInfo = {};
   inputInfo.data = arrayUtils.map(featureSet.features, function(feature) {
    var pointX = feature.geometry.x;
    var pointY = feature.geometry.y;
    var att = feature.attributes;
    return {
     "x": pointX,
     "y": pointY,
     "attributes": att
    };
   });

was the object 'featureSet' was not declared as a the class featureSet. Instead it was an object that contained the featureSet.

I edited your code to this, and it works for me:

queryTask.on("complete", function(results) {
   
   var inputInfo = {};
   inputInfo.data = arrayUtils.map(results.featureSet.features, function(feature) {
    var pointX = feature.geometry.x;
    var pointY = feature.geometry.y;
    var att = feature.attributes;
    return {
     "x": pointX,
     "y": pointY,
     "attributes": att
    };
   });

firstlast1

Yes, it does work for me as well. Brilliant! Thank you!

WuxuanXiang

I have a relevant question regarding how to turn on/off the cluster layer. I would like the cluster layer to be turned off when map first loads, and to be turned on when a button click happens. I tried adding this line

clusterLayer.clear();

in

map.on("load", function() {

     origExtent=map.extent;
            var photos = esriRequest({
              "url": "data/GeocodeOutput_1_7_2014.json",
              "handleAs": "json"
            });
            photos.then(addClusters, error);
     initToolbar();
     clusterLayer.clear();
          });

however this does not turn off the cluster layer, but it results in the basemap fail to load. If I put this line in the button click function, it will remove the cluster layer, however when the map extent changes, the cluster layer will be added back.

Is there a way to turn off the cluster layer when the map first loads (better remain off when map extent change), and turn the cluster layer back on a button click event?

Thanks in advance.

ReneRubalcava

You could use hide() when the map loads and show() on a button click.

I should also mention there has been some (non-esri) work recently to modify the ClusterLayer to work more like a FeatureLayer.
https://github.com/odoe/esri-clusterfeaturelayer

Avisaroussi

tried to implement Tracy's code

but i get an error "Object doesn't support this action"

when instantiating the cluster layer

new ClusterLayer({

"data": inputInfo.data,

"distance": 100,

"id": "clusters",

"labelColor": "#fff",

"spatialReference": SR,

"labelOffset": 10,

"resolution": map.extent.getWidth() / map.width,

"singleColor": "#888",

"singleTemplate": infoTemplate

});

i checked that all parameters sent are valid .

inputInfo.data has features data
sr is defined
map.width and map.extent.getWidth has relevant values
infoTemplate is defined in a general way to fit

infoTemplate = new InfoTemplate("Attributes", "${*}");

any idea what might be in the way?

TracySchloss

It's hard to know why you're getting that error w/o seeing the entire context. The post you replied to is 2 years old and was in legacy (nonAMD) code. Maybe you're getting stuck there. There was both a legacy and AMD version of clusterLayers are one point, right when AMD first came out. Generally when I have the sort of error you're describing, it's nothing to do with the function, it's because I don't have something right toward the top, either in my dojoConfig definition or when I'm setting all my requires.

Avisaroussi

hi again

not sure i understand what you mean by AMD.

is ther a new version ?

TracySchloss

It sounds like you need to do some more reading on the differences between AMD and legacy style code. AMD is not new. Throughout the samples and help pages, you'll see syntax that might say either 'legacy code' or AMD. It has to do with how the modules are first loaded, among other things.

Here's another thread that discusses the differences. It's hard to know specifically what your problem is from the small amount of code you've provided.

https://community.esri.com/thread/79966

Avisaroussi

sorry , i forgot that the A in AMD stands for Asynchronous

i am aware of that , and also am using it in my code . although i do not fully understand all the fine lines.

i did do some reading though.

going back two emails ago.

is there an AMD sample with data comming from feature layer?

ReneRubalcava

I posted it earlier in this thread, but this version of the ClusterLayer is a FeatureLayer (almost) with clusters enabled.

odoe/esri-clusterfeaturelayer · GitHub‌

It takes a URL, does caching and more. It will even convert a service of polygons to points and cluster them. One of the samples tries to access an AGOL service that requires a login now though, so I need to update that.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.