Latest Contributions by GregoryBologna

‎09-13-2022

I have two different views of the map. One view is specific to a data point that a user has searched; it shows all pertinent ArcGIS data for the point. The other view is a full screen map that is launched on a button click event from a different page. Basically a "map" button. With this view, the user can zoom +/- and pan and click where they want, see popup info, or go to the detailed version of the page. The window.location.replace happens when the user exits this map view and needs to go back to the search page. You can see it live here. https://www.manateepao.gov/search

‎09-09-2022

I'm getting an error in the API that I cannot debug. I am using https://js.arcgis.com/4.24 The error below happens after calling window.location.replace( **to some page** ). It looks like the API is trying to make a request to our GIS server to do an export. Error to console happens 2 seconds after window.location.replace. [esri.views.2d.layers.MapImageLayerView2D] l {name: 'mapimagelayer:image-fetch-error', details: {…}, message: 'Unable to load image: https://gis.manateepao…/services/Website/WebLayers/MapServer/export'} Loaded scripts (VSCode)

‎09-01-2022

Thanks for the example. Works perfect.

‎08-30-2022

I have a calcite-pick-list with a calciteListChange event listener. This is working fine except when I reset the calcite-pick-list-item(s) to have them all selected. I do not want the change event to fire. I tried adding a removeEventListener before selecting the items and then returning the calciteListChange event listener but this didn't help. Creating the calcite-pick-list let taxparcelTypes = document.createElement('calcite-pick-list'); taxparcelTypes.setAttribute('id', 'pao-taxparceltypes-pick-list'); taxparcelTypes.setAttribute('multiple', ''); taxparcelTypes.setAttribute('heading-level', '1'); taxparcelTypes.addEventListener( 'calciteListChange', handleTaxParcelTypesChange ); Reset calcite-pick-list and select all items let el = document.getElementById('pao-taxparceltypes-pick-list'); if (el) { // remove to prevent changed event which causes query to execute el.removeEventListener('calciteListChange', handleTaxParcelTypesChange); Object.keys(el.children).forEach((key) => { if (el.children[key].nodeName.toLowerCase() === 'calcite-pick-list-item') { el.children[key].selected = true; } }); // add back changed event //el.addEventListener('calciteListChange', handleTaxParcelTypesChange); My calcite-pick-list with two items unselected that will be selected in code fragment above. The attached Event Listeners

‎08-24-2022

Thanks, Kitty. I had a notion this was the case.

‎08-18-2022

If I change 'active' to 'open' for this deprecated property, selectedItems is empty. https://developers.arcgis.com/calcite-design-system/components/dropdown/ Creating dynamic dropdown let opt_item = document.createElement('calcite-dropdown-item'); opt_item.setAttribute('id', 'pao-unit-feet'); opt_item.setAttribute('active', ''); opt_item.setAttribute('data-unit-abrv', 'ft'); opt_item.innerHTML = 'Feet'; grp.appendChild(opt_item); OK Use opt_item.setAttribute('active', ''); Change to opt_item.setAttribute('open', '');

‎06-24-2022

I am porting a calcite JS page to Wordpress. Adding calcite reference in PHP throws error wp_enqueue_style( 'esri-calcite', 'https://js.arcgis.com/calcite-components/1.0.0-beta.81/calcite.css' , false, null, 'all'); wp_enqueue_script('esri-calcite', 'https://js.arcgis.com/calcite-components/1.0.0-beta.81/calcite.esm.js', false, null, true); Uncaught SyntaxError SyntaxError: Cannot use import statement outside a module at (program) (https://js.arcgis.com/calcite-components/1.0.0-beta.81/calcite.esm.js:6:1) arg0:SyntaxError: Cannot use import statement outside a module {stack: 'SyntaxError: Cannot use import statement outside a module', message: 'Cannot use import statement outside a module'} No debugger available, can not send 'variables' (program) @ js.arcgis.com/calcite-components/1.0.0-beta.81/calcite.esm.js:6

‎06-21-2022

Great. I will let you know when it’s up. Meanwhile, I’ll accept your answer here.

‎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

Online Status	Offline
Date Last Visited	2 weeks ago

My Ideas

Latest Contributions by GregoryBologna

Re: MapImageLayerView2D image-fetch-error on window location replace

MapImageLayerView2D image-fetch-error on window location replace

Re: Select all calcite-pick-list-item(s) without a calciteListChange event

Select all calcite-pick-list-item(s) without a calciteListChange event

Re: calcite-dropdown-item deprecated 'active' property

calcite-dropdown-item deprecated 'active' property

Cannot use import statement outside a module

Re: How to update calcite-stepper-content

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: 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

List does not have an event for when any of the ca...