Latest Contributions by GregoryBologna

I have a user reporting the same issue starting the week of March 4, 2024. I have not been able to reproduce in-house, and I have reached out to the user for troubleshooting with the link below. https://help.lexialearning.com/s/article/How-to-Turn-on-Web-GL-in-Your-Browser-20516 ... View more

getItemAt is no longer an issue. ... View more

Check the node list. It should be there. If you're using VSCode, you can add view.popup.viewModel to watch window.   If you mean the popup title, you can just find the esri style in Chrome developer tools inspector and override their CSS, or depending on how you're building the popup template, add display:none to the title style. See for more info. https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html     ... View more

In your JavaScript block or file where you are setting up your MapView popup properties. One way is to create an object literal with popup properties and assign the object to the MapView popup property. Add a watch to monitor mapview zoom events. Take a look at the code fragment where I set includeDefaultActions and other properties.   // popup defaults let default_popup = { viewModel: { actions: { zoom: false, }, actionsMenuEnabled: false, // actions within the popup should display in a menu item includeDefaultActions: false, // Indicates whether or not to include defaultActions in the Popup's UI. }, // Works better without dock enabled. dockEnabled: false, dockOptions: { // Disables the dock button from the popup. buttonEnabled: false, // Ignore default sizes that trigger responsive docking. breakpoint: false, // or...Dock the popup when the size of the view is less than or equal to breakpoint pixels. // breakpoint: { // width: 352, // height: 522 // }, //position: 'top-left' // default is auto. }, // Shows pagination for the popup if available. // This allows the user to scroll through various // selected features using either arrows visibleElements: { featureNavigation: true, closeButton: true, }, // autoCloseEnabled: true, // DEPRECATED Replacement: view.popupEnabled // autoOpenEnabled: false, // use when needing to stop the click event propagation // https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#popupEnabled // popupEnabled: false // view's default popup is loaded on demand when true }; // 2D map instance let view = new MapView({ map: map, container: 'myMapViewer', center: [lon, lat], zoom: 12, navigation: { // allow it on mobile momentumEnabled: true, mouseWheelZoomEnabled: true, browserTouchPanEnabled: true, }, padding: padding, constraints: { maxScale: 0, minScale: 300000, // When true, the view snaps to the next LOD when zooming in or out. // When false, the zoom is continuous. This does not apply when // zooming in/out using two finger pinch in/out. // snapToZoom: false }, popup: default_popup, }); /** * Called when mapview is loaded. */ view.when(() => { // do something after map loaded afterMaploaded(); }) .catch((error) => { // report error if browser doesn't support webgl. let tf = error.name.includes("webgl"); doLogException('view.when', error, tf); }); /** * Execute processes that may only run after the map has loaded. */ const afterMaploaded = async () => { handleViewWatches(); // ... }; /** * Watch mapview events */ function handleViewWatches() { // Watch view. reactiveUtils.watch( () => [ view?.updating, view?.stationary, view?.navigating, view?.interacting, view?.zoom, ], ([updating, stationary, navigating, interacting, zoom]) => { console.log(`updating: ${updating}`); console.log(`zoom: ${view.zoom}`); console.log(`scale: ${view.scale}`); console.log(`extent.height: ${view.extent.height}`); console.log(`extent.width: ${view.extent.width}`); console.log(`--------------------`); } ); }     ... View more

Thanks. Sounds good. I did try on Safari mobile and Firefox win10 (barely get Firefox to load, thinking no longer supporting it, so bad) https://developers.arcgis.com/javascript/latest/sample-code/popup-actions  no vertical scroll either.     ... View more

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