Latest Contributions by GregoryBologna

‎06-17-2022

Hi Ben. This is pretty much the same code I have in my app. It is working in the pen, but not in the app. See the screenshots. The calcite-stepper-content is not updating in my app like it does in the pen. https://codepen.io/capegreg/pen/vYdMYwv?editors=1010

‎06-17-2022

I am setting the content on demand, but the content in calcite-stepper-content appears to update and then immediately becomes empty. <div class="calcite-stepper-content"></div> function goToBufferStep(event) { let stepper = document.getElementById('pao-stepper'); if (stepper) { let target = event.currentTarget; let i = target.getAttribute('data-step'); let content = document.querySelector('.calcite-stepper-content'); if (content) { stepper.goToStep(i); stepper.nextStep() .then( updateCalciteStepperContent(`step-${i}`) ); } } } updateCalciteStepperContent function ... let content = document.querySelector('.calcite-stepper-content'); if (content) content.innerHTML = 'blah';

‎06-08-2022

Given this hydrated calcite slider, how can I change the attributes--and specifically, the ticks without rebuilding the slider from scratch? When I change its attributes, the ticks do not re-hydrate the control. Is there a method to refresh after its attributes are changed? (see code fragment below). <calcite-slider id="pao-buffer-slider" label-handles label-ticks max="500" min-label="0" page-step="10" step="1" ticks="100" value="0" listener="true" min="0" calcite-hydrated=""> <div class="track"> <div class="track__range" style="left: 0%; right: 99%;"/> <div class="ticks"> <span class="tick tick--active" style="left: 0%;"> <span class="tick__label tick__label--min">0</span> </span> <span class="tick" style="left: 50%;"> <span class="tick__label">100</span> </span> <span class="tick" style="left: 100%;"> <span class="tick__label tick__label--max">200</span> </span> <span class="tick" style="left: 100%;"> <span class="tick__label">300</span> </span> <span class="tick" style="left: 100%;"> <span class="tick__label">400</span> </span> <span class="tick" style="left: 100%;"> <span class="tick__label">500</span> </span> </div> </div> // code fragment to change slider units of measure let slider = document.getElementById('pao-buffer-slider'); if(slider) { // tried this...but ticks do not get re-hydrated let obj = new PaoSliderUnits(...SliderUnitsFeet); slider.labelHandles = obj.labelHandles; slider.labelTicks = obj.labelTicks; slider.max = obj.max; slider.minLabel = obj.minLabel; slider.pageStep = obj.pageStep; slider.step = obj.step; slider.ticks = obj.ticks; slider.value = obj.value; // and this...same results as above if (obj.labelHandles) slider.setAttribute('label-handles', ''); if (obj.labelTicks) slider.setAttribute('label-ticks', ''); slider.setAttribute('max', obj.max); slider.setAttribute('min-label', obj.minLabel); slider.setAttribute('page-step', obj.pageStep); slider.setAttribute('step', obj.step); slider.setAttribute('ticks', obj.ticks); slider.setAttribute('value', obj.value); } // various units of measure const SliderUnitsFeet = [true, true, '500', '0', '25', '0.5', '50', '0'] etc. SliderUnitsMeters, SliderUnitsKilometers, SliderUnitsMile class PaoSliderUnits { constructor(labelHandles, labelTicks, max, minLabel, pageStep, step, ticks, value) { this.labelHandles = labelHandles; this.labelTicks = labelTicks; this.max = max; this.minLabel = minLabel; this.pageStep = pageStep; this.step = step; this.ticks = ticks; this.value = value; } }

‎06-06-2022

I included the module but missed adding it to the when. It is working. Thank you, Andy. reactiveUtils.when( () => item.layer.visible === false, () => { layerListFormat(item) } ); reactiveUtils.when( () => item.layer.visible === true, () => { layerListFormat(item) } );

‎06-06-2022

I'm getting Uncaught ReferenceError ReferenceError: when is not defined // watchUtils.whenFalse(item.layer, "visible", function (newVal) { // layerListFormat(item); // }); // watchUtils.whenTrue(item, "visible", function (newVal) { // layerListFormat(item); // removed // }); when(() => item.layer.visible === true, () => layerListFormat(item)); when(() => item.layer.visible === false, () => layerListFormat(item));

‎06-02-2022

I am using 4.23. How would watchUtils whenFalse and whenTrue be converted to reactiveUtils? watchUtils.whenFalse(item.layer, "visible", function (newVal) { // do stuff }); watchUtils.whenTrue(item, "visible", function (newVal) { // do stuff });

‎05-31-2022

I'm confused. I thought dojo is now obsolete in 4x? Why is this solution using it? https://community.esri.com/t5/arcgis-api-for-javascript-questions/upgradation-of-3-x-widgets-built-using-dojo-to/m-p/1124345/highlight/true#M75537

‎05-20-2022

Robert. I believe this was working for me last year when you helped me, but now it results in this error. What do you think? The service is public if you want to try. https://gis.manateepao.com/arcgis/rest/services/Utilities/Geometry/GeometryServer/buffer

‎05-17-2022

I first applied what you showed me to the print widget and a few other widgets and it all worked great, but I was still having trouble with the layerList. let print = new Print({ view: view, printServiceUrl: printServiceUrl, container: 'print-block' }); It was not until your next reply that I realized the issue was due to the layerList loading before the container I put it in was available (I create the calcite-blocks in code behind when an action bar item is clicked. I moved the layerList to the click event of the action bar item where it then loads and works great. Thank you!

‎05-16-2022

I don't have a layerList container because I'm building the layerList with listItemCreatedFunction. let layerList = new LayerList({ view: view, listItemCreatedFunction: function listItemCreatedFunction(event) { var item = event.item; yields In html <calcite-action-bar slot="action-bar"> <calcite-action data-action-id="aerials" text="aerials"></calcite-action> </calcite-action-bar> <calcite-panel heading="aerials" height-scale="l" data-panel-id="aerials"> <div id="aerials-container"></div> </calcite-panel> I'm stuck getting the layerList added to the div. let ac = document.getElementById('aerials-container'); //ac.appendChild(layerList);

‎05-15-2022

I am trying to relocate a layerList added to an expand widget to a Calcite action bar, but I think that I'm going about it wrong. I am iterating my loaded layerList and building a calcite radio button group that is then added to the action bar. Is this the correct approach? Seems like there's a faster way. Here's a code excerpt of my layerList. var layerListExpand = new Expand({ content: (layerList = new LayerList({ view: view, listItemCreatedFunction: function listItemCreatedFunction(event) { var item = event.item; var key = item.title.toUpperCase().replace(/ /g, ''); if (item.layer.type === 'group' || item.layer.type === 'tile') { if (key === 'AERIALS') { watchUtils.whenFalse(item.layer, 'visible', function (newVal) { layerListFormat(item); }); watchUtils.whenTrue(item, 'visible', function (newVal) { layerListFormat(item); }); } } }, })), view: view, autoCollapse: true, expanded: false, expandTooltip: 'Map Layers', group: 'top-right', mode: 'floating', }); Build radio button group from loaded layerList item.layer.layers.forEach(function (item) { if (item.type === 'imagery-tile') { let block = document.createElement('calcite-block'); block.setAttribute('heading', item.title); block.setAttribute('collapsible', ''); let notice = document.createElement('calcite-notice'); notice.setAttribute('active', ''); let div = document.createElement('div'); div.setAttribute('slot', 'message'); let rbg = document.createElement('calcite-radio-button-group'); rbg.setAttribute('name', 'basic-group'); rbg.setAttribute('layout', 'vertical'); let label = document.createElement('calcite-label'); rbg.setAttribute('layout', 'inline'); rbg.innerHTML = item.title; let rb = document.createElement('calcite-radio-button'); label.appendChild(rb); rbg.appendChild(label); document.querySelector(`[data-panel-id=layers-container]`).appendChild(rbg); } });

‎04-22-2022

Rene. I removed the check for active and added event.graphic.geometry as shown in your answer. I also don't need to capture the screenPoint anymore. Works great. Thanks. params.geometry = event.graphic.geometry;

‎04-21-2022

Thank you, Rene. I’ll give that a try. This has been working for awhile in 4.17, and it will work in 4.23, but the sketchViewModel state is not always returning active. Must be like you say. Do you think 4.23 requires a different buffer handling than 4.17?

‎04-21-2022

Since upgrading JS API from 4.17 to 4.23, geometry buffer query is not working well or not working at all. I have two jsitor bins provided below. The first bin was created on 11/17/2020; the bin second was created on 4/19/2022. (Any deprecated objects in version 4.23 were updated). The code is pretty much the same for both, with the exception for line 685 in 4.23 which I need to add in order to prevent a "Missing 'geometry' for identify operation." exception. I think the view on click event is not triggered as quickly as in 4.17, and when the event is triggered, the sketchViewModel.state is "completed" but rarely "active". view.on("click", function (event) { if (sketchViewModel.state === "active") Click the widget in the top right (envelope icon). Click the point icon in the now opened buffer tools panel. Click anywhere on the map. In 4.17, the area will be selected immediately, while in 4.23, nothing! buffer working in esri 4.17 https://jsitor.com/QSx-HVA_s buffer not working in esri 4.23 https://jsitor.com/VXMCiFcYr

‎04-20-2022

Why does variable string query outFields fail for FeatureLayer? Example: var queryFields = "FIELD1,FIELD2"; const query = mapLayerView.createQuery(); query.outFields = [queryFields]; This works! const queryFeatureLayer = new FeatureLayer({ url: url, outFields: ["FIELD1", "FIELD2"] // outFields: [queryFields] This will return error below }); Error esri.layers.support.fieldProperties] field-attributes-layer:invalid-field Invalid field FIELD1,FIELD2 found in outFields {layer: v, outFields: Array(1)}

Online Status	Offline
Date Last Visited	‎12-12-2025 08:09 AM

My Ideas

Latest Contributions by GregoryBologna

Re: How to update calcite-stepper-content

How to update calcite-stepper-content

Change calcite slider attributes at runtime without rebuilding

Re: How to convert watchUtils whenFalse whenTrue to reactiveUtils

Re: How to convert watchUtils whenFalse whenTrue to reactiveUtils

How to convert watchUtils whenFalse whenTrue to reactiveUtils

Re: Multiple Layerlists and Label Visibility JS API 4.xx

Re: How to execute query using Utilities Geometry (GeometryServer) tool

Re: How to generate a calcite radio button group from a view layerList

Re: How to generate a calcite radio button group from a view layerList

How to generate a calcite radio button group from a view layerList

Re: Buffer not working as expected since upgrading to JS 4.23

Re: Buffer not working as expected since upgrading to JS 4.23

Buffer not working as expected since upgrading to JS 4.23

Variable string query outFields vs hard-coding

Re: Layerlist selected item becomes visible watch

Re: Video card Support for WEBGL2

Re: How do I remove the zoom-to action from the de...

Re: How do I remove the zoom-to action from the de...

Re: Restore zooming after manual disable