{"id":686592,"date":"2020-01-07T08:00:08","date_gmt":"2020-01-07T16:00:08","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=686592"},"modified":"2020-01-07T08:02:58","modified_gmt":"2020-01-07T16:02:58","slug":"point-clustering-now-available-in-arcgis-javascript-4-x-api","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/point-clustering-now-available-in-arcgis-javascript-4-x-api","title":{"rendered":"Point clustering now available in ArcGIS JavaScript 4.x API"},"author":6561,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[26751,30111,515732],"industry":[],"product":[36831,36601],"class_list":["post-686592","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-clustering","tag-data-visualization","tag-whats-new-december-2019","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Clustering allows you to summarize and explore point layers as spatial clusters.","flexible_content":[{"acf_fc_layout":"content","content":"

Last month, the 4.14 version<\/a> of the ArcGIS API for JavaScript (ArcGIS JS API) introduced point clustering<\/a> in beta. Clustering is a method of merging nearby and overlapping features into a single symbol.<\/p>\n

Clustering is configured on the featureReduction<\/a> property of a FeatureLayer<\/a>, CSVLayer<\/a>, or GeoJSONLayer<\/a>.<\/p>\n

layer.featureReduction = {\r\n  type: \"cluster\"<\/span>\r\n}\r\n<\/code><\/pre>\n
Take a look at this GeoJSONLayer displaying earthquakes from last month.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":691852,"id":691852,"title":"earthquakes-red-dots","filename":"earthquakes-red-dots.png","filesize":50740,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquakes-red-dots.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/point-clustering-now-available-in-arcgis-javascript-4-x-api\/earthquakes-red-dots","alt":"The state of Alaska with earthquakes visualized as red dots.","author":"6561","description":"","caption":"Earthquakes as reported by the USGS from November to December 2019. Each red dot represents one earthquake.","name":"earthquakes-red-dots","status":"inherit","uploaded_to":686592,"date":"2019-12-31 19:05:22","modified":"2019-12-31 19:05:49","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":700,"height":516,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquakes-red-dots-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquakes-red-dots.png","medium-width":354,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquakes-red-dots.png","medium_large-width":700,"medium_large-height":516,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquakes-red-dots.png","large-width":700,"large-height":516,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquakes-red-dots.png","1536x1536-width":700,"1536x1536-height":516,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquakes-red-dots.png","2048x2048-width":700,"2048x2048-height":516,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquakes-red-dots-631x465.png","card_image-width":631,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquakes-red-dots.png","wide_image-width":700,"wide_image-height":516}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
You can already see some spatial patterns by just displaying all the data in the view. However, in some areas where symbols overlap, the actual density or concentration of earthquakes is not obvious. Once clustering is enabled, you immediately see a clearer view of the data. For this time period, the area in and around Anchorage appears to be the epicenter of seismic activity.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":687582,"id":687582,"title":"basic-100px","filename":"basic-100px-e1576877387764.png","filesize":214274,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-100px-e1576877387764.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/point-clustering-now-available-in-arcgis-javascript-4-x-api\/basic-100px","alt":"The state of Alaska with earthquakes visualized in clusters to show areas where earthquakes occur more frequently.","author":"6561","description":"","caption":"Earthquakes as reported by the USGS from November to December 2019. The size of each icon indicates the number of earthquakes that occurred in the region.","name":"basic-100px","status":"inherit","uploaded_to":686592,"date":"2019-12-20 21:07:05","modified":"2019-12-20 21:09:44","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":700,"height":509,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-100px-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-100px-e1576877387764.png","medium-width":359,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-100px-e1576877387764.png","medium_large-width":700,"medium_large-height":509,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-100px-e1576877387764.png","large-width":700,"large-height":509,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-100px-e1576877387764.png","1536x1536-width":700,"1536x1536-height":509,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-100px-e1576877387764.png","2048x2048-width":700,"2048x2048-height":509,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-100px-639x465.png","card_image-width":639,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-100px-e1576877387764.png","wide_image-width":700,"wide_image-height":509}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster\/index.html"},{"acf_fc_layout":"content","content":"
\n\n    View the code that makes this sample work<\/strong>
\n  <\/summary>\n
const<\/span> layer = new<\/span> GeoJSONLayer({\r\n  title: \"Earthquakes from the last month\"<\/span>,\r\n  url: \"https:\/\/earthquake.usgs.gov\/earthquakes\/feed\/v1.0\/summary\/all_month.geojson\"<\/span>,\r\n  copyright: \"USGS Earthquakes\"<\/span>,\r\n  \/\/ enables clustering on the layer<\/span>\r\n  featureReduction: {\r\n    type: \"cluster\"<\/span>\r\n  },\r\n  renderer: {\r\n    type: \"simple\"<\/span>,\r\n    field: \"mag\"<\/span>,\r\n    symbol: {\r\n      type: \"simple-marker\"<\/span>,\r\n      size: 4<\/span>,\r\n      color: \"#fc3232\"<\/span>,\r\n      outline: {\r\n        color: [50<\/span>, 50<\/span>, 50<\/span>]\r\n      }\r\n    }\r\n  }\r\n});\r\n<\/code><\/pre>\n<\/details>\n
Without clustering enabled, it’s difficult to see the high number of earthquakes in the northwest and south-central regions because they are stacked on top of one another. <\/p>\n
Cluster radius<\/h2>\n
The FeatureReductionCluster<\/a> class defines the properties you can configure in point clusters. One of these properties is clusterRadius<\/a>. This property controls each cluster\u2019s area of influence. By default, the clusterRadius<\/code> is 80 pixels. <\/p>\n
Decreasing the cluster radius creates more clusters typically comprised of a fewer number of earthquakes.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":687572,"id":687572,"title":"basic-50px","filename":"basic-50px-e1577818622441.png","filesize":250651,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-50px-e1577818622441.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/point-clustering-now-available-in-arcgis-javascript-4-x-api\/basic-50px","alt":"The state of Alaska with earthquakes visualized in smaller clusters to show areas where earthquakes occur more frequently.","author":"6561","description":"","caption":"Clustered earthquakes as reported by the USGS from November to December 2019. Each cluster was created using a 50px cluster radius. This creates more clusters typically comprised of a fewer number of earthquakes.","name":"basic-50px","status":"inherit","uploaded_to":686592,"date":"2019-12-20 21:06:45","modified":"2019-12-31 17:20:39","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":700,"height":518,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-50px-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-50px-e1577818622441.png","medium-width":353,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-50px-e1577818622441.png","medium_large-width":700,"medium_large-height":518,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-50px-e1577818622441.png","large-width":700,"large-height":518,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-50px-e1577818622441.png","1536x1536-width":700,"1536x1536-height":518,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-50px-e1577818622441.png","2048x2048-width":700,"2048x2048-height":518,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-50px-628x465.png","card_image-width":628,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-50px-e1577818622441.png","wide_image-width":700,"wide_image-height":518}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Increasing the cluster radius reduces the number of clusters, but increases the number of features in each of them.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":687592,"id":687592,"title":"basic-256px","filename":"basic-256px-e1577818713851.png","filesize":175331,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-256px-e1577818713851.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/point-clustering-now-available-in-arcgis-javascript-4-x-api\/basic-256px","alt":"The state of Alaska with earthquakes visualized in larger clusters to show areas where earthquakes occur more frequently.","author":"6561","description":"","caption":"Clustered earthquakes as reported by the USGS from November to December 2019. Each cluster was created using a 256px cluster radius. This creates fewer clusters typically comprised of a higher number of earthquakes.","name":"basic-256px","status":"inherit","uploaded_to":686592,"date":"2019-12-20 21:07:09","modified":"2019-12-31 17:20:50","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":700,"height":455,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-256px-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-256px-e1577818713851.png","medium-width":402,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-256px-e1577818713851.png","medium_large-width":700,"medium_large-height":455,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-256px-e1577818713851.png","large-width":700,"large-height":455,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-256px-e1577818713851.png","1536x1536-width":700,"1536x1536-height":455,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-256px-e1577818713851.png","2048x2048-width":700,"2048x2048-height":455,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-256px-715x465.png","card_image-width":715,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/basic-256px-e1577818713851.png","wide_image-width":700,"wide_image-height":455}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Popup templates<\/h2>\n
You can also configure a popupTemplate<\/a> in FeatureReductionCluster<\/code>. This allows the user to view summary information about the features represented by the cluster. This is independent of the layer.popupTemplate<\/a>, which will display information for individual non-clustered features. The featureReduction.popupTemplate<\/code> provides you with access to aggregate fields<\/strong> used to summarize the features within the cluster.<\/p>\n
The table below describes the aggregate fields you can reference in the cluster popup.<\/p>\n
Aggregate fields<\/h4>\n\n\n\n\n\n\n
Field Name<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n
cluster_count<\/code><\/td>\nThe number of features in the cluster. This field is always available on clustered layers.<\/td>\n<\/tr>\n
cluster_avg_{fieldName}<\/code><\/td>\nOnly available in clustered layers with renderers visualizing at least one number field either with size, opacity, rotation, continuous color, or class breaks. This field describes the average of each rendered number field among all features in the cluster.<\/td>\n<\/tr>\n
cluster_type_{fieldName}<\/code><\/td>\nOnly available in clustered layers with a UniqueValueRenderer<\/a>. This field describes the predominant value of the rendered field among all features within the cluster.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
layer.featureReduction = {\r\n  type: \"cluster\"<\/span>,\r\n  popupTemplate: {\r\n    content: \"This cluster represents {cluster_count} earthquakes.\"<\/span>\r\n  }\r\n};\r\n<\/code><\/pre>\n
Styles and configurations<\/h2>\n
The renderer<\/a> controls a layer\u2019s style, even when it is clustered. The following content describes the various ways the renderer affects a clustered layer’s style and popup.<\/p>\n
Count only<\/h3>\n
In the most basic scenario, where all points are styled with a SimpleRenderer<\/a> and no visual variables, the number of features within the cluster will determine the cluster’s size. This uses the same popup configuration as described in the previous section.<\/p>\n
\n\n    View the code that makes this sample work<\/strong>
\n  <\/summary>\n
\/\/ Configures clustering on the layer. A cluster radius<\/span>\r\n\/\/ of 100px indicates an area comprising screen space 100px<\/span>\r\n\/\/ in length from the center of the cluster<\/span>\r\nconst<\/span> clusterConfig = {\r\n  type: \"cluster\"<\/span>,\r\n  clusterRadius: \"100px\"<\/span>,\r\n  \/\/ {cluster_count} is an aggregate field containing<\/span>\r\n  \/\/ the number of features comprised by the cluster<\/span>\r\n  popupTemplate: {\r\n    content: \"This cluster represents {cluster_count} earthquakes.\"<\/span>\r\n  }\r\n};\r\n\r\nconst<\/span> layer = new<\/span> GeoJSONLayer({\r\n  title: \"Earthquakes from the last month\"<\/span>,\r\n  url: \"https:\/\/earthquake.usgs.gov\/earthquakes\/feed\/v1.0\/summary\/all_month.geojson\"<\/span>,\r\n  copyright: \"USGS Earthquakes\"<\/span>,\r\n  featureReduction: clusterConfig,\r\n  \/\/ popupTemplates can still be viewed on<\/span>\r\n  \/\/ individual features<\/span>\r\n  popupTemplate: {\r\n    title: \"Earthquake Info\"<\/span>,\r\n    content: \"Magnitude {mag} {type} hit {place} on {time}\"<\/span>\r\n  },\r\n  renderer: {\r\n    type: \"simple\"<\/span>,\r\n    field: \"mag\"<\/span>,\r\n    symbol: {\r\n      type: \"simple-marker\"<\/span>,\r\n      size: 4<\/span>,\r\n      color: \"#fc3232\"<\/span>,\r\n      outline: {\r\n        color: [50<\/span>, 50<\/span>, 50<\/span>]\r\n      }\r\n    }\r\n  }\r\n});\r\n<\/code><\/pre>\n<\/details>\n"},{"acf_fc_layout":"image","image":{"ID":690242,"id":690242,"title":"clustering-popup","filename":"clustering-popup-e1577818838942.png","filesize":251800,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-e1577818838942.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/point-clustering-now-available-in-arcgis-javascript-4-x-api\/clustering-popup","alt":"The state of Alaska with earthquakes visualized in clusters to show areas where earthquakes occur more frequently. An open popup is displayed showing the number of earthquakes represented by one of the clusters.","author":"6561","description":"","caption":"Clustered earthquakes as reported by the USGS from November to December 2019. You can configure a cluster popup template to display the total number of features in each cluster.","name":"clustering-popup","status":"inherit","uploaded_to":686592,"date":"2019-12-31 00:05:18","modified":"2019-12-31 17:22:05","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":700,"height":547,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-e1577818838942.png","medium-width":334,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-e1577818838942.png","medium_large-width":700,"medium_large-height":547,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-e1577818838942.png","large-width":700,"large-height":547,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-e1577818838942.png","1536x1536-width":700,"1536x1536-height":547,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-e1577818838942.png","2048x2048-width":700,"2048x2048-height":547,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-595x465.png","card_image-width":595,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-e1577818838942.png","wide_image-width":700,"wide_image-height":547}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster\/index.html"},{"acf_fc_layout":"content","content":"
Visual variables and class breaks<\/h2>\n
When any numeric field is used by the renderer, either with one or more visual variables<\/a> or a ClassBreaksRenderer<\/a>, the average value of that field will be used in the cluster symbology and made available to the developer in the popupTemplate<\/code>.<\/p>\n
In the example below, the layer representing weather stations is rendered with three visual variables: color<\/a>, size<\/a>, and rotation<\/a>. When clustering is enabled, the average of each field referenced in the visual variables is computed for the features within each cluster. The color, rotation, and size of the cluster is then applied to the cluster graphic according to the average value of each respective field for the visual variables of features in that cluster.<\/p>\n
\n\n    View the code that makes this sample work<\/strong>
\n  <\/summary>\n
\/\/ Displays each weather station with three variables:<\/span>\r\n\/\/ Rotation - indicates wind direction<\/span>\r\n\/\/ Color - indicates air temperature<\/span>\r\n\/\/ Size - indicates wind speed<\/span>\r\n\r\nconst<\/span> renderer = {\r\n  type: \"simple\"<\/span>,\r\n  symbol: {\r\n    type: \"simple-marker\"<\/span>,\r\n    \/\/ Arrow marker<\/span>\r\n    path: \"M14.5,29 23.5,0 14.5,9 5.5,0z\"<\/span>,\r\n    color: [50<\/span>, 50<\/span>, 50<\/span>],\r\n    outline: {\r\n      color: [0<\/span>, 0<\/span>, 0<\/span>, 0.7<\/span>],\r\n      width: 0.5<\/span>\r\n    },\r\n    angle: 180<\/span>,\r\n    size: 15<\/span>\r\n  },\r\n  visualVariables: [\r\n    {\r\n      type: \"rotation\"<\/span>,\r\n      \/\/ Use {cluster_avg_WIND_DIRECT} in the<\/span>\r\n      \/\/ featureReduction.popupTemplate to<\/span>\r\n      \/\/ display the average temperature of all<\/span>\r\n      \/\/ features within the cluster<\/span>\r\n      field: \"WIND_DIRECT\"<\/span>,\r\n      rotationType: \"geographic\"<\/span>\r\n    },\r\n    {\r\n      type: \"size\"<\/span>,\r\n      \/\/ Use {cluster_avg_WIND_SPEED} in the<\/span>\r\n      \/\/ featureReduction.popupTemplate to<\/span>\r\n      \/\/ display the average temperature of all<\/span>\r\n      \/\/ features within the cluster<\/span>\r\n      field: \"WIND_SPEED\"<\/span>,\r\n      minDataValue: 0<\/span>,\r\n      maxDataValue: 60<\/span>,\r\n      minSize: 8<\/span>,\r\n      maxSize: 40<\/span>\r\n    },\r\n    {\r\n      type: \"color\"<\/span>,\r\n      \/\/ Use {cluster_avg_TEMP} in the<\/span>\r\n      \/\/ featureReduction.popupTemplate to<\/span>\r\n      \/\/ display the average temperature of all<\/span>\r\n      \/\/ features within the cluster<\/span>\r\n      field: \"TEMP\"<\/span>,\r\n      stops: [\r\n        { value: 20<\/span>, color: \"#2b83ba\"<\/span> },\r\n        { value: 35<\/span>, color: \"#abdda4\"<\/span> },\r\n        { value: 50<\/span>, color: \"#ffffbf\"<\/span> },\r\n        { value: 65<\/span>, color: \"#fdae61\"<\/span> },\r\n        { value: 80<\/span>, color: \"#d7191c\"<\/span> }\r\n      ]\r\n    }\r\n  ]\r\n};\r\n\r\n\/\/ Configures clustering on the layer including<\/span>\r\n\/\/ a popupTemplate referring to aggregate fields<\/span>\r\n\/\/ that summarize the values of the fields used<\/span>\r\n\/\/ to render the cluster graphics.<\/span>\r\n\r\nconst<\/span> clusterConfig = {\r\n  type: \"cluster\"<\/span>,\r\n  popupTemplate: {\r\n    content: [\r\n      {\r\n        type: \"text\"<\/span>,\r\n        text: \"This cluster represents <b>{cluster_count}<\/b> weather stations.\"<\/span>\r\n      },\r\n      {\r\n        type: \"fields\"<\/span>,\r\n        fieldInfos: [\r\n          {\r\n            fieldName: \"cluster_avg_WIND_SPEED\"<\/span>,\r\n            label: \"Average wind speed (km\/h)\"<\/span>,\r\n            format: {\r\n              places: 0<\/span>\r\n            }\r\n          },\r\n          {\r\n            fieldName: \"cluster_avg_WIND_DIRECT\"<\/span>,\r\n            label: \"Average wind direction (degrees)\"<\/span>,\r\n            format: {\r\n              places: 0<\/span>\r\n            }\r\n          },\r\n          {\r\n            fieldName: \"cluster_avg_TEMP\"<\/span>,\r\n            label: \"Average temperature (\u00b0F)\"<\/span>,\r\n            format: {\r\n              places: 0<\/span>\r\n            }\r\n          }\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n};\r\n\r\nconst<\/span> layer = new<\/span> FeatureLayer({\r\n  portalItem: {\r\n    id: \"cb1886ff0a9d4156ba4d2fadd7e8a139\"<\/span>\r\n  },\r\n  renderer: renderer,\r\n  featureReduction: clusterConfig\r\n});\r\n<\/code><\/pre>\n<\/details>\n"},{"acf_fc_layout":"image","image":{"ID":690232,"id":690232,"title":"clustering-numbers-popup","filename":"clustering-numbers-popup-e1577818864349.png","filesize":146019,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-numbers-popup-e1577818864349.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/point-clustering-now-available-in-arcgis-javascript-4-x-api\/clustering-numbers-popup","alt":"Weather stations in the United States visualized in clusters as arrow markers. Each arrow is colored, sized, and rotated based on three variables: temperature, wind speed, and wind direction. An open popup displays the averages for each of these variables along with the total number of features inside one of the clusters.","author":"6561","description":"","caption":"Clustered weather stations in the United States. The popup displays the average value of all fields used by the renderer: temperature (color), wind speed (size), and wind direction (rotation).","name":"clustering-numbers-popup","status":"inherit","uploaded_to":686592,"date":"2019-12-31 00:05:13","modified":"2019-12-31 17:23:31","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":700,"height":354,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-numbers-popup-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-numbers-popup-e1577818864349.png","medium-width":464,"medium-height":235,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-numbers-popup-e1577818864349.png","medium_large-width":700,"medium_large-height":354,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-numbers-popup-e1577818864349.png","large-width":700,"large-height":354,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-numbers-popup-e1577818864349.png","1536x1536-width":700,"1536x1536-height":354,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-numbers-popup-e1577818864349.png","2048x2048-width":700,"2048x2048-height":354,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-numbers-popup-826x418.png","card_image-width":826,"card_image-height":418,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-numbers-popup-e1577818864349.png","wide_image-width":700,"wide_image-height":354}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-visualvariables\/index.html"},{"acf_fc_layout":"content","content":"
Unique values<\/h2>\n
When a layer contains a UniqueValueRenderer<\/a>, the clustered graphics are rendered with the symbol of the most common unique value<\/a> of the features represented by the cluster.<\/p>\n
\n\n    View the code that makes this sample work<\/strong>
\n  <\/summary>\n
\/\/ Enable clustering on the layer<\/span>\r\n\r\nconst<\/span> clusterConfig = {\r\n  type: \"cluster\"<\/span>,\r\n  popupTemplate: {\r\n    content: [\r\n      {\r\n        type: \"text\"<\/span>,\r\n        text: \"This cluster represents <b>{cluster_count}<\/b> features.\"<\/span>\r\n      },\r\n      {\r\n        type: \"text\"<\/span>,\r\n        \/\/ layer.renderer.field = \"religion\"<\/span>\r\n        text: \"The predominant place of worship in this cluster is <b>{cluster_type_religion}<\/b>.\"<\/span>\r\n      }\r\n    ]\r\n  }\r\n};\r\n\r\nconst<\/span> renderer = {\r\n  type: \"unique-value\"<\/span>,\r\n  \/\/ Aggregate field for the popup becomes<\/span>\r\n  \/\/ {cluster_type_religion}<\/span>\r\n  field: \"religion\"<\/span>,\r\n  uniqueValueInfos: [\r\n    \/\/ defines a unique symbol for each<\/span>\r\n    \/\/ type of religion in the layer<\/span>\r\n  ]\r\n}\r\n\r\nconst<\/span> serviceUrl = \"https:\/\/services.arcgis.com\/V6ZHFr6zdgNZuVG0\/arcgis\/rest\/services\/Places_of_Worship_India\/FeatureServer\/0\"<\/span>;\r\nconst<\/span> layer = new<\/span> FeatureLayer({\r\n  url: serviceUrl,\r\n  title: \"Places of worship\"<\/span>,\r\n  outFields: [\"name\"<\/span>, \"religion\"<\/span>, \"denomination\"<\/span>],\r\n  featureReduction: clusterConfig,\r\n  renderer: renderer,\r\n  popupTemplate: {\r\n    title: \"{name}\"<\/span>,\r\n    content: [\r\n      {\r\n        type: \"fields\"<\/span>,\r\n        fieldInfos: [\r\n          {\r\n            fieldName: \"religion\"<\/span>\r\n          },\r\n          {\r\n            fieldName: \"denomination\"<\/span>\r\n          }\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n});\r\n<\/code><\/pre>\n<\/details>\n"},{"acf_fc_layout":"image","image":{"ID":690262,"id":690262,"title":"clustering-popup-types","filename":"clustering-popup-types-e1577818879888.png","filesize":263722,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-types-e1577818879888.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/point-clustering-now-available-in-arcgis-javascript-4-x-api\/clustering-popup-types","alt":"Places of worship in India visualized in clusters. Each point is colored based on the most common religion type in the cluster. An open popup displays this information along with the total number of features inside one of the clusters.","author":"6561","description":"","caption":"Clustered places of worship in India. The popup displays the number of features in each cluster and the most common type as defined by the renderer.","name":"clustering-popup-types","status":"inherit","uploaded_to":686592,"date":"2019-12-31 00:11:37","modified":"2019-12-31 17:24:35","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":700,"height":503,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-types-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-types-e1577818879888.png","medium-width":363,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-types-e1577818879888.png","medium_large-width":700,"medium_large-height":503,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-types-e1577818879888.png","large-width":700,"large-height":503,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-types-e1577818879888.png","1536x1536-width":700,"1536x1536-height":503,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-types-e1577818879888.png","2048x2048-width":700,"2048x2048-height":503,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-types-647x465.png","card_image-width":647,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/clustering-popup-types-e1577818879888.png","wide_image-width":700,"wide_image-height":503}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-filter\/index.html"},{"acf_fc_layout":"content","content":"
Improvements from 3.x clustering<\/h2>\n
You may have already picked up on a few improvements from the 3.x implementation of clustering. Some highlights include: <\/p>\n
Notice this map was created with a GeoJSONLayer in a non-Web Mercator spatial reference (i.e. Alaska Polar Stereographic). This is not possible using the ArcGIS JS API 3.x implementation of clustering<\/a>, which limits you to the Web Mercator and WGS 84 spatial references. In the 4.x implementation of clustering, support for projected non-Web Mercator spatial references is experimental.<\/p>\n