Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About JoelBennett
JoelBennett
MVP Regular Contributor
since
07-04-2014
658
Posts created
85
Kudos given
161
Solutions
289
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(2 Idea Submissions)Latest Contributions by JoelBennett
|
POST
|
The spinner you're talking about is a useful but undocumented widget with the path esri/widgets/Spinner. I've updated the sample's code below to show how it can be used. If you click somewhere on the map, the spinner will show. If you then click somewhere else, it will be hidden. You can repeat the process as many times as you like. In short, I added or updated lines 35, 36, 48-64, and 125. Since this is an undocumented feature, it may be removed or altered in a future release without notice, so using it is at your own risk. <html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Custom popup actions per feature attribute | Sample | ArcGIS Maps SDK for JavaScript 4.30</title>
<style>
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.30/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/core/reactiveUtils",
"esri/popup/content/TextContent",
"esri/widgets/Spinner"
], (Map, MapView, FeatureLayer, reactiveUtils, TextContent, Spinner) => {
const map = new Map({
basemap: "streets-navigation-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-101.94981250000075, 41.20977753557709],
zoom: 5
});
const spinner = new Spinner({view:view});
view.ui.add(spinner, {key:"a-unique-key-you-make-up", position:"manual"});
view.on("click", function(evt) {
if (spinner.location)
hideSpinner();
else
showSpinner(evt.mapPoint);
});
function hideSpinner() {
spinner.location = null;
spinner.hide();
}
function showSpinner(point) {
spinner.show({location:point});
}
/********************
* Add feature layer
********************/
// sampling of breweries
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/OpenBeerDB/FeatureServer/0",
popupTemplate: {
title: "{name}",
outFields: ["*"],
lastEditInfoEnabled: false,
fieldInfos: [
{
fieldName: "name"
},
{
fieldName: "address1",
label: "address"
},
{
fieldName: "city"
},
{
fieldName: "state"
},
{
fieldName: "phone"
},
{
fieldName: "website"
}
],
actions: [
{
id: "find-brewery",
image: "https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/live/beer.png",
title: "Brewery Info"
}
],
content: formatContent
}
});
// Use a function to format the content of the popup
function formatContent(event) {
const attributes = event.graphic.attributes;
let text = "";
// Only display the attributes if they exist
text += attributes.website
? `Brewery: <a href="${attributes.website}">${attributes.name}</a><br>`
: `Brewery: ${attributes.name}<br>`;
text += attributes.address1 ? `Address:<br>${attributes.address1}<br>` : `Located in: `;
text += attributes.city && attributes.state ? `${attributes.city},${attributes.state}<br>` : ``;
text += attributes.phone !== null ? `Phone:${attributes.phone}` : ``;
let textElement = new TextContent({
text: text
});
return [textElement];
}
// map.add(featureLayer);
view.when(() => {
// Watch for when features are selected
reactiveUtils.watch(
() => view.popup.selectedFeature,
(graphic) => {
if (graphic) {
// Set the action's visible property to true if the 'website' field value is not null, otherwise set it to false
const graphicTemplate = graphic.getEffectivePopupTemplate();
graphicTemplate.actions.items[0].visible = graphic.attributes.website ? true : false;
}
}
);
// Watch for the trigger-action event on the popup
reactiveUtils.on(
() => view.popup,
"trigger-action",
(event) => {
if (event.action.id === "find-brewery") {
const attributes = view.popup.selectedFeature.attributes;
// Get the 'website' field attribute
const info = attributes.website;
// Make sure the 'website' field value is not null
if (info) {
// Open up a new browser using the URL value in the 'website' field
window.open(info.trim());
}
}
}
);
});
});
</script>
</head>
<body class="light">
<div id="viewDiv" class="esri-widget"></div>
</body>
</html>
... View more
07-12-2024
10:18 AM
|
1
|
0
|
3528
|
|
POST
|
Does geometryEngine.intersect not produce the results you're looking for?
... View more
07-08-2024
10:21 AM
|
0
|
0
|
889
|
|
POST
|
@JeffreyThompson2 makes good points here, and were I to create this my design would be along those lines. You may very well end up doing a redesign, but as it stands you have a 99.9% solution for the problem you've described, and you also seem interested in knowing where you went wrong. As such, It looks to me like the problem lies in the "filterByCollege" function, which you have as follows: function filterByCollege(event) {
let selectedCollegeType = event.target.getAttribute("TYPE");
collegeLayerView.filter = {
where: "TYPE = '" + selectedCollegeType + "'"
};
map.remove(graphicsLayer);
//map.add(graphicsLayerPublic);
map.add(graphicsLayerPrivate);
console.log(selectedCollegeType);
} By changing it to the following, it appears to behave like what you've described: function filterByCollege(event) {
let selectedCollegeType = event.target.getAttribute("TYPE");
collegeLayerView.filter = {
where: "TYPE = '" + selectedCollegeType + "'"
};
map.remove(graphicsLayer);
if (selectedCollegeType == "Public") {
map.add(graphicsLayerPublic);
map.remove(graphicsLayerPrivate);
} else {
map.remove(graphicsLayerPublic);
map.add(graphicsLayerPrivate);
}
console.log(selectedCollegeType);
} Basically, removed lines 7 and 8 from the original, and added lines 7-13.
... View more
07-02-2024
04:24 PM
|
0
|
1
|
1816
|
|
POST
|
You mostly had it...perhaps if the documentation for using a function with the content property were more clear on what gets passed to the function, you'd have gotten better results. The following shows the changes you can make to your popupTemplate definition to get it working though: const popupTemplate = {
title: "You clicked here",
outFields: ["STATE","CITY","DESCRIPTION","DATE_TIME"],
content: function(feature) {
const state = feature.graphic.attributes.STATE;
const city = feature.graphic.attributes.CITY || ""; // Handle missing CITY attribute
const description = feature.graphic.attributes.DESCRIPTION;
const dateTime = feature.graphic.attributes.DATE_TIME;
return `
<div>
<h3>State: ${state}</h3>
${city ? `<h3>City: ${city}</h3>` : ''}
<h3>Description: ${description}</h3>
<h3>Date: ${dateTime}</h3>
</div>
`;
}
};
... View more
06-28-2024
10:11 AM
|
1
|
0
|
1432
|
|
POST
|
Ok, you can do something like the following so that if you update the LayerView.filter, it will automatically update the LayerSearchSource.filter as well: function setupFilter(layerSearchSource, layerView) {
if (layerView.filter) {
layerSearchSource.filter = {
where: layerView.filter.where,
geometry: layerView.filter.geometry
};
layerView.filter.watch(["where", "geometry"], function(newValue, oldValue, propertyName, target) {
if (propertyName == "where")
layerSearchSource.filter.where = newValue;
else if (propertyName == "geometry")
layerSearchSource.filter.geometry = newValue;
});
} else
layerSearchSource.filter = null;
}
layerView.watch("filter", function(newValue, oldValue, propertyName, target) {
setupFilter(layerSearchSource, layerView);
});
setupFilter(layerSearchSource, layerView);
... View more
06-27-2024
10:53 AM
|
0
|
0
|
824
|
|
POST
|
Unfortunately, the Search widget doesn't take into account the LayerView.filter when executing queries when using a LayerSearchSource. However, the LayerSearchSource does have a filter property which you can use to duplicate at least some of the LayerView.filter's properties. layerSearchSource.filter = {
where: layerView.filter.where,
geometry: layerView.filter.geometry
}; Fortunately, "where" and "geometry" are the most common properties, so that might be all you need.
... View more
06-26-2024
04:28 PM
|
0
|
2
|
844
|
|
POST
|
This behavior can be altered in the file esri/widgets/Popup.js, and fortunately it's very simple. Here are my notes for 4.28: Search for: this._featuresWidget.featureNavigationTop=k,{initial:!0} Replace with: this._featuresWidget.featureNavigationTop=false,{initial:false} And here are my notes for 4.29: Search for: this._featuresWidget.featureNavigationTop=v,y.initial Replace with: this._featuresWidget.featureNavigationTop=!1,{initial:!1}
... View more
06-18-2024
09:21 AM
|
1
|
0
|
4212
|
|
POST
|
Unfortunately not. As it says in the "Known Limitations" section of the TileLayer documentation, "All tiled layers must have the same tiling scheme and SpatialReference."
... View more
06-14-2024
11:42 AM
|
2
|
0
|
1239
|
|
POST
|
Ok, there's actually a significant difference between what's going on in this case versus what was going on in the other thread. Before getting into the difference, just a brief description of things you may already know (for the sake of clarity). When creating a WMSLayer, the layer sends a GetCapabilities request to get information about the service it will be accessing. The response is an XML document, and embedded within is the URLs the application should use when making calls to GetMap and/or GetFeatureInfo. In the case of the other thread, the URL for GetMap was a relative URL. Since the hostname was not included, the SDK likely assumed it was the same host as the URL in the browser's address bar. Since the host for the page in the browser was not the same as the host for the WMS server, this gave the unexpected results described in that thread. Personally, I think the SDK should be able to handle relative URLs better, using the hostname passed into the constructor instead, but those kinds of design decisions are the SDK development team's prerogative. However, this is not what's happening in your case. Instead, the GetCapabilities response has absolute URLs, and the GetMap URL is the hard-coded value "http://46.255.211.67:85/geoserver/Etnografinis_zemelapis/ows?SERVICE=WMS&". Therefore, the SDK is working exactly as it should by sending the GetMap requests to that URL, because that's what the service told it to do. There's really only two ways to deal with this. (1) Contact the WMS service's administrator, and request that they reconfigure the service. It seems unlikely to me that's going to work though. Instead (2) you will have to do some replacing on the client-side...there's just no way around it. You could use a RequestInterceptor like the other thread shows, or you could fix the URLs on your layer object by doing something like the following: const layer = new WMSLayer({
url: "https://www.geoportal.lt/mapproxy/etnografinis_zemelapis/wms"
});
layer.load().then(() => {
layer.featureInfoUrl = layer.featureInfoUrl.replace("http://46.255.211.67:85/geoserver/", "https://www.geoportal.lt/mapproxy/");
layer.mapUrl = layer.mapUrl.replace("http://46.255.211.67:85/geoserver/", "https://www.geoportal.lt/mapproxy/");
});
... View more
06-12-2024
12:48 PM
|
1
|
1
|
2436
|
|
POST
|
Can you specify the value you're using for the url property? The example given in the thread you referred to doesn't appear to be reachable anymore, at least for me.
... View more
06-11-2024
11:26 AM
|
0
|
3
|
2494
|
|
POST
|
The problem here is that you're zooming in as much as possible upon the geometry of the cluster graphic itself. However, there's no guarantee that any of the points represented by that cluster will be within the extent of the view after zooming in. Instead, you need to get a reference to the points represented by the cluster, and zoom to the extent of those points. Therefore, you'll need something more like this: view.on("click", (event) => {
view.hitTest(event,{include:geojsonLayer}).then(({ results }) => {
console.log(results[0])
if(results[0].graphic.attributes.cluster_count && results[0].graphic.attributes.cluster_count > 1){
//get a reference to the LayerView in order to do a client-side query
var layerView = view.layerViews.find(function(layerView) { return (layerView.layer == geojsonLayer); });
//create the query that will return the features associated with the cluster
var query = layerView.createQuery();
query.aggregateIds = [results[0].graphic.getObjectId()];
//get the associated features and zoom to them
layerView.queryFeatures(query).then(function(featureSet) {
if (featureSet.features.length !== 0)
view.goTo(featureSet.features);
});
}
});
}); What you're trying to achieve may not be an "exact science" though. Although this will zoom to the minimum bounding rectangle of the points in the original cluster, some of those points may be close enough together that they appear as a new cluster of their own. Or in other cases, there may be other points still in the view that weren't part of the original cluster as well.
... View more
06-11-2024
10:55 AM
|
0
|
0
|
1114
|
|
POST
|
Unfortunately, neither the 3.x API nor the 4.x SDK support those curves defined in the JSON documentation.
... View more
06-05-2024
10:13 AM
|
0
|
0
|
924
|
|
POST
|
Below is the code for the Sketch widget sample with lines 52-57 added to test this behavior, and it seems to be working as expected. What version of the SDK are you using? <html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Sketch widget | Sample | ArcGIS Maps SDK for JavaScript 4.29</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.29/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/layers/GraphicsLayer",
"esri/views/MapView"
], (Sketch, Map, GraphicsLayer, MapView) => {
const graphicsLayer = new GraphicsLayer();
const map = new Map({
basemap: "topo-vector",
layers: [graphicsLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [90, 45]
});
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, "top-right");
view.on("click", function(evt) {
view.hitTest(evt, {include:graphicsLayer}).then(function(response) {
var graphic = response.results[0]?.graphic;
console.info(graphic);
});
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
05-30-2024
03:13 PM
|
0
|
1
|
1259
|
|
POST
|
You can disable scaling on updates like so: editor.viewModel.sketchViewModel.defaultUpdateOptions.enableScaling = false; Unfortunately, the defaultCreateOptions provide no such property. They do have a preserveAspectRatio property though which may be helpful, as does defaultUpdateOptions: editor.viewModel.sketchViewModel.defaultCreateOptions.preserveAspectRatio = false;
... View more
05-27-2024
09:22 AM
|
0
|
3
|
2008
|
|
POST
|
We have something like the code below in our framework, and it works for this purpose: //This is typically used when the popup's selected feature's attributes have changed, and the popup needs to reflect the new values
function reshowPopup(popup, graphic) {
if (popup.selectedFeature == graphic) {
var selectedFeatureIndex = popup.selectedFeatureIndex;
var features = popup.features.concat([]);
popup.features = features;
popup.selectedFeatureIndex = selectedFeatureIndex;
}
}
... View more
05-24-2024
09:46 AM
|
1
|
1
|
1343
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 03-19-2024 10:37 AM | |
| 1 | 03-31-2026 02:34 PM | |
| 1 | 12-09-2025 09:35 AM | |
| 2 | 12-09-2025 09:06 AM | |
| 1 | 11-26-2025 12:29 PM |
Activity Feed
- Got a Kudo for Re: Go to specific index in popup. 06-05-2026 07:57 AM
- Kudoed Re: ArcGIS Maps SDK for JavaScript – Version 5.0 Release for Noah-Sager. 04-21-2026 10:02 AM
- Got a Kudo for Re: ArcGIS Maps SDK for JavaScript – Version 5.0 Release. 04-10-2026 09:11 AM
- Posted Re: ArcGIS Maps SDK for JavaScript – Version 5.0 Release on ArcGIS JavaScript Maps SDK Blog. 03-31-2026 02:34 PM
- Kudoed ArcGIS Maps SDK for JavaScript – Version 5.0 Release for Noah-Sager. 02-25-2026 08:30 AM
- Kudoed Re: Use Fonts locally or from portal (CORS error) for SebastianKrings. 01-20-2026 10:31 AM
- Posted Re: Use Fonts locally or from portal (CORS error) on ArcGIS JavaScript Maps SDK Questions. 01-20-2026 10:26 AM
- Posted Re: Use Fonts locally or from portal (CORS error) on ArcGIS JavaScript Maps SDK Questions. 01-15-2026 04:03 PM
- Got a Kudo for Re: Timeslider web component ShadowDom not fully rendered even though component is "ready". 12-18-2025 12:11 AM
- Got a Kudo for Re: Adding a row to a table using JS 4.x. 12-09-2025 09:39 AM
- Posted Re: Adding a row to a table using JS 4.x on ArcGIS JavaScript Maps SDK Questions. 12-09-2025 09:35 AM
- Got a Kudo for Re: Timeslider web component ShadowDom not fully rendered even though component is "ready". 12-09-2025 09:11 AM
- Posted Re: Timeslider web component ShadowDom not fully rendered even though component is "ready" on ArcGIS JavaScript Maps SDK Questions. 12-09-2025 09:06 AM
- Posted Re: Adding a row to a table using JS 4.x on ArcGIS JavaScript Maps SDK Questions. 12-05-2025 08:39 AM
- Posted Re: How to show/hide spinner feature programmatically? on ArcGIS JavaScript Maps SDK Questions. 12-04-2025 03:10 PM
- Posted Missing new fonts in 4.34 on ArcGIS JavaScript Maps SDK Questions. 12-04-2025 09:16 AM
- Got a Kudo for Re: Disabling the Esri JavaScript API v4.x IdentityManager login prompt?. 12-03-2025 12:43 PM
- Got a Kudo for Re: dojoConfig (loader) replacement strategy for large JavaScript app with many files?. 12-01-2025 11:46 AM
- Kudoed Re: dojoConfig (loader) replacement strategy for large JavaScript app with many files? for Andy_Morgan. 11-26-2025 12:54 PM
- Got a Kudo for Re: dojoConfig (loader) replacement strategy for large JavaScript app with many files?. 11-26-2025 12:52 PM