Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Basic clustering
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample demonstrates how to enable featureReduction (e.g. clustering) on a FeatureLayer. This is handled via the featureReduction constructor option, or the setFeatureReduction() method.
Support for feature reduction is limited to the following scenarios:
- The map must have a spatial reference of Web Mercator or WGS84.
- FeatureLayer or CSVLayer with point geometries fewer than 50,000 features.
- FeatureLayer created from a service URL must point to a service that supports pagination.
- When editing is initiated with the Editor widget, then feature reduction is disabled until the Editor widget is destroyed.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Basic clustering on FeatureLayer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<script src="https://js.arcgis.com/3.46/"></script>
<style>
html, body, #viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#infoDiv{
top: 0px;
right: 0px;
position: absolute;
z-index: 2;
opacity: 0.9;
background-color: whitesmoke;
padding: 8px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
</style>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/dijit/Legend",
"dojo/domReady!"
], function(Map, FeatureLayer, PopupTemplate, Legend
) {
var map = new Map("viewDiv", {
basemap: "dark-gray-vector",
center: [ -73.92872, 40.71321 ],
zoom: 11
});
// Enable clustering in the layer's constructor
// and add the layer to the map
var serviceUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/nyc_parks_gardens_hist_sites/FeatureServer/0";
var layer = new FeatureLayer(serviceUrl, {
outFields: [ "facname", "proptype", "factype", "address" ],
featureReduction: {
type: "cluster"
},
infoTemplate: new PopupTemplate({
title: "{facname}",
description: "{proptype} {factype} on {address}."
})
});
map.addLayer(layer);
map.on("load", function(evt){
var legend = new Legend({
map: map,
layerInfos: [{
layer: layer,
title: "Parks and historic sites"
}]
}, "legendDiv");
legend.startup();
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv">
<div id="legendDiv"></div>
</div>
</body>
</html>