Skip to content

Commit df00aa5

Browse files
PaulGibbs3rdPaulGibbs3rd
authored
Merge pull request #396 from woriginales/master
Adding new sample: Remove Clustering Information from Legend
2 parents 05e4fcd + df6a2ae commit df00aa5

3 files changed

Lines changed: 430 additions & 0 deletions

File tree

‎maps-sdk/javascript-maps-sdk/remove-cluster-info-from-legend/README.MD‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Remove clustering information from Legend
2+
3+
## About
4+
5+
This sample shows how to remove clustering information from the Legend. This sample is a modification of [this sample](https://developers.arcgis.com/javascript/latest/sample-code/featurereduction-cluster/). Other minor modifications include:
6+
7+
- Implementation of [Map components](https://developers.arcgis.com/javascript/latest/references/map-components/)
8+
- [Module loading via CDN](https://developers.arcgis.com/javascript/latest/get-started-cdn/#module-loading-via-cdn)
9+
- Replacing the SimpleRenderer with [ClassBreaksRenderers](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html)
10+
11+
Main logic of the code is located inside index.html. unique-value-symbol-config.js contains symbology and renderer information for the layer.
12+
13+
## How It Works
14+
15+
1. Create a function that hides cluster information. This is achieved by overriding visualVariables and setting showLegend to false
16+
17+
```javascript
18+
function hideClusterInformation() {
19+
const featureReductionTemplate = layer.featureReduction.clone();
20+
21+
featureReductionTemplate.renderer = {
22+
type: "class-breaks",
23+
field: "mag",
24+
classBreakInfos: classBreakInfos, // classBreakInfos obtained from unique-value-symbol-config.js
25+
visualVariables: [{
26+
type: "size",
27+
field: "cluster_count",
28+
legendOptions: {
29+
showLegend: false
30+
},
31+
minDataValue: 2,
32+
maxDataValue: 400,
33+
minSize: 18,
34+
maxSize: 54
35+
}]
36+
}
37+
38+
layer.featureReduction = featureReductionTemplate;
39+
}
40+
```
41+
42+
2. Wait for layer to finish loading before calling the hideClusterInformation() function
43+
44+
```javascript
45+
mapElement.whenLayerView(layer).then(() => {
46+
hideClusterInformation();
47+
});
48+
```
49+
50+
3. Add the same function to the toggle button functionality. It is important that you set the layer.featureReduction to clusterConfig before calling the hideClusterInformation() function.
51+
52+
```javascript
53+
toggleButton.addEventListener("click", () => {
54+
let fr = layer.featureReduction;
55+
56+
if (fr && fr.type === "cluster") {
57+
layer.featureReduction = null;
58+
toggleButton.innerText = "Enable Clustering";
59+
60+
} else {
61+
layer.featureReduction = clusterConfig;
62+
hideClusterInformation();
63+
toggleButton.innerText = "Disable Clustering";
64+
}
65+
});
66+
```
67+
68+
## Related Documentation
69+
70+
- [FeatureReductionCluster](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureReductionCluster.html)
71+
- [VisualVariables.legendOptions](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-VisualVariable.html#legendOptions)
72+
73+
## Live Samples
74+
75+
- [Remove Clustering Info From Legend](https://esri.github.io/developer-support/maps-sdk/javascript-maps-sdk/remove-cluster-info-from-legend)

‎maps-sdk/javascript-maps-sdk/remove-cluster-info-from-legend/index.html‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="initial-scale=1,maximum-scale=1,user-scalable=no"
8+
/>
9+
10+
<title>Remove ClassBreak Clusters Symbology from Legend</title>
11+
12+
<style>
13+
html,
14+
body{
15+
padding: 0;
16+
margin: 0;
17+
height: 100%;
18+
width: 100%;
19+
background: rgba(50,50,50);
20+
}
21+
#infoDiv {
22+
padding: 10px;
23+
}
24+
</style>
25+
26+
<script type="text/javascript" src="unique-value-symbol-config.js"></script>
27+
28+
<script src="https://js.arcgis.com/4.32/"></script>
29+
<link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
30+
<script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>
31+
32+
<script type="module">
33+
const [Map, FeatureLayer, GeoJSONLayer, Extent, SpatialReference] = await $arcgis.import([
34+
"@arcgis/core/Map.js",
35+
"@arcgis/core/layers/FeatureLayer.js",
36+
"@arcgis/core/layers/GeoJSONLayer.js",
37+
"@arcgis/core/geometry/Extent.js",
38+
"@arcgis/core/geometry/SpatialReference.js"
39+
])
40+
41+
const mapElement = document.querySelector("arcgis-map");
42+
43+
const clusterConfig = {
44+
type: "cluster",
45+
clusterRadius: "100px",
46+
// {cluster_count} is an aggregate field containing
47+
// the number of features comprised by the cluster
48+
popupTemplate: {
49+
title: "Cluster summary",
50+
content: "This cluster represents {cluster_count} earthquakes.",
51+
fieldInfos: [{
52+
fieldName: "cluster_count",
53+
format: {
54+
places: 0,
55+
digitSeparator: true
56+
}
57+
}]
58+
},
59+
clusterMinSize: "24px",
60+
clusterMaxSize: "60px",
61+
labelingInfo: [{
62+
deconflictionStrategy: "none",
63+
labelExpressionInfo: {
64+
expression: "Text($feature.cluster_count, '#,###')"
65+
},
66+
symbol: {
67+
type: "text",
68+
color: "#004a5d",
69+
font: {
70+
weight: "bold",
71+
family: "Noto Sans",
72+
size: "12px"
73+
}
74+
},
75+
labelPlacement: "center-center",
76+
}]
77+
};
78+
79+
const layer = new GeoJSONLayer({
80+
title: "Earthquakes from the last month",
81+
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
82+
copyright: "USGS Earthquakes",
83+
84+
featureReduction: clusterConfig,
85+
86+
// popupTemplates can still be viewed on
87+
// individual features
88+
popupTemplate: {
89+
title: "Magnitude {mag} {type}",
90+
content: "Magnitude {mag} {type} hit {place} on {time}",
91+
fieldInfos: [
92+
{
93+
fieldName: "time",
94+
format: {
95+
dateFormat: "short-date-short-time"
96+
}
97+
}
98+
]
99+
},
100+
renderer: layerRenderer // layerRenderer obtained from unique-value-symbol-config.js
101+
});
102+
103+
// background layer for geographic context
104+
// projected to Alaska Polar Stereographic
105+
const baseLayer = new FeatureLayer({
106+
portalItem: {
107+
id: "2b93b06dc0dc4e809d3c8db5cb96ba69"
108+
},
109+
legendEnabled: false,
110+
popupEnabled: false,
111+
renderer: {
112+
type: "simple",
113+
symbol: {
114+
type: "simple-fill",
115+
color: [65, 65, 65, 1],
116+
outline: {
117+
color: [50, 50, 50, 0.75],
118+
width: 0.5
119+
}
120+
}
121+
},
122+
spatialReference: {
123+
wkid: 5936
124+
}
125+
});
126+
127+
mapElement.addLayers([baseLayer, layer]);
128+
129+
mapElement.extent = new Extent({
130+
spatialReference: {
131+
wkid: 5936
132+
},
133+
xmin: 1270382,
134+
ymin: -1729511,
135+
xmax: 2461436,
136+
ymax: -953893
137+
})
138+
139+
mapElement.spatialReference = new SpatialReference({
140+
// WGS_1984_EPSG_Alaska_Polar_Stereographic
141+
wkid: 5936
142+
})
143+
144+
mapElement.constraints = {
145+
minScale: 15469455
146+
}
147+
148+
const toggleButton = document.getElementById("cluster");
149+
150+
// To turn off clustering on a layer, set the
151+
// featureReduction property to null
152+
toggleButton.addEventListener("click", () => {
153+
let fr = layer.featureReduction;
154+
155+
if (fr && fr.type === "cluster") {
156+
layer.featureReduction = null;
157+
toggleButton.innerText = "Enable Clustering";
158+
159+
} else {
160+
layer.featureReduction = clusterConfig;
161+
hideClusterInformation();
162+
toggleButton.innerText = "Disable Clustering";
163+
}
164+
});
165+
166+
// Update visual variables to remove clustering information from legend
167+
mapElement.whenLayerView(layer).then(() => {
168+
hideClusterInformation();
169+
});
170+
171+
function hideClusterInformation() {
172+
const featureReductionTemplate = layer.featureReduction.clone();
173+
featureReductionTemplate.renderer = {
174+
type: "class-breaks",
175+
field: "mag",
176+
classBreakInfos: classBreakInfos, // classBreakInfos obtained from unique-value-symbol-config.js
177+
visualVariables: [{
178+
type: "size",
179+
field: "cluster_count",
180+
legendOptions: {
181+
showLegend: false
182+
},
183+
minDataValue: 2,
184+
maxDataValue: 400,
185+
minSize: 18,
186+
maxSize: 54
187+
}]
188+
}
189+
190+
// Replace the featureReduction with the updated visual variables
191+
layer.featureReduction = featureReductionTemplate;
192+
}
193+
194+
</script>
195+
</head>
196+
197+
<body>
198+
<arcgis-map id="mapView">
199+
<arcgis-home position="top-left"></arcgis-home>
200+
<arcgis-zoom position="top-left"></arcgis-zoom>
201+
<arcgis-expand position="top-left">
202+
<arcgis-placement>
203+
<div id="infoDiv" class="esri-widget">
204+
<button id="cluster" class="esri-button">Disable Clustering</button>
205+
<arcgis-legend></arcgis-legend>
206+
</div>
207+
</arcgis-placement>
208+
</arcgis-expand>
209+
</arcgis-map>
210+
</body>
211+
</html>

0 commit comments

Comments
 (0)