Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About ShefaliMantri
ShefaliMantri
Regular Contributor
since
04-04-2018
09-29-2022
42
Posts created
7
Kudos given
2
Solutions
3
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by ShefaliMantri
|
POST
|
Hello @MichelMorgan , To disable scale, rotation and move, try by adding below properties "defaultUpdateOptions": { "enableRotation": false, "enableScaling": false, "enableZ": false, "multipleSelectionEnabled": false, "toggleToolOnClick": false } And add below event sketchView.on("update", function (event) { const eventInfo = event.toolEventInfo; if (eventInfo && eventInfo.type.includes("move")) { sketchView.cancel(); } });
... View more
06-28-2022
11:17 PM
|
1
|
3
|
3472
|
|
POST
|
Hello Team, We are using Arcgis JavaScript API 4.23 sketch and layer list widget. The issue is when any geometry is selected from sketch widget, LayerList widget additional button (custom) like to delete and cluster is hidden. We need to reopen the Layer list widgets to view the button's. Could you help us why LayerList widget is impacted when we use/select sketch widget geometry to draw? Is there any way to stop that behavior other than re-open LayerList widget? Enclosed html page sample is created in the ArcGIS JavaScript sandbox. Steps to reproduce issue:- 1. Expand Legend and click group 1. 2. Expand TOC (right side) and expand predefined group layer 3. click on sketch widget(in bottom) point geometry. 4. observe layerlist widget cluster, del icon gone <html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>
LayerList widget with actions | Sample | ArcGIS API for JavaScript 4.23
</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.19/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.19/"></script>
<script>
var demographicGroupLayer = null;
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GroupLayer",
"esri/layers/FeatureLayer",
"esri/widgets/LayerList",
'esri/widgets/Legend',
'esri/widgets/Expand',
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch"
], (Map, MapView, GroupLayer, FeatureLayer, LayerList, Legend, Expand,
GraphicsLayer, Sketch) => {
// Create layer showing sample data of the United States.
// Create GroupLayer with the two MapImageLayers created above
// as children layers.
// Create a map and add the group layer to it
const map = new Map({
basemap: "gray-vector",
layers: []
});
// Add the map to a MapView
const view = new MapView({
center: [-98.5795, 39.8282],
zoom: 4,
container: "viewDiv",
map: map
});
const graphicsLayer = new GraphicsLayer();
graphicsLayer.listMode = "hide";
const legend = new Legend({
view: view,
container: 'legendDiv',
});
const infoDiv = document.getElementById('infoDiv');
view.ui.add(
new Expand({
view: view,
content: infoDiv,
expandTooltip: 'Expand Legend',
collapseTooltip: 'Collapse Legend',
expandIconClass: 'esri-icon-layer-list',
expanded: false,
}),
'top-left'
);
function updateAllLayer() {
map.allLayers.items.forEach((l) => {
if (l.type === 'feature') {
updateTOC(l.id);
}
});
}
function handleSpace(className) {
const spaceFiller = '_qb_count_';
className = className.toString().trim();
className = className.replace(/\s/g, spaceFiller);
return className;
}
view.when(() => {
const sketch = new Sketch({
layer: graphicsLayer,
view: view,
// graphic will be selected as soon as it is created
creationMode: "update"
});
view.ui.add(sketch, "bottom-right");
demographicGroupLayer = new GroupLayer({
title: 'Predefined',
visible: true,
listMode: 'show',
visibilityMode: 'independent',
layers: []
});
map.add(demographicGroupLayer);
// Create the LayerList widget with the associated actions
// and add it to the top-right corner of the view.
const layerList = new LayerList({
view: view,
// executes for each ListItem in the LayerList
listItemCreatedFunction: function (event) {
const item = event.item;
if (item && item.layer && item.layer.type !== 'group') {
const layerId = handleSpace(item.layer.id);
item.panel = {
content: null,
className: 'esri_layer_action_toc_' + layerId,
open: false,
};
} else if (item && item.layer && item.layer.type === 'group') {
const layerId = handleSpace(item.layer.id);
item.panel = {
content: null,
className: 'esri_layer_action_group_count_' + layerId,
open: false,
};
}
},
container: document.createElement(
'div',
document.getElementById('viewDiv')
),
});
// Add widget to the top right corner of the view
const tocExpandWidget = new Expand({
view: view,
expandTooltip: 'Expand TOC',
collapseTooltip: 'Collapse TOC',
content: layerList.container,
expandIconClass: 'esri-icon-layer-list',
group: 'top-right',
});
view.ui.add(tocExpandWidget, { position: 'top-right' });
tocExpandWidget.watch('expanded', function (evt) {
if (evt) {
updateAllLayer();
}
});
});
const secondGrpButton = document.getElementById('SecondBtn');
secondGrpButton.addEventListener('click', () => {
createGrp2();
});
const FirstGrpButton = document.getElementById('FirstBtn');
FirstGrpButton.addEventListener('click', () => {
createGrp1();
});
function getClusterSettings() {
return {
type: 'cluster',
clusterRadius: '100px',
// {cluster_count} is an aggregate field containing
// the number of features comprised by the cluster
popupTemplate: {
title: 'Cluster summary',
content: 'This cluster represents {cluster_count}.',
fieldInfos: [
{
fieldName: 'cluster_count',
format: {
places: 0,
digitSeparator: true,
},
},
],
},
clusterMinSize: '24px',
clusterMaxSize: '60px',
labelingInfo: [
{
deconflictionStrategy: 'none',
labelExpressionInfo: {
expression: "Text($feature.cluster_count, '#,###')",
},
symbol: {
type: 'text',
color: '#FF0000',
font: {
weight: 'bold',
family: 'Noto Sans',
size: '12px',
},
},
labelPlacement: 'center-center',
},
],
};
}
function createGrp2() {
if (!demographicGroupLayer.findLayerById('Test2_Accidental Deaths')) {
const layers2 = new FeatureLayer({
url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Accidental_Deaths/FeatureServer/0',
title: 'Accidental Deaths',
id: 'Test2_Accidental Deaths',
});
demographicGroupLayer.add(layers2);
}
if (!demographicGroupLayer.findLayerById('SF Hurricanes')) {
const layers4 = new FeatureLayer({
url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/0',
title: 'SF Hurricanes',
id: 'SF Hurricanes',
});
demographicGroupLayer.add(layers4);
}
// setTimeout(() => {
// updateAllLayer();
// }, 5000);
}
function createGrp1() {
if (!demographicGroupLayer.findLayerById('world city')) {
const layers1 = new FeatureLayer({
url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0',
title: 'city',
id: 'city',
});
demographicGroupLayer.add(layers1);
}
setTimeout(() => {
updateAllLayer();
}, 5000);
// }
}
function mapIndexOfLayer(prefixClass, containerId,layerList) {
const className = prefixClass + containerId.toString().trim();
if (layerList.length === 0) {
return -1;
}
for (let i = 0; i < layerList.length; i++) {
if (className === layerList[i].className) {
return i;
}
}
return -1;
}
function updateTOC(containerId) {
const layerListContainer = document.getElementsByClassName(
'esri_layer_action_toc_' + handleSpace(containerId)
);
const index = mapIndexOfLayer(
'esri_layer_action_toc_',
handleSpace(containerId),
layerListContainer
);
if (index !== -1) {
if (
layerListContainer &&
layerListContainer[index] &&
layerListContainer[index].parentElement &&
layerListContainer[index].parentElement.children.length === 1
) {
const selectedLayer = map.allLayers.filter(function (layer) {
return layer.id === containerId;
});
if (
selectedLayer &&
selectedLayer.get('0') &&
selectedLayer.get('0')['source']
) {
const countDiv = document.createElement('div');
countDiv.id = containerId + '#cluster';
const count = selectedLayer.get('0')['source'].length
? selectedLayer.get('0')['source'].length
: 0;
countDiv.classList.add('layer_list_toc_count');
countDiv.innerHTML = 'cluster';
countDiv.title = 'cluster';
countDiv.style.marginRight = '10px';
countDiv.style.backgroundColor = 'yellow';
countDiv.onclick = function (evt) {
const layerId = evt.target.id.split('#');
console.dir(layerId[0]);
const layers2 = map.findLayerById(layerId[0]);
var fr2 = layers2.featureReduction;
layers2.featureReduction =
fr2 && fr2.type === 'cluster' ? null : getClusterSettings();
};
layerListContainer[index].parentElement.appendChild(countDiv);
const delDiv = document.createElement('div');
delDiv.id = containerId;
delDiv.innerHTML = 'del';
delDiv.style.backgroundColor = 'red';
delDiv.style.color = 'black';
delDiv.classList.add('layer_list_toc_legend');
delDiv.onclick = function (evt) {
if (demographicGroupLayer.findLayerById(evt.target.id)) {
demographicGroupLayer.remove(map.findLayerById(evt.target.id));
}
};
layerListContainer[index].parentElement.appendChild(delDiv);
}
}
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv" class="esri-widget">
<button id="FirstBtn" class="esri-button">Group1</button>
<br />
<button id="SecondBtn" class="esri-button">Group2</button>
<br />
<div id="legendDiv"></div>
</div>
</body>
</html>
... View more
06-16-2022
12:33 AM
|
0
|
0
|
1038
|
|
POST
|
Hello team, My issue is resolved after upgrade to ArcGIS API 4.23
... View more
04-29-2022
02:34 AM
|
1
|
0
|
1384
|
|
POST
|
Hello Team, cc: @Noah-Sager After analysis above issue we are able to find the root cause. When we remove any layer from the group after that label are not visible for all layers. We tried to loadAll group layers still issue is there. When we hide the feature layer from group and layerList then everything is working fine. Can anyone help me to why labels are not visible when we remove one layer from the group layer. We created one POC on the same issue: Steps 1. From Expand Legend( left side) click Group 1 and then click Group 2 once. 2. Now expand TOC(right side) and expand predefined group layer and click on del button(red background) for layer 'Accidental Deaths'. 3. Now re-open TOC and click on cluster button for all layers. You will observe labels are not visible on cluster points. Sample URL : Cluster
... View more
04-13-2022
11:53 PM
|
0
|
1
|
1428
|
|
POST
|
Sorry for late reply @Noah-Sager , We tried to create Sample using ArcGIS sample server layers and there it is non-reproducing. It is happening only with our app in Angular 9, where we create a feature layer from feature collection and toggle cluster for individual layers.
... View more
04-05-2022
05:30 AM
|
0
|
0
|
1448
|
|
POST
|
Hello Team, Using ArcGIS API 4.19 In our project we have one parent group layer and inside that multiple group layer which have collection of feature layers created from client side features. For each individual feature layer we can turn ON/OFF cluster. Example: 'Predefined' a parent group layer and added a child group layer 'Test' which have multiple feature layers like Test1, Test2, Test3, Test4. Suppose we turn ON cluster for 'Test1' feature layer. Everything works as expected. Now we added a new child group layer in Predeined group i.e. 'Custom' group layer which have multiple feature layers like custom1, custom2, custom3. When we turn ON cluster for 'custom1' layer, cluster is created, however it does not show labels on it. Same behavior for all 'Custom' group feature layers. Question:- Why cluster labels are not visible for 'Custom' group feature layers? Is this something default behaviour or some settings are required Cluster creation code:-
... View more
03-21-2022
07:47 AM
|
0
|
4
|
1533
|
|
POST
|
This is what you want to do? https://codepen.io/xiej/pen/oNpLyJY
... View more
03-21-2022
07:04 AM
|
1
|
1
|
681
|
|
POST
|
In my project we have simple renderer feature layers and a toggle button to turn ON/OFF cluster. When cluster is ON, I replaced layer simple renderer to class break renderer as shown in https://codepen.io/xiej/pen/oNpLyJY
... View more
03-21-2022
06:34 AM
|
0
|
0
|
1818
|
|
POST
|
For group layer to visible in LayerList use layer.listMode = 'show';
... View more
03-13-2022
09:43 PM
|
0
|
1
|
1026
|
|
POST
|
Hello Team, ArcGIS javascript API 4.22 we are using. In project we create custom content of popup template for each feature layer. When we turned on Cluster, cluster popup template is opened and on click of browse feature, we can browse individual features. The issue is when we try to browse individual feature, the field value is undefined except object id. Question- How to show feature's value in place of undefined Attaching sample code - For layers1 we created custom popup content. <html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Point clustering - basic configuration | Sample | ArcGIS API for
JavaScript 4.22
</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: rgba(50,50,50);
}
#infoDiv {
padding: 10px;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.22/esri/themes/dark/main.css"
/>
<script src="https://js.arcgis.com/4.22/"></script>
<script>
require([
"esri/Map",
"esri/layers/FeatureLayer",
"esri/layers/GeoJSONLayer",
"esri/views/MapView",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/widgets/Home"
], (Map, FeatureLayer, GeoJSONLayer, MapView, Legend, Expand, Home) => {
// Configures clustering on the layer. A cluster radius
// of 100px indicates an area comprising screen space 100px
// in length from the center of the cluster
const clusterConfig = {
type: "cluster",
clusterRadius: "100px",
// {cluster_count} is an aggregate field containing
// the number of features comprised by the cluster
popupTemplate: {
title: "Cluster summary",
content: "This cluster represents {cluster_count}.",
fieldInfos: [
{
fieldName: "cluster_count",
format: {
places: 0,
digitSeparator: true
}
}
]
},
clusterMinSize: "24px",
clusterMaxSize: "60px",
labelingInfo: [
{
deconflictionStrategy: "none",
labelExpressionInfo: {
expression: "Text($feature.cluster_count, '#,###')"
},
symbol: {
type: "text",
color: "#004a5d",
font: {
weight: "bold",
family: "Noto Sans",
size: "12px"
}
},
labelPlacement: "center-center"
}
]
};
const layers1 = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",
featureReduction: clusterConfig,
popupTemplate: {
title: "city",
content: popupListContent,
'outFields': ['*']
}
});
const layer = new GeoJSONLayer({
title: "Earthquakes from the last month",
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
copyright: "USGS Earthquakes",
featureReduction: clusterConfig,
// popupTemplates can still be viewed on
// individual features
popupTemplate: {
title: "Magnitude {mag} {type}",
content: "Magnitude {mag} {type} hit {place} on {time}",
fieldInfos: [
{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}
]
},
renderer: {
type: "simple",
field: "mag",
symbol: {
type: "simple-marker",
size: 4,
color: "#69dcff",
outline: {
color: "rgba(0, 139, 174, 0.5)",
width: 5
}
}
}
});
const layer1 = layer;
// background layer for geographic context
// projected to Alaska Polar Stereographic
const baseLayer = new FeatureLayer({
portalItem: {
id: "2b93b06dc0dc4e809d3c8db5cb96ba69"
},
legendEnabled: false,
popupEnabled: false,
renderer: {
type: "simple",
symbol: {
type: "simple-fill",
color: [65, 65, 65, 1],
outline: {
color: [50, 50, 50, 0.75],
width: 0.5
}
}
},
spatialReference: {
wkid: 5936
}
});
const map = new Map({
layers: [baseLayer, layer, layers1]
});
const view = new MapView({
container: "viewDiv",
extent: {
spatialReference: {
wkid: 5936
},
xmin: 1270382,
ymin: -1729511,
xmax: 2461436,
ymax: -953893
},
spatialReference: {
// WGS_1984_EPSG_Alaska_Polar_Stereographic
wkid: 5936
},
constraints: {
minScale: 15469455
},
map: map
});
view.ui.add(
new Home({
view: view
}),
"top-left"
);
const legend = new Legend({
view: view,
container: "legendDiv"
});
const infoDiv = document.getElementById("infoDiv");
view.ui.add(
new Expand({
view: view,
content: infoDiv,
expandIconClass: "esri-icon-layer-list",
expanded: false
}),
"top-left"
);
const toggleButton = document.getElementById("cluster");
// To turn off clustering on a layer, set the
// featureReduction property to null
toggleButton.addEventListener("click", () => {
let fr = layer.featureReduction;
let fr1 = layers1.featureReduction;
layers1.featureReduction =
fr1 && fr1.type === "cluster" ? null : clusterConfig;
layer.featureReduction =
fr && fr.type === "cluster" ? null : clusterConfig;
toggleButton.innerText =
toggleButton.innerText === "Enable Clustering"
? "Disable Clustering"
: "Enable Clustering";
});
function popupListContent(feature) {
const tableContent = document.createElement("table");
tableContent.classList.add('tablelayout');
tableContent.classList.add('esri-widget__table');
let infoTamplateData = "";
let object = feature.graphic.attributes;
const fieldArr = [];
if (feature.graphic.layer && feature.graphic.layer.fields) {
feature.graphic.layer.fields.forEach(element => {
fieldArr.push(element.name);
});
}
fieldArr.forEach((f) => {
infoTamplateData += "<tr label= " + f + "><th class='esri-feature__field-header' >" +
f + " </th><td class='esri-feature__field-data'>" + object[f] + "</td> </tr>";
});
tableContent.innerHTML = infoTamplateData;
return tableContent;
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv" class="esri-widget">
<button id="cluster" class="esri-button">Disable Clustering</button>
<div id="legendDiv"></div>
</div>
</body>
</html>
... View more
03-10-2022
09:17 PM
|
0
|
2
|
1868
|
|
POST
|
Thank you @UndralBatsukh for responding. Requirement is when a cluster is ON and on the map some feature is single, some are not. When single feature on the map, then it shows layer original symbol, i.e. picture marker and club features shown as cluster simple circle with labels. So at same time both picture and simple marker symbols will present on map for same layer.
... View more
03-08-2022
09:00 PM
|
0
|
0
|
1874
|
|
POST
|
Hello Team, I have a simple picture marker symbol feature layer. Requirement - When we turn ON cluster for that layer if single feature, then it should display layer original picture marker symbol and if more than 2 features, then it should display cluster symbol (simple marker symbol) with labels. When we turn OFF cluster, then layer will display as its initial state i.e. only picture marker symbols
... View more
03-07-2022
10:08 PM
|
0
|
11
|
2416
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 06-28-2022 11:17 PM | |
| 1 | 04-29-2022 02:34 AM | |
| 1 | 03-21-2022 07:04 AM |
Activity Feed
- Got a Kudo for Re: How to disable sketch/graphics editing or selection. 07-10-2022 10:39 PM
- Posted Re: How to disable sketch/graphics editing or selection on ArcGIS JavaScript Maps SDK Questions. 06-28-2022 11:17 PM
- Posted LayerList widget custom icons are hide when sketch widget geometry select on ArcGIS JavaScript Maps SDK Questions. 06-16-2022 12:33 AM
- Tagged LayerList widget custom icons are hide when sketch widget geometry select on ArcGIS JavaScript Maps SDK Questions. 06-16-2022 12:33 AM
- Tagged LayerList widget custom icons are hide when sketch widget geometry select on ArcGIS JavaScript Maps SDK Questions. 06-16-2022 12:33 AM
- Got a Kudo for Re: Cluster labels are not display. 04-29-2022 07:03 AM
- Posted Re: Cluster labels are not display on ArcGIS JavaScript Maps SDK Questions. 04-29-2022 02:34 AM
- Posted Re: Cluster labels are not display on ArcGIS JavaScript Maps SDK Questions. 04-13-2022 11:53 PM
- Posted Re: Cluster labels are not display on ArcGIS JavaScript Maps SDK Questions. 04-05-2022 05:30 AM
- Got a Kudo for Re: FeatureLayer CLUSTER ClassBreakRenderer. 03-23-2022 05:17 AM
- Posted Cluster labels are not display on ArcGIS JavaScript Maps SDK Questions. 03-21-2022 07:47 AM
- Tagged Cluster labels are not display on ArcGIS JavaScript Maps SDK Questions. 03-21-2022 07:47 AM
- Tagged Cluster labels are not display on ArcGIS JavaScript Maps SDK Questions. 03-21-2022 07:47 AM
- Posted Re: FeatureLayer CLUSTER ClassBreakRenderer on ArcGIS JavaScript Maps SDK Questions. 03-21-2022 07:04 AM
- Posted Re: how to retain layer original symbol if single feature else create cluster symbol on ArcGIS JavaScript Maps SDK Questions. 03-21-2022 06:34 AM
- Kudoed Re: how to retain layer original symbol if single feature else create cluster symbol for Lerman. 03-21-2022 06:34 AM
- Posted Re: how to retain layer original symbol if single feature else create cluster symbol on ArcGIS JavaScript Maps SDK Questions. 03-21-2022 03:42 AM
- Posted Re: Can't See Empty Group Layers in Layers Widget on ArcGIS JavaScript Maps SDK Questions. 03-13-2022 09:43 PM
- Posted Re: Cluster popup browse features values is undefined on ArcGIS JavaScript Maps SDK Questions. 03-12-2022 05:39 AM
- Kudoed Re: Cluster popup browse features values is undefined for UndralBatsukh. 03-12-2022 05:39 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
09-29-2022
07:58 AM
|