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
|
It sounds like you may have reversed the order of your script tags, making what used to be first one now the second. However, the "shorter" script tag needs to come before the "longer" one. Basically, you'll have this: <script src="https://js.arcgis.com/4.27/"></script>
<script>
require(["esri/WebMap", "esri/views/MapView", "esri/widgets/Editor"], (
//and the rest of the code
</script> And then you should try moving those two as low in the document as possible (preferably right before the </body> tag).
... View more
06-22-2023
06:03 PM
|
0
|
4
|
5716
|
|
POST
|
This can be reproduced in the Intro to Clustering sample: 1. Go to the "Intro to Clustering" sample sandbox. 2. Add the following code between lines 169 and 170 (i.e. somewhere between the instantiation of the View and the instantiation of the Legend): require(["esri/core/reactiveUtils"], function(reactiveUtils) {
reactiveUtils.watch(
() => view.popup?.selectedFeature,
(selectedFeature) => {
if ((selectedFeature) && (!selectedFeature.layer)) alert("no layer");
}
);
}); 3. Click "Refresh" above the top right of the map. 4. After the map loads, click a cluster. 5. On the popup, click "Browse features". 6. Click the "Next feature" icon. 7. Click the "Next feature" icon again. 8. Click the "Previous feature" icon - the alert displays, showing that the feature's "layer" reference has been lost.
... View more
06-22-2023
03:52 PM
|
0
|
1
|
996
|
|
POST
|
You may be able to resolve this conflict by moving your two script tags to the bottom of the document (e.g. just before the closing tag for the body).
... View more
06-22-2023
03:35 PM
|
0
|
6
|
5725
|
|
POST
|
By making the following changes to your codepen, it appears to work as you would expect: <html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<!--
ArcGIS Maps SDK for JavaScript, https://js.arcgis.com
For more information about the widgets-editor-basic sample,
read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/widgets-editor-basic/
-->
<title>
Edit features with the Editor widget | Sample | ArcGIS Maps SDK for
JavaScript 4.27
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.27/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/Editor",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/SimpleLineSymbol",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/Map"
], (
WebMap,
MapView,
Editor,
UniqueValueRenderer,
SimpleLineSymbol,
FeatureLayer,
Point,
Map
) => {
var map = new Map({
basemap: "topo-vector",
ground: "world-elevation"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [109.167953, 4.038615],
zoom: 7,
});
let testrenderer = new UniqueValueRenderer({
field: "msname",
defaultSymbol: new SimpleLineSymbol({
color: [236, 71, 71, 255],
width: 2.25,
style: "solid"
}),
uniqueValueInfos: [
{
label: "Full closure",
value: "abc",
symbol: new SimpleLineSymbol({
color: [247, 81, 81, 255],
width: 2.25,
style: "solid"
})
},
{
label: "Partial closure",
value: "def",
symbol: new SimpleLineSymbol({
color: [255, 170, 0, 255],
width: 2.25,
style: "solid"
})
}
]
});
let lineLayerMilitary = new FeatureLayer({
templates: [
{
name: "Full Closure",
prototype: {
attributes: {
msname: "abc"
}
}
},
{
name: "Partial Closure",
prototype: {
attributes: {
msname: "def"
}
}
}
],
source: [],
visible: true,
geometryType: "polyline",
objectIdField: "ObjectID",
renderer: testrenderer,
fields: [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},
{
name: "msname",
alias: "msname",
type: "string",
domain: {
type: "coded-value",
name: "d_closure",
codedValues: [
{
name: "Full Closure",
code: "abc"
},
{
name: "Partial Closure",
code: "def"
}
]
}
}
]
});
view.map.add(lineLayerMilitary);
view.when(() => {
const editor = new Editor({
view: view,
layerInfos: [
{
layer: lineLayerMilitary // pass in the feature layer,
}
]
});
// Add the widget to the view
view.ui.add(editor, "top-right");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
06-15-2023
11:17 AM
|
1
|
1
|
1794
|
|
POST
|
Sure enough, it disappeared...I took a screenshot last time; maybe just posting that will work. Here goes:
... View more
06-13-2023
01:03 PM
|
0
|
0
|
3304
|
|
POST
|
The third attempt seems to have worked; good thing I made a backup of the second attempt...
... View more
06-13-2023
12:53 PM
|
0
|
3
|
3310
|
|
POST
|
I have replied twice to this with a solution and my posts keep getting deleted almost immediately. Did you see either of those before they disappeared?
... View more
06-13-2023
12:15 PM
|
0
|
5
|
3323
|
|
POST
|
This is a bug in the API, particularly the PopupViewModel, which I'll try to summarize here, and then provide recommendations. Basically, the PopupViewModel stores a reference to all the features in the vicinity that you clicked on the map. When clicking on a cluster, you can browse the cluster's features as shown in your screenshots. When you click the next button, it takes that corresponding feature's Graphic reference and adds it to the MapView's graphics collection, thus enabling you to temporarily see that particular feature on the map (i.e. in addition to the cluster graphic). If you click next again, it removes the current Graphic, and then adds the newly selected feature's Graphic. It is this adding and removing from the MapView's graphics that causes the Graphics' layer property to get severed. My recommendation for you: There are various ways to work around this,, and all will fall under the category of a hack. My recommendation is to apply the simplest one, and replace the reference to "layer" with the undocumented property "sourceLayer" like so: buildLayerPopupTemplate(selectedFeature.attributes.objectid, selectedFeature.sourceLayer); You can change this back if it ever gets fixed. My recommendation for ESRI: Since we have to wait three and a half weeks to download 4.27, I'm still looking at 4.26. The problem occurs in the PopupViewModel module, particularly in the "_selectedFeatureChange" function. When setting the "_selectedClusterFeature" property, this can be resolved by setting it to a clone of the graphic, rather than the graphic itself. That is, replace: this._selectedClusterFeature=b with: this._selectedClusterFeature=b.clone()
... View more
06-13-2023
12:09 PM
|
0
|
0
|
3290
|
|
POST
|
The flattening option mentioned by @LongDinh is most likely the way to go. Perhaps you're not able to alter things on the server side, but you can on the client-side. Check out this thread, and in particular, the second solution. Although the initial problem is somewhat different (i.e. popup content instead of rendering), the solution will still likely be along the same lines...i.e. using a RequestInterceptor and flattening the attributes so that your renderer can access them.
... View more
06-12-2023
11:31 AM
|
2
|
1
|
3090
|
|
POST
|
When using tiled layers, your map's layers should all use the same coordinate system. Therefore, in this case, you should use their Web Mercator-based service instead: https://maps.nj.gov/arcgis/rest/services/Basemap/Orthos_Natural_2015_NJ_WM/MapServer/WMTS Also, since this is an ArcGIS Server map service, there's probably not much value in using the WMTS interface. You could use a TileLayer instead, with the URL: https://maps.nj.gov/arcgis/rest/services/Basemap/Orthos_Natural_2015_NJ_WM/MapServer
... View more
06-05-2023
04:24 PM
|
1
|
0
|
2600
|
|
POST
|
There is no documented way to get a reference to the geometry. However, if you're working in 2D (i.e. with a MapView), this presently works: measurement.watch("viewModel.state", function (newValue, oldValue, propertyName, target) {
if (newValue == "measured") {
var geometry = target.viewModel.activeViewModel.tool._measurementLayer.graphics.getItemAt(0).geometry;
}
});
... View more
06-02-2023
11:02 AM
|
1
|
0
|
940
|
|
POST
|
As shown in the 3.x documentation you linked to, setting the extent for a source looked like this: search.sources[0].searchExtent = extent; In 4.x, it would look like this: search.sources.getItemAt(0).filter = {geometry:extent}; See also Search.sources and LayerSearchSource.filter.
... View more
05-31-2023
07:32 PM
|
1
|
0
|
1519
|
|
POST
|
It looks like you will need to project your geometries before adding them to the map. The preferred way to do this is via the client-side projection engine like shown below: <!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>Sapes and Symbols</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
#info {
top: 20px;
color: #444;
height: auto;
font-family: arial;
right: 20px;
margin: 5px;
padding: 10px;
position: absolute;
width: 115px;
z-index: 40;
border: solid 2px #666;
border-radius: 4px;
background-color: #fff;
}
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
button {
display: block;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
require(["esri/map", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/geometry/Point", "esri/SpatialReference", "esri/Color", "esri/geometry/projection", "dojo/domReady!"], function (Map, Draw, SimpleMarkerSymbol, Graphic, Point, SpatialReference, Color, projectionEngine) {
projectionEngine.load().then(function() {
var map = new Map("mapDiv", {
basemap: "streets",
zoom: 3
});
map.on("load", function() {
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new Color("#00FFFF"));
var point = new Point([524669.72858949, 914723.2758707441], new SpatialReference(2881));
var projectedPoint = projectionEngine.project(point, map.spatialReference);
map.graphics.add(new Graphic(projectedPoint, markerSymbol));
});
});
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html> If working with browsers that don't support the client-side projection engine, an alternative is to use the server side GeometryService.project.
... View more
05-25-2023
05:13 PM
|
0
|
0
|
1401
|
|
POST
|
The main thing here is that you need to normalize the point to the view's extent. That is, you need to ensure the point's 'x' value is within the view's xmin and xmax values, which can be different for the same location if the map has been panned all the way around the world. See modified code below. This adds a "normalizeToView" function to the Point class, which generates a copy of the instance with the 'x' value modified according to the view's extent if the view's been panned around the world. This function is used in two places: (1) when initially assigning the popup's location, and (2) whenever the view's extent is changed, in which case the popup's location is checked, and if necessary, its 'x' value is modified. The only caveat is that this uses the undocumented esri/geometry/support/spatialReferenceUtils module, which could change in future releases without notice. <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS Maps SDK for Javascript : Marker Playground</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.25/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/Graphic",
"esri/geometry/Point",
"esri/PopupTemplate",
"esri/core/reactiveUtils",
"esri/geometry/support/spatialReferenceUtils"
], function(esriConfig, Map, MapView, Basemap, Graphic, Point, PopupTemplate, reactiveUtils, spatialReferenceUtils) {
Point.prototype.normalizeToView = function(view) {
var point = this.clone();
if ((view) && (view.extent) && (!view.extent.intersects(this))) {
var info = spatialReferenceUtils.getInfo(view.spatialReference);
if (info) {
var extents = view.extent.clone().normalize();
var nPoint = this.clone().normalize();
var intersects = false;
for (var x = 0; x < extents.length; x++) {
if (extents[x].intersects(nPoint)) {
intersects = true;
break;
}
}
if (intersects) {
var worldWidth = info.valid[1] * 2;
while (point.x < view.extent.xmin)
point.x += worldWidth;
while (point.x > view.extent.xmax)
point.x -= worldWidth;
}
}
}
return point;
};
// api key
esriConfig.apiKey = "";
// init the map
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
map: map,
center: [0,0],
zoom: 1,
container: "viewDiv",
constraints: {
//minZoom: 2
}
});
const template = {
title: "{name}"
};
const graphics = new Graphic({
geometry: {
type: "point",
x: 0,
y: 0,
spatialReference: {
wkid: 102100
}
},
attributes: {
name: "Coordinates: 0,0"
},
popupTemplate: template,
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "blue",
text: "\ue61d", // esri-icon-map-pin
font: {
// autocasts as new Font()
size: 20,
family: "CalciteWebCoreIcons" // Esri Icon Font
}
}
});
view.graphics.add(graphics);
// listen for marker click
reactiveUtils.watch(
() => view.popup.selectedFeature,
(feature) => {
if (feature) {
if (feature.isAggregate) return;
const { geometry } = feature;
const point = new Point(geometry);
view.popup.location = point.normalizeToView(view);
}
}
);
// Set up a click event handler
view.on("click", function(event) {
console.log("Click event emitted: ", event);
console.log("Current view extent: ", view.extent);
});
view.watch("stationary", function(newValue, oldValue, propertyName, target) {
if ((newValue) && (target.popup.visible)) {
var normalizedPoint = target.popup.location.normalizeToView(target);
if (normalizedPoint.x != target.popup.location.x)
target.popup.location = normalizedPoint;
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
05-24-2023
02:01 AM
|
0
|
1
|
976
|
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. 3 weeks ago
- 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