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
487
Posts created
55
Kudos given
101
Solutions
200
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
|
Please see this post which discusses changing the appearance of the vertex symbol. It was from a year ago, but if things haven't changed, you'd probably want something like: sketchViewModel.set("vertexSymbol.size", "20px");
... View more
a week ago
|
0
|
1
|
56
|
|
POST
|
The 4.29 implementation of MapView.goTo has changed in an undocumented way that produces different results than 4.28 and prior, particularly in regards to rotation. Our framework allows the user to change the map rotation via various means, and we use goTo in order to animate the change in rotation, rather than setting the rotation property directly (which causes an instant change). In code, it looks like this: view.goTo({rotation:rotation}); When doing this in 4.28 and prior, the map scale was preserved, but not the extent. Starting in 4.29, the extent is preserved, but not the scale. In order to visualize this, see the images below. The first one is the starting state, where rotation is zero (i.e. North is "up"): Now, let's say the user wants to rotate the map 90 degrees counter-clockwise so that East is "up". (In the code, we'd set the rotation value to 270.) Here's what it looks like in 4.28: We see the scale has stayed the same, which is the expected behavior. However, here's what it looks like in 4.29: We see that the map has zoomed out one level in this case. Were my browser maximized at the time, it would've zoomed out two levels instead. If the user were to repeat this process, the map would continue to zoom out each time. Fortunately, this is fairly easy to work around by adding the "center" and "scale" properties in the call to goTo: view.goTo({
rotation: rotation,
center: view.center.clone(),
scale: view.scale
}); On a side note, simply setting the rotation property directly continues to work as before, where scale is preserved.
... View more
4 weeks ago
|
0
|
3
|
253
|
|
BLOG
|
@Noah-Sager thank you, I see the downloads are available now. However, the size of the 3.46 API download is suspiciously smaller than its predecessors, and after looking into it, I see a very substantial portion of the compact API is missing altogether, as shown in the screenshots below: 3.45 3.46 Any chance we can get this fixed?
... View more
4 weeks ago
|
3
|
0
|
238
|
|
POST
|
Rather than using a SimpleMarkerSymbol, you might try something like this: Create a Circle with the 5 meter radius. Using the circle's extent, determine the four endpoints for the cross. Create a Polyline with 2 paths, one path being the vertical line, and one path being the horizontal line. Create a Graphic with the polyline as the geometry, and a SimpleLineSymbol as the symbol. Add the graphic to the view's graphics or some other GraphicsLayer. Whenever the mouse moves: Calculate the distance between the map location of the cursor and the center of the polyline's extent. Translate the polyline so it's centered at the mouse's location.
... View more
a month ago
|
0
|
1
|
89
|
|
BLOG
|
It' s been four weeks now...is there any update on when the downloads will be available?
... View more
a month ago
|
1
|
0
|
296
|
|
POST
|
Get the TimeSlider date. The timeExtent value you choose depends on the mode. var timeSliderDate = timeSlider.timeExtent.endDate || timeSlider.timeExtent.startDate; Clone the date and zero out the time components: var baseDate = new Date(timeSliderDate.valueOf());
baseDate.setUTCMilliseconds(0);
baseDate.setUTCSeconds(0);
baseDate.setUTCMinutes(0);
baseDate.setUTCHours(0); Get the number of hours between the two date objects: var milliseconds = timeSliderDate.valueOf() - baseDate.valueOf();
var seconds = milliseconds / 1000;
var minutes = seconds / 60;
var hours = minutes / 60; Set the layer's request parameters: UM1_CLOUD_WMTSLayer.set("customLayerParameters.TIME", baseDate.toISOString());
UM1_CLOUD_WMTSLayer.set("customLayerParameters.DIM_FORECAST", Math.round(hours));
... View more
03-22-2024
05:35 PM
|
1
|
0
|
131
|
|
POST
|
One of the main problems is that your measurements are in feet, but the coordinate system units for Web Mercator are meters. Even then, one might expect 100 meters to be 328.084 feet, but that's not what the screenshot shows either. I've used the logic below to generate rectangles based upon user-entered dimensions, and it works. The "getRectangle" function is the main one, while "getMapDistance" is just a helper. I suppose the efficiency of this particular workflow could be improved since the circle gets created twice, but it is what it is. function getMapDistance(mapPoint, radiusInFeet, ordinate) {
var circle = new Circle({
center: mapPoint,
geodesic: true,
radius: radiusInFeet,
radiusUnit: "feet"
});
return circle.extent[ordinate + "max"] - mapPoint[ordinate];
}
function getRectangle(length, width, centerPoint) {
var mapLength = getMapDistance(centerPoint, length / 2, "x");
var mapWidth = getMapDistance(centerPoint, width / 2, "y");
var xmin = centerPoint.x - mapLength;
var ymin = centerPoint.y - mapWidth;
var xmax = centerPoint.x + mapLength;
var ymax = centerPoint.y + mapWidth;
return Polygon.fromExtent(new Extent({xmin:xmin, ymin:ymin, xmax:xmax, ymax:ymax, spatialReference:centerPoint.spatialReference}));
}
... View more
03-20-2024
10:41 AM
|
0
|
0
|
90
|
|
POST
|
It appears this is driven by the layer's displayField setting. Perhaps you can try setting it to a different field name and seeing if that makes a difference.
... View more
03-20-2024
10:09 AM
|
0
|
1
|
96
|
|
POST
|
You can get the extent of all the graphics, and then expand it a bit: var extent = null;
graphicsLayer.graphics.forEach(function(graphic) {
if (graphic.geometry.type == "polygon") {
if (extent === null)
extent = graphic.geometry.extent.clone();
else
extent.union(graphic.geometry.extent);
}
});
if (extent !== null)
view.goTo(extent.expand(1.5));
... View more
03-19-2024
11:01 AM
|
0
|
0
|
41
|
|
POST
|
If you know the index, you can just set the selectedFeatureIndex value: popup.selectedFeatureIndex = 5;
... View more
03-19-2024
10:37 AM
|
0
|
0
|
87
|
|
POST
|
Please see this thread and this thread, which discuss how to deal with nested properties in a GeoJSON layer.
... View more
03-19-2024
10:29 AM
|
0
|
0
|
59
|
|
POST
|
This probably has what you need to accomplish what you're trying to do, or at least get you closer to it anyways: <html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Highlight point features | 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%;
}
#paneDiv {
position: absolute;
bottom: 40px;
width: 100%;
text-align: center;
background-color: transparent;
color: white;
}
.esri-button-overwrite {
width:auto;
display: table-cell;
margin: 4px;
background-color: white;
color: #0079c1;
}
</style>
<script>
require(["esri/Map", "esri/WebScene", "esri/views/SceneView"], (
Map,
WebScene,
SceneView
) => {
// load webscene from portal item
const webScene = new WebScene({
portalItem: {
// autocasts as new PortalItem()
id: "475a7161ed194460b5b52654e29581a2"
}
});
const view = new SceneView({
map: webScene,
container: "viewDiv",
// set highlightOptions like color and fillOpacity
highlightOptions: {
color: [255, 241, 58],
fillOpacity: 0.4
}
});
// these two highlight handlers are used for selection and hovering over features
let highlightSelect;
webScene.when(() => {
// get layer from webScene
const stationLayer = webScene.layers.getItemAt(1);
// highlight is set on the layerView, so we need to detect when the layerView is ready
view.whenLayerView(stationLayer).then((layerView) => {
// creates the query that will be used to obtain the features needed for the highlight
const queryStations = stationLayer.createQuery();
// features that are passed in the highlight function need to have an `objectID`
// if the query is built using `new Query()` then `queryStations.outFields = ["objectID"]` should be set
const buttons = document.querySelectorAll("button");
for (let i = 0, button = null; (button = buttons[i]); i++) {
button.addEventListener("mouseover", onClick);
button.addEventListener("mouseout", onMouseOut);
}
function onClick(event) {
queryStations.where = `nom='${event.target.innerText}'`;
stationLayer.queryFeatures(queryStations).then((result) => {
if (typeof view.popup?.clear == "function") {
view.popup.close();
view.popup.clear();
}
// if a feature is already highlighted, then remove the highlight
if (highlightSelect) {
highlightSelect.remove();
highlightSelect = null;
}
// the feature to be highlighted
const feature = result.features[0];
view.openPopup({ features: [feature] });
// use the objectID to highlight the feature
highlightSelect = layerView.highlight(
feature.attributes["OBJECTID"]
);
/*
// center the feature
view
.goTo(
{
target: feature.geometry,
tilt: 70,
zoom: 16
},
{
duration: 2000,
easing: "in-out-expo"
}
)
.catch((error) => {
if (error.name != "AbortError") {
console.error(error);
}
});
*/
});
}
function onMouseOut(evt) {
if (typeof view.popup?.clear == "function") {
view.popup.close();
view.popup.clear();
}
if (highlightSelect) {
highlightSelect.remove();
highlightSelect = null;
}
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="paneDiv" class="esri-widget">
<h3>Subway stations</h3>
<button class="esri-button esri-button-overwrite">Valmy</button>
<button class="esri-button esri-button-overwrite">
St-Jean Vieux Lyon
</button>
<button class="esri-button esri-button-overwrite">Charpennes</button>
<button class="esri-button esri-button-overwrite">Sans souci</button>
<button class="esri-button esri-button-overwrite">Hôtel de Ville</button>
<button class="esri-button esri-button-overwrite">Garibaldi</button>
</div>
</body>
</html> Note that adding and removing a highlight is redundant because the popup adds its own highlight as well. Therefore, in order to get rid of the popup's highlight, I added code to close the popup as well. I also commented out the part where the view zooms to the selected feature...otherwise, the popup would always appear over top of the feature, effectively hiding it.
... View more
02-29-2024
09:53 AM
|
1
|
1
|
177
|
|
POST
|
In that case, can you supply the code where you create the PopupTemplate and its actions?
... View more
02-20-2024
10:31 AM
|
0
|
0
|
125
|
|
POST
|
There isn't native support for this in the SDK since polygon graphics only support horizontal labeling (see the LabelClass.labelPlacement property). That's not to say you can't pull this off with a little extra work though. One idea would be to maintain a separate polyline layer where the polygons have been converted to polylines, and those polylines labeled instead, since the SDK does support drawing labels alone lines. If you make those polylines transparent, it will appear as if the polygon edge is labeled. Below is a basic example: <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.28</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.28/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Color",
"esri/Graphic",
"esri/Map",
"esri/geometry/Polygon",
"esri/geometry/Polyline",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/Font",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/TextSymbol",
"esri/views/MapView"
], (
Color,
Graphic,
Map,
Polygon,
Polyline,
FeatureLayer,
SimpleRenderer,
Font,
SimpleFillSymbol,
SimpleLineSymbol,
TextSymbol,
MapView
) => {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [90, 45]
});
view.when(() => {
var polygon = Polygon.fromJSON({
spatialReference: { latestWkid: 3857, wkid: 102100 },
rings: [
[
[9201708.294980831, 6103380.512501691],
[9199505.916630479, 6061356.630160495],
[9192922.9112975, 6019793.170268292],
[9182031.40376591, 5979145.510789373],
[9166950.723671414, 5939858.9959870605],
[9147846.098100968, 5902364.05713876],
[9124926.841330219, 5867071.496640812],
[9098444.06153251, 5834367.987171478],
[9068687.909585183, 5804611.835224151],
[9035984.400115848, 5778129.055426442],
[9000691.8396179, 5755209.7986556925],
[8963196.9007696, 5736105.173085245],
[8923910.385967288, 5721024.492990751],
[8883262.726488369, 5710132.98545916],
[8841699.266596166, 5703549.980126182],
[8799675.38425497, 5701347.601775828],
[8757651.501913773, 5703549.980126182],
[8716088.04202157, 5710132.98545916],
[8675440.382542651, 5721024.492990751],
[8636153.867740339, 5736105.173085245],
[8598658.928892039, 5755209.7986556925],
[8563366.368394092, 5778129.055426442],
[8530662.858924756, 5804611.835224151],
[8500906.70697743, 5834367.987171478],
[8474423.92717972, 5867071.496640812],
[8451504.670408972, 5902364.057138759],
[8432400.044838525, 5939858.9959870605],
[8417319.36474403, 5979145.510789373],
[8406427.85721244, 6019793.170268291],
[8399844.85187946, 6061356.630160495],
[8397642.473529108, 6103380.512501691],
[8399844.85187946, 6145404.394842886],
[8406427.85721244, 6186967.8547350895],
[8417319.36474403, 6227615.514214008],
[8432400.044838525, 6266902.029016321],
[8451504.670408972, 6304396.967864621],
[8474423.92717972, 6339689.5283625685],
[8500906.706977429, 6372393.037831903],
[8530662.858924756, 6402149.18977923],
[8563366.368394092, 6428631.969576939],
[8598658.928892039, 6451551.226347689],
[8636153.867740339, 6470655.851918136],
[8675440.382542651, 6485736.53201263],
[8716088.04202157, 6496628.039544221],
[8757651.501913773, 6503211.044877199],
[8799675.38425497, 6505413.423227553],
[8841699.266596166, 6503211.044877199],
[8883262.726488369, 6496628.039544221],
[8923910.385967286, 6485736.53201263],
[8963196.900769599, 6470655.851918136],
[9000691.8396179, 6451551.226347689],
[9035984.400115848, 6428631.96957694],
[9068687.909585183, 6402149.18977923],
[9098444.061532509, 6372393.037831904],
[9124926.841330219, 6339689.528362569],
[9147846.098100968, 6304396.967864622],
[9166950.723671414, 6266902.029016321],
[9182031.40376591, 6227615.514214008],
[9192922.9112975, 6186967.85473509],
[9199505.916630479, 6145404.394842887],
[9201708.294980831, 6103380.512501691]
]
]
});
var polygonGraphic = new Graphic({
geometry: polygon,
symbol: new SimpleFillSymbol({
color: new Color([192, 192, 192, 0.5]),
outline: new SimpleLineSymbol({
color: new Color([255, 0, 0, 1]),
style: "solid",
width: "2px"
}),
style: "solid"
})
});
view.graphics.add(polygonGraphic);
var polylineJson = polygon.toJSON();
polylineJson.paths = polylineJson.rings;
delete polylineJson.rings;
var polyline = Polyline.fromJSON(polylineJson);
var polylineGraphic = new Graphic({
geometry: polyline,
attributes: { OBJECTID: 1, LABELFIELD: "My Label Text" }
});
var layer = new FeatureLayer({
source: [polylineGraphic],
objectIdField: "OBJECTID",
fields: [
{
name: "OBJECTID",
type: "oid"
},
{
name: "LABELFIELD",
type: "string"
}
],
renderer: new SimpleRenderer({
symbol: new SimpleLineSymbol({
color: new Color([0, 0, 0, 0]),
style: "solid",
width: "2px"
})
}),
labelingInfo: [
{
labelExpressionInfo: { expression: "$feature.LABELFIELD" },
labelPlacement: "center-along",
repeatLabel: false,
symbol: new TextSymbol({
color: new Color([255, 255, 255, 1]),
font: new Font({
family: "Arial",
size: "12pt",
style: "normal",
weight: "bold"
}),
haloColor: new Color([0, 0, 0, 1]),
haloSize: 2
})
}
]
});
view.map.add(layer);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
02-20-2024
10:22 AM
|
1
|
1
|
181
|
|
POST
|
Perhaps simplifying the syntax of your definition expressions might help. For example: Amicaexp = oidField3 + " NOT IN(" + Amicaoids.join(",") + ")";
... View more
02-20-2024
09:21 AM
|
0
|
2
|
133
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 02-23-2023 03:25 PM | |
| 3 | 4 weeks ago | |
| 1 | 03-22-2024 05:35 PM | |
| 1 | a month ago | |
| 1 | 02-29-2024 09:53 AM |
Activity Feed
- Kudoed Re: ArcGIS Maps SDK for JavaScript 4.29 for Noah-Sager. yesterday
- Got a Kudo for Re: Web AppBuilder Search Widget Exact Match issues. Friday
- Posted Re: Change vertex symbol size in SketchViewModel on ArcGIS JavaScript Maps SDK Questions. a week ago
- Kudoed Re: 4.29 Breaking Change: MapView.goTo w/ rotation for UndralBatsukh. 3 weeks ago
- Posted 4.29 Breaking Change: MapView.goTo w/ rotation on ArcGIS JavaScript Maps SDK Questions. 4 weeks ago
- Kudoed Re: ElevationProfile widget in dark theme for AnneFitz. 4 weeks ago
- Kudoed Re: ArcGIS Maps SDK for JavaScript 4.29 for Noah-Sager. 4 weeks ago
- Got a Kudo for Re: ArcGIS Maps SDK for JavaScript 4.29. 4 weeks ago
- Got a Kudo for Re: ArcGIS Maps SDK for JavaScript 4.29. 4 weeks ago
- Got a Kudo for Re: ArcGIS Maps SDK for JavaScript 4.29. 4 weeks ago
- Posted Re: ArcGIS Maps SDK for JavaScript 4.29 on ArcGIS JavaScript Maps SDK Blog. 4 weeks ago
- Kudoed Re: 4.28 Sketch Tool - View click events not working in draw mode for JoseBanuelos. 4 weeks ago
- Posted Re: SimpleMarkerSymbol using meters on ArcGIS JavaScript Maps SDK Questions. a month ago
- Got a Kudo for Re: Updating WMTS TIME or other parameters using TimeSlider. a month ago
- Got a Kudo for Re: ArcGIS Maps SDK for JavaScript 4.29. a month ago
- Posted Re: ArcGIS Maps SDK for JavaScript 4.29 on ArcGIS JavaScript Maps SDK Blog. a month ago
- Posted Re: Updating WMTS TIME or other parameters using TimeSlider on ArcGIS JavaScript Maps SDK Questions. 03-22-2024 05:35 PM
- Posted Re: Unable to plot a polygon on Map using user's input. on ArcGIS JavaScript Maps SDK Questions. 03-20-2024 10:41 AM
- Posted Re: Editor widget: instead of names ids appear on multiple feature selection on ArcGIS JavaScript Maps SDK Questions. 03-20-2024 10:09 AM
- Posted Re: goTo, zoom out a bit on ArcGIS JavaScript Maps SDK Questions. 03-19-2024 11:01 AM