Latest Contributions by ShannonDeArmond

‎11-22-2024

I have a web app built in JS 4 API that utilizes a the ElevationProfile widget and loads a webmap from my portal. This was working fine up until 4.21. With the current release (4.31), the Elevation Profile widget seems unable to find the ground elevation as I have it defined. (Some experimentation shows me that this breaks at 4.22.) Curiously, the same methodology to define ground surface in the map works if I create the map in my view directly in the webapp or if I load a webmap from AGOL, but not from my own portal. I am uncertain if I need to change my code or if additional portal configuration became necessary at 4.22 to utilize this widget. Any help would be greatly appreciated. Because my portal is private, it is difficult to recreate the problem entirely, though I have created a codepen here to show the code as I have it written.

‎03-21-2024

Hi @cadgism . Hmm... I'm not sure how to do that. The way this code is written it's appending the new menu item to an existing list so it will default to the last position. Because this topic is marked complete, though, I'm not sure many other people will see your question. Perhaps try posting as a new topic to get some attention? Good luck!

‎02-08-2024

That's exactly what I needed @Mac_And_Cheese . Thanks to you both for the assist!

‎02-08-2024

Thanks @omar-marji . That gets me most of the way there. The action-bar slot, though, anchors the tools to the edge of the window though instead of floating them on top of the map with a little bit of a buffer around it. (See screen shot.) In my full app, I already have a large action bar on the left side of the screen full of common tools. These 4 tools in the action bar I'm trying to highlight for the user as the most important. Seems like this is exactly what the action pad should do. I just can't get it to do it without trading the unsightly big grey space to the right of it versus just making it an action bar instead of an action pad.

‎02-07-2024

I have a calcite action pad that I would like to have a vertical alignment and be floating at the upper right side of the page. I am getting an unfortunate extra block of space along with the action pad, or the shell panel I have it nested in. Anyone know what I need to do to get rid of this? I tried playing with the expanded-max-width setting to no avail. Here is a codepen that illustrates the problem: https://codepen.io/sdearmondmaps/pen/gOEjNZw

‎01-17-2024

That worked and makes much more sense. Thanks very much @Justin_Greco and @JeffreyThompson2 . I appreciate the help.

‎01-17-2024

Unfortunately not, Justin_Greco, but thanks for trying. There are items selected in both screen shots. The addition of the new menu item seems to remove the zoom-to-selected functionality.

‎01-14-2024

I have a web app built with the arcgis js 4 api that uses the featuretable widget. I would like to enable some of the stock menu items on the feature table such as zoom to selected features. This works fine until I try to add additional custom items to the menu. Then the options related to selected features in the table (zoom to selection, show selection, clear selection, etc.) are no longer available. Does anyone know how to add a custom menu item and keep this functionality? // Create the feature table const featureTable = new FeatureTable({ view: view, layer: featureLayer, visibleElements: { menu: true, // Autocast to VisibleElements menuItems: { clearSelection: true, refreshData: true, toggleColumns: true, selectedRecordsShowAllToggle: true, selectedRecordsShowSelectedToggle: true, zoomToSelection: true } }, container: "tableDiv" }); //Adds custom menu options to featuretable featureTable.when().then(() => { const buttonMenuItem1 = new ButtonMenuItem ({ label: "Download Table", clickFunction: function (event) { setupCSV(); } }); const buttonMenu = new ButtonMenu ({ iconClass: "esri-icon-handle-horizontal", items: [] }); featureTable.menu.items.forEach(element => { console.log(element.label); buttonMenu.items.push(element); }); buttonMenu.items.push(buttonMenuItem1); featureTable.menuConfig = buttonMenu; });

‎09-14-2023

Figured this out. I was nesting the shell panels incorrectly. If it helps anyone in the future, this worked: <calcite-shell content-behind hidden> <h2 id="header-title" slot="header">Title</h2> <calcite-shell-panel slot="panel-end" display-mode="float" width-scale="s">  <calcite-action-pad layout="horizontal" expand-disabled="true" position="end"> <calcite-action id="Add Data" text="Add Data" icon="upload"></calcite-action>  </calcite-action-pad> </calcite-shell-panel> <calcite-shell-panel slot="panel-start" display-mode="float">  <calcite-action-bar slot="action-bar"> <calcite-action data-action-id="layers" icon="layers" text="Layers"></calcite-action>  </calcite-action-bar> </calcite-shell-panel>

‎09-11-2023

I have a simple app with a calcite action bar on the left edge of the screen and I would like an action pad on the right. Can anyone advise me how to tweak my code below to nudge the action pad to the upper right? <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> Test Site </title> <link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css"/> <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.4.3/calcite.css" /> <script src="https://js.arcgis.com/4.27/"></script> <script src="https://js.arcgis.com/calcite-components/1.4.3/calcite.esm.js" type="module"></script> <script src="js/main.js"></script> </head> <body>  <calcite-shell content-behind hidden> <h2 id="header-title" slot="header">Title</h2> <calcite-shell-panel slot="panel-start" display-mode="float">  <calcite-action-pad layout="horizontal" expand-disabled="true" position="end"> <calcite-action-group> <calcite-action text="Add" icon="plus"></calcite-action> <calcite-action text="Save" icon="save"></calcite-action> </calcite-action-group> <calcite-action-group> <calcite-action text="Layers" icon="layers"></calcite-action> <calcite-action text="Basemaps" icon="layer-basemap"></calcite-action> </calcite-action-group> </calcite-action-pad>  <calcite-action-bar slot="action-bar"> <calcite-action data-action-id="layers" icon="layers" text="Layers"></calcite-action> <calcite-action data-action-id="basemaps" icon="basemap" text="Basemaps"></calcite-action> <calcite-action data-action-id="legend" icon="legend" text="Legend"></calcite-action> <calcite-action data-action-id="bookmarks" icon="bookmark" text="Bookmarks"></calcite-action> <calcite-action data-action-id="measure" icon="measure" text="Measure"></calcite-action> <calcite-action data-action-id="sketch" icon="freehand" text="Sketch"></calcite-action> <calcite-action data-action-id="print" icon="print" text="Print"></calcite-action> </calcite-action-bar>  <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden> <div id="basemaps-container"></div> </calcite-panel> <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden> <div id="legend-container"></div> </calcite-panel> <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden> <div id="layers-container"></div> </calcite-panel> <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden> <div id="bookmarks-container"></div> </calcite-panel> <calcite-panel heading="Sketch" height-scale="l" data-panel-id="sketch" hidden> <div id="sketch-container"></div> </calcite-panel> <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden> <div id="print-container"></div> </calcite-panel> </calcite-shell-panel> <div id="viewDiv"></div> </div> </calcite-shell> </body> </html>

‎09-22-2020

When using Collector with a high-accuracy GPS unit, I would appreciate being able to get the same accuracy fields when averaging locations as when not. Values such a PDOP and number of satellites could be averaged. Fix type is still useful information, even if only the first value collected. I am often required to provide this metadata to clients and we are forced to turn averaging off in order to comply. even though I feel we get better data with it on.

‎09-16-2020

Thank you Robert! You put me on the right track. I also had to remove the selection-change trigger from my LoadKML function and that did the trick. //This function will use a url stored in the attribute to load a kml into the map function loadKML() { console.log("Entered loadKMLs function"); //map.infoWindow.on("selection-change", function() { var selectedFeature = map.infoWindow.getSelectedFeature(); if (selectedFeature && selectedFeature.attributes.kml_prev.includes("http")) { console.log(selectedFeature.attributes.kml_prev); var kmlUrl = selectedFeature.attributes.kml_prev; var kml = new KMLLayer(kmlUrl, { id: "la_" + kmlUrl.substring(kmlUrl.lastIndexOf('/') + 1) }); map.addLayer(kml); kml.on("load", function() { domStyle.set("loading", "display", "none"); }); } //}); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‎09-13-2020

I have created a simple widget for use in Web AppBuilder for Developers 2.15. The widget provides the user a list of layers to add to the map (currently containing one layer). The layer in question is a feature layer that contains urls to kml files provided in a field in the attribute table. What I am trying to accomplish is to have the user click on a feature and get a popup box describing the feature and also a button to load the kml into the map. The user can then click the button to load the KML into the map if desired. It's all working splendidly, except the kml is loading when the feature is selected rather than when Load KML button is clicked. Does anyone have a suggestion on how I might fix this? define([ 'dojo/_base/declare', 'jimu/BaseWidget', 'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-git1.min.js', 'jimu/WidgetManager', 'jimu/PanelManager', 'esri/map', 'esri/layers/ArcGISDynamicMapServiceLayer', 'esri/layers/KMLLayer', 'esri/dijit/Popup', 'esri/dijit/PopupTemplate', 'dojo/dom-construct', 'dojo/query', 'dojo/_base/array', 'dojo/dom', 'dojo/parser', 'dojo/ready', 'dojo/on' ], function( declare, BaseWidget, $, WidgetManager, PanelManager, map, ArcGISDynamicMapServiceLayer, KMLLayer, Popup, PopupTemplate, domConstruct, query, arrayUtils, dom, parser, ready, on ) { //To create a widget, you need to derive from BaseWidget. return declare([BaseWidget], { baseClass: 'jimu-widget-kmlloader', postCreate: function() { this.inherited(arguments); console.log('postCreate'); }, startup: function() { this.inherited(arguments); //establish the map object var map = this.map; //here's what happens if the 'load data' button is clicked $('.jimu-widget-use-jquery .dataloader').click(function(){ var lyrCnt = 0; var myLyrList = []; if (document.getElementById("chb_coastSurvs").checked == true) { lyrCnt++; myLyrList.push("coastSurvs"); } if (lyrCnt == 0) { alert("Please choose the layers you wish to add to the map."); } else { document.getElementById("btn_datadestroyer").disabled = false; document.getElementById("btn_dataloader").disabled = true; loadLAData(myLyrList); } }); //This functio loads the layers the user has selected function loadLAData(myLyrs) { if (myLyrs.includes("coastSurvs")) { console.log("Loading Coast Surveys"); var coastSurvsLyr = new ArcGISDynamicMapServiceLayer("https://data.myserver.com/arcgis/rest/services/base/NOAACoastalSurveys/MapServer", { visible: true, id: 'la_coastSurvs', }); //Here's a pop-up template for the index layer console.log("setting up popup templates"); //Set up button to load kml var kmlBtn = dojo.create("button", { "id": "kmlButton", "class": "action", "innerHTML": "Load KML", }, dojo.query(".actionList", map.infoWindow.domNode)[0]); //when the button is clicked register a function that will run on(kmlBtn, "click", loadKML()); var templateCoastSurv = new PopupTemplate({ title: "{surv_code}", description: "<p>Description: {surv_desc}</p>" + "<p>Date: {surv_date}</p>" + "<p>Scale: {surv_scale}</p>" + "<p><a href='{kml_prev}'>KML Preview</a></p>", fieldInfos: [ {fieldName: "surv_code", visible: true}, {fieldName: "surv_desc", visible: true}, {fieldName: "surv_date", visible: true, digitSeparator: false}, {fieldName: "surv_scale", visible: true, digitSeparator: true}, {fieldName: "kml_prev", visible: true} ] }); coastSurvsLyr.setInfoTemplates({ 0: {infoTemplate: templateCoastSurv}, }); map.addLayer(coastSurvsLyr); } } //This function will use a url stored in the attribute to load a kml into the map function loadKML() { console.log("Entered loadKMLs function"); map.infoWindow.on("selection-change", function() { var selectedFeature = map.infoWindow.getSelectedFeature(); if (selectedFeature && selectedFeature.attributes.kml_prev.includes("http")) { console.log(selectedFeature.attributes.kml_prev); var kmlUrl = selectedFeature.attributes.kml_prev; var kml = new KMLLayer(kmlUrl, { id: "la_" + kmlUrl.substring(kmlUrl.lastIndexOf('/') + 1) }); map.addLayer(kml); kml.on("load", function() { domStyle.set("loading", "display", "none"); }); } }); } //here's what happens if the 'clear data' button is clicked $('.jimu-widget-use-jquery .datadestroyer').click(function(){ //remove all temporary layers from the map lyrsToRemove = []; for (var lyrID of map.layerIds) { if (lyrID.includes("la_") == true) { console.log("remove " + lyrID); lyrsToRemove.push(lyrID); } } for (var lyrName of lyrsToRemove) { var myLyr = map.getLayer(lyrName); if (myLyr) { map.removeLayer(myLyr); } } //clean up the html elements document.getElementById("chb_coastSurvs").checked = false; document.getElementById("btn_datadestroyer").disabled = true; document.getElementById("btn_dataloader").disabled = false; }); } }); });

‎04-30-2019

Thank you for your help, Undral! That did the trick.

‎04-26-2019

I have a Living Atlas layer shared on my portal (not accessible outside my intranet sadly). The layer includes some pre-built raster functions. What I'm trying to do is load the layer into a webmap using the 3.28 ArcGIS JS API and apply a specific raster function to affect the appearance. Based on my reading here and here, it seems like this should be possible. The layer loads just fine but the raster function is not being applied. It's coming in as the default grey-scale stretch symbology and with no helpful errors in the console to help me along. Can anyone point me in the right direction? <!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>Raster Function Test</title> <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script src="https://js.arcgis.com/3.28/"></script> <script> require([ 'esri/map', 'esri/layers/ArcGISImageServiceLayer', 'esri/layers/ImageServiceParameters', 'esri/layers/RasterFunction', 'dojo/domReady!' ], function( Map, ArcGISImageServiceLayer, ImageServiceParameters, RasterFunction ) { var map = new Map("mapDiv", { basemap: "topo", center: [-122.45, 37.75], zoom: 13, }); var serviceRFT = new RasterFunction({ functionName: "Slope_Degrees_Map", variableName: "Raster" }); var params = new ImageServiceParameters(); params.noData = 0; var slopeImageLyr = new ArcGISImageServiceLayer("https://data.farwestern.com/portal/sharing/servers/a1ba14d09df14f42ad6ca3c4bcebf3b4/rest/services/WorldElevation/Terrain/ImageServer", { visible: true, id: 'la_slope', opacity: 0.7, renderingRule: serviceRFT, imageServiceParameters: params }); map.addLayer(slopeImageLyr); }); </script> </head> <body> <div id="mapDiv"></div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Online Status	Offline
Date Last Visited	‎10-31-2025 08:53 AM

My Ideas

Latest Contributions by ShannonDeArmond

Elevation Profile Not Working for Portal-Hosted WebMap after JS API 4.22

Re: Add Custom Item to FeatureTable Menu and Keep Original Functionality

Re: Right-aligned Floating Action Pad Has Unwanted Space

Re: Right-aligned Floating Action Pad Has Unwanted Space

Right-aligned Floating Action Pad Has Unwanted Space

Re: Add Custom Item to FeatureTable Menu and Keep Original Functionality

Re: Add Custom Item to FeatureTable Menu and Keep Original Functionality

Add Custom Item to FeatureTable Menu and Keep Original Functionality

Re: How to Align Calcite Action Pad to Right Side

How to Align Calcite Action Pad to Right Side

Collector Average PDOP

Re: Button in Popup Firing Before Click

Button in Popup Firing Before Click

Re: Using server-side renderer for image service

Using server-side renderer for image service

Right-aligned Floating Action Pad Has Unwanted Spa...

Collector Average PDOP

Re: Will the 2017 UC presentations be posted onlin...

Re: Change scale bar properties with Python

Re: WABD and Proxies?