Latest Contributions by GregoryBologna

Ok. It's working now. I think my second try was still in the wrong place. Thanks.  Do I need the time out? bufferLayer.graphics.on("after-add", (event) => { console.log(event); }); //setTimeout(() => { bufferLayer.graphics.on("after-remove", (event) => { console.log(event); }); //}, 2000);   ... View more

Thanks. I'm doing buffering and adding \ removing graphics from a GraphicsLayer as the buffer increases or decreases. The view.graphics.on in the sample fires dozens of times regardless of any buffer graphics, so that's not going to work. Also, I'm not facing any issues with my buffer. I just wanted to capture the remove event.   ... View more

Sorry, I should have made it clear that the after-remove fragment in my post is not in context. I did place the after-remove event before line 14.   ... View more

That's great! Thank you. ... View more

Hi. Thank you for helping me. You can see it in action here or try it at the URL below. Also, I added the code below. Basically, the pick list item uses a very acceptible check icon. I could change the calcite-list-item icon in Chrome devtools, but I cannot find where to override it in code. It sounds like I may need to just go back to using the pick list until calcite-list supports more icons.  https://www.manateepao.gov/parcel/?display=fullaerial&referer=search /*** * Checkable list of tax parcel types to filter buffer results. */ function buildTaxParcelTypesComponent() { return new Promise((resolve) => { getTaxParcelTypes() .then((result) => { let block = document.createElement('calcite-block'); block.setAttribute('id', 'pao-taxparceltypes-block'); block.setAttribute('heading', 'Filter by tax parcel type'); block.setAttribute('collapsible', ''); block.setAttribute('hidden', ''); block.setAttribute('description', 'Click to open'); // default is closed block.addEventListener('calciteBlockToggle', (event) => { setBlockDescription( event.target.id, event.target?.open, 'Click to open' ); }); let slot = document.createElement('calcite-icon'); slot.setAttribute('scale', 's'); slot.setAttribute('slot', 'icon'); slot.setAttribute('icon', 'filter'); block.appendChild(slot); let list = document.createElement('calcite-list'); let taxparcelTypes = document.createElement('calcite-list'); taxparcelTypes.setAttribute('id', 'pao-taxparceltypes-list'); taxparcelTypes.setAttribute('selection-mode', 'multiple'); taxparcelTypes.setAttribute('selection-appearance', 'icon'); taxparcelTypes.setAttribute('scale', 's'); taxparcelTypes.setAttribute('heading-level', '1'); // Skip event if resetting. taxparcelTypes.addEventListener('click', (event) => { if (!bufferWasReset) handleTaxParcelTypesChange(event); }); Object.keys(result.features).forEach((key) => { let tp = result.features[key].attributes['TAXPARCELTYPE']; let item = document.createElement('calcite-list-item'); item.setAttribute('overlay-positioning', 'absolute'); item.setAttribute('selected', ''); item.setAttribute('label', tp); item.setAttribute('value', tp); let action = document.createElement('calcite-action'); action.setAttribute( 'id', `${tp.replace(/ /g, '-').toLowerCase() + '-action'}` ); action.setAttribute('slot', 'actions-start'); action.setAttribute('appearance','transparent'); let span = document.createElement('span'); span.style.width = '16px'; span.innerHTML = ' '; // color will not render without hard space action.appendChild(span); item.appendChild(action); taxparcelTypes.appendChild(item); list.appendChild(taxparcelTypes); }); // Default Tax Parcel Types if (taxParcelTypesDefaultString === '') { let taxParcelTypesArray = []; let children = Array.from(list.children[0].children); children.forEach((item) => { taxParcelTypesArray.push(item.value); }); // Use qualitative colors. // fifo let ramp = { [0]: { rgb: '63,0,125' }, [1]: { rgb: '251,154,153' }, [2]: { rgb: '153,52,4' }, [3]: { rgb: '31,120,180' }, [4]: { rgb: '26,26,26' }, [5]: { rgb: '227,26,28' }, [6]: { rgb: '10,247,199' }, [7]: { rgb: '166,206,227' }, [8]: { rgb: '202,178,214' }, [9]: { rgb: '106,61,154' }, [10]: { rgb: '255,255,153' }, [11]: { rgb: '177,89,40' }, [12]: { rgb: '231,225,239' }, [13]: { rgb: '201,148,199' }, [14]: { rgb: '221,28,119' }, [15]: { rgb: '241,238,246' }, }; // Create array of tax type colors if (taxParcelTypesArray?.length > 0) { let s = taxParcelTypesArray.map((v) => `'${v}'`); taxParcelTypesDefaultString = s.join(','); taxParcelTypesSelectedString = taxParcelTypesDefaultString; taxParcelTypeColors = taxParcelTypesArray.reduce( (acc, cur, idx) => { if (idx > Object.keys(ramp).length) idx--; let obj = {}; obj[cur] = `rgba(${ramp[idx].rgb},0.4)`; acc.push(obj); return acc; }, [] ); } // Assign style to tax parcel type list item. children.forEach((item) => { item.childNodes.forEach((ch) => { if (ch.nodeName.toLowerCase() === 'calcite-action') { let id = `${ item.value.replace(/ /g, '-').toLowerCase() + '-action' }`; if (ch.id === id) { ch.childNodes.forEach((n) => { if (n.nodeName === 'SPAN') { let rgb = taxParcelTypeColors.filter((obj) => { if (obj) if (Object.keys(obj)[0] === item.value) return obj[item.value]; }); if (rgb && rgb.length > 0) n.style.backgroundColor = rgb[0][item.value]; n.style.borderRadius = '50%'; } }); } } }); }); } block.appendChild(list); let panel = document.getElementById('pao-buffer-container'); if (panel) panel.appendChild(block); resolve(true); }) .catch((error) => {doLogException('buildTaxParcelTypesComponent->getTaxParcelTypes', error);}); }); } // end /** * Query ArcGIS for tax parcel types. * @returns */ function getTaxParcelTypes() { return new Promise((resolve) => { let queryObject = new Query({ outSpatialReference: view.spatialReference, returnGeometry: false, returnIdsOnly: false, returnCountOnly: false, returnZ: false, returnM: false, returnDistinctValues: true, returnExtentOnly: false, orderByFields: ['TAXPARCELTYPE'], outFields: ['TAXPARCELTYPE'], where: '1=1', // where is required. }); query .executeQueryJSON(parcelSearchUrl, queryObject) .then((result) => { resolve(result); }) ['catch']((error) => { doLogException('getTaxParcelTypes', error); }); }); } // end   I am adding a custom action to get the color bullets.    ... View more

I probably could reach it with the code below, but I'm not exactly sure where in the action icon is the shadowRoot to change.       await customElements.whenDefined('calcite-list-item');       await delay(300);       let node = document.querySelector(`#some-list-here`);       if (node) {         let el = node.shadowRoot.querySelectorAll('calcite-list-item');         if (el) {           el.forEach((item) => {            I'm not sure where the icon is in the shadowRoot             // item.style.setProperty('icon', 'check');           });         }       }   From the website sample app. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <script type="module" src=https://js.arcgis.com/calcite-components/1.0.7/calcite.esm.js></script> <link rel="stylesheet" type="text/css" href=https://js.arcgis.com/calcite-components/1.0.7/calcite.css /> </head> <body> <calcite-list selection-mode="multiple"> <calcite-list-item label="Hiking trails" value="hiking-trails"> <calcite-action slot="actions-start" icon="layer" text="Trails layer"></calcite-action> </calcite-list-item> <calcite-list-item label="Waterfalls" value="waterfalls"> <calcite-action slot="actions-start" icon="layer" text="Waterfalls layer"></calcite-action> </calcite-list-item> <calcite-list-item label="Rivers" value="rivers"> <calcite-action slot="actions-start" icon="layer" text="Rivers layer"></calcite-action> </calcite-list-item> </calcite-list> </body> </html>     ... View more

I was at first worried the mouse and keyboard would still zoom with constraints, but now I am using it and it works just right. Thanks. ... View more

Thanks! I can check the size of the sketch, but not sure how to block drawing without destroying the sketch. I found this in community, but I'm not seeing a 'move'. There is a 'cursor-update'.    no 'move' if (event.toolEventInfo && event.toolEventInfo.type.includes("move")){ sketchViewModel.cancel(); }‍‍‍ if(event.state === 'active') { // console.log(`H ${event.graphic.geometry.extent.height} x W ${event.graphic.geometry.extent.width}`); if(event.graphic.geometry.extent.width > 200) { if (event.toolEventInfo && event.toolEventInfo.type.includes('cursor-update')) { // cancel() completely destroying the sketch. // how to just stop drawing the width without killing sketch? sketchViewModel.cancel(); } } }           ... View more