Latest Contributions by GregoryBologna

I have swipeWidget global and call removeSwipeWidget anytime before adding swipe widget. const removeSwipeWidget = () => { try { if (swipeWidget) { view.ui.remove(swipeWidget); // destroy if object if (swipeWidget?.constructed) swipeWidget.destroy(); swipeWidget = null; } } catch (error) { console.log(error); } }   ... View more

I didn't even think about using at allLayers. Thank you.  Here's how it turned out. Works just right. // Watching for changes to the visible year layers in the Map reactiveUtils.watch( () => view.map.allLayers.filter((layer) => layer.visible), (newVisibleLayers, oldVisibleLayers) => { const added = newVisibleLayers.filter((layer) => !oldVisibleLayers.includes(layer)); const addedIndices = added.map((layer) => map.allLayers.findIndex((l) => l === layer)); // Destructure with a default value const [yearChosenIndex = null] = addedIndices; chosenPriorYearMapLayer = []; if (yearChosenIndex >= 0) chosenPriorYearMapLayer.push(yearChosenIndex); } );     ... View more

You can use esriRequest to get all the layers from capabilities meta. require([ "esri/request" ], function(esriRequest) { const capabilitiesUrl = "https://svc.someservice.com/Image/FBA1F622-5FF3-56B2-CBB2-777AD52F0EC9/wmts?request=GetCapabilities"; // Fetch the WMTS capabilities esriRequest(capabilitiesUrl, { responseType: "text" }) .then(function(response) { // Parse the XML response const parser = new DOMParser(); const xmlDoc = parser.parseFromString(response.data, "application/xml"); const layers = xmlDoc.getElementsByTagName("Layer"); // Loop through each layer and extract details for (let i = 0; i < layers.length; i++) { const identifier = layers[i].getElementsByTagName("ows:Identifier")[0]?.textContent || "N/A"; const title = layers[i].getElementsByTagName("ows:Title")[0]?.textContent || "N/A"; const abstractText = layers[i].getElementsByTagName("ows:Abstract")[0]?.textContent || "N/A"; console.log(`Layer Identifier: ${identifier}, Title: ${title}, Abstract: ${abstractText}`); } }) .catch(function(err) { console.error("Error fetching WMTS capabilities: ", err); }); });   ... View more

Did you find a solution for this? I have the same issue using 4.27 and Pictometry and WMTSLayer ... View more

Take a look at styleAccordionItem() and changeHeadingStyle() You can see it in action here. Click 2nd widget from bottom shown in screenshot. https://www.manateepao.gov/parcel/?parid=1014100000     /** * Create the calcite accordian * @returns */ function buildAccordionContainer() { return new Promise((resolve, reject) => { let block = document.getElementById('pao-accordion-block'); if (block) { let container = document.getElementById( 'pao-accordion-data-container' ); if (!container) { // Hide label document.getElementById('pao-accordion-label').hidden = true; let accordion = document.createElement('calcite-accordion'); accordion.setAttribute('id', 'pao-accordion-data-container'); // Single mode only with single dataTable. accordion.setAttribute('selection-mode', 'single'); accordion.classList.add('accordion'); // Adds tool bar to accordion block header. // Add to setupTableBuffer if you want tool bar on accordion item. let toolbar = buildToolbar(); if (toolbar) accordion.appendChild(toolbar); block.appendChild(accordion); // Scroll point element kept at bottom of data container. let scrollto = document.createElement('div'); scrollto.setAttribute('id', 'pao-scrollto-bottom'); scrollto.classList.add('d-none'); block.appendChild(scrollto); } styleAccordionItem(); setupTableBuffer().then(() => { resolve(true); }); } }).catch((error) => { doLogException('buildAccordionContainer', error); resolve(false); }); } /** * Called each time a new accordion item is added to pao-accordion-data-container * TODO: When Esri adds this feature, add style at create time * Expose CSS variable to style accordion item header in active state #4060 * https://github.com/Esri/calcite-components/issues/4060 * https://developers.arcgis.com/calcite-design-system/foundations/colors/#more-esri-colors * @param {*} id */ const styleAccordionItem = async () => { try { await customElements.whenDefined('calcite-accordion-item'); await delay(250); if (activeDataAccordionItem?.length > 0) { let node = document.querySelector(`#${activeDataAccordionItem}`); if (node) { let el = node.shadowRoot.querySelector('.header'); if (el) { el.style.setProperty('background-color', 'rgb(27, 54, 93)'); el.style.setProperty('border', '1px solid rgb(23, 134, 180)'); // add bottom margin el.style.setProperty('margin-bottom', '2px'); } el = node.shadowRoot.querySelector('.heading'); if (el) el.style.setProperty('color', 'var(--calcite-ui-warning)'); // Style font color el = node.shadowRoot.querySelector('.description'); if (el) el.style.setProperty('color', 'rgb(255, 255, 255)'); } } } catch (error) { doLogException('styleAccordionItem', error); } }; /** * Use to remove outline from specific block button. * Usage: removeButtonOutline('pao-taxparceltypes-block'); * @param {*} id */ const removeButtonOutline = async (id) => { await customElements.whenDefined('calcite-block'); await delay(200); let node = document.querySelector(`#${id}`); if (node) { let el = node.shadowRoot.querySelector('.header-container>button'); if (el) { el.style.setProperty('outline', 'none'); el = node.shadowRoot.querySelector('.header-container>button.toggle'); if (el) el.style.setProperty('background-color', 'var(--calcite-ui-foreground-1)'); } } }; /** * Block heading font color only available in shadowroot. * @param {*} id */ const changeHeadingStyle = async (id, color_var) => { await customElements.whenDefined('calcite-block'); await delay(200); let node = document.querySelector(`#${id}`); if (node) { let el = node.shadowRoot.querySelector('.heading'); if (el) { el.style.setProperty('color', `var(${color_var})`); } } }; /** * Use to remove outline from all block buttons only available in shadowroot. */ const removeAllButtonOutline = async () => { await customElements.whenDefined('calcite-block'); await delay(200); let nodes = document.querySelectorAll('calcite-block'); if (nodes) { nodes.forEach((p) => { let el = p.shadowRoot.querySelector('.header-container>button'); if (el) el.style.setProperty('outline', 'none'); }); } }; /** * Updates accordion header and subtitle. * Usage: await updateTablePageInfoHeader(arr-parids); * @param {*} distinctParids a parid object of distinct parids */ const updateTablePageInfoHeader = async (distinctParids) => { try { if (dgData[activeDataAccordionItem]) { let distinct_parids_count = distinctParids.parids?.length; // Heading messge to indicate max gis records returned. // Default heading message is used when no max. let max_part = ''; if (distinct_parids_count >= MAX_QUERY_RECORDCOUNT) { let m = new Intl.NumberFormat('en-IN').format(MAX_QUERY_RECORDCOUNT); max_part = `Max ${m} subject parcels reached.`; } // Count of distinct parids, including in subject property and\or buffer. distinct_parids_count = new Intl.NumberFormat('en-IN').format(distinct_parids_count); // Get required accordion item and set heading and sub-title description text. let accordion_item = document.getElementById(activeDataAccordionItem); if (accordion_item) { // DataTable rows for this item include subject and buffered parcels. let item_row_count = dgData[activeDataAccordionItem]?.rows.length; // Get distance unit type for this item. let unit_type_abbrv = dgData[activeDataAccordionItem].unitTypeAbbrv; // DataTable subject parcel count. let subject_parcel_count = subjectParcels?.rows?.length; // Absolute buffer size for current accordion item. let fixed_buffer_size = fixedBufferSizeScale(bufferSize); // Buffer results heading can be replaced with an alternative value. // Change heading value or use default. // Set font color before text. let header = document.getElementById('pao-accordion-block'); if (header?.hasAttribute('heading')) { if (max_part?.length > 0) { await changeHeadingStyle('pao-accordion-block', '--calcite-ui-danger'); header.attributes['heading'].value = max_part; } else if (header.attributes['heading'].value !== BUFFER_RESULTS_HEADING) { await changeHeadingStyle('pao-accordion-block', '--calcite-ui-text-2'); header.attributes['heading'].value = BUFFER_RESULTS_HEADING; } // Subject property part. let selected_part = ''; let included_part = ''; let unique_part = ''; let included_word_part = ''; // total_subjects_count exact subject parcels included in table // when some subject properties get filtered in tax parcel type list. let total_subjects_count = 0; //if (subject_parcel_count > 0) { // Always include subject part. selected_part = `Selected ${distinct_parids_count} parcel${distinct_parids_count === 0 || distinct_parids_count > 1 ? 's' : '' }`; // This part of header prints subject parcels in all buffered parcels. if (includeSubjectParcelsOn) { included_word_part = ', including '; } total_subjects_count = await visibleSubjectParcelsCount(); // This part of header prints the excluded subject parcels in all buffered parcels. if (!includeSubjectParcelsOn) { included_word_part = ', excluding '; } // Build the included\excluded part if (included_word_part.length > 0) { included_part = `${total_subjects_count} subject propert${total_subjects_count === 0 || total_subjects_count > 1 ? 'ies' : 'y' }`; } // Build the unique mailing addresses part // Get count of addresses from queried distinct parids, include parent node parid. let json = JSON.stringify(distinctParids); // Expects int. let queried_parids_count = await distinctAddressCount(json); queried_parids_count = new Intl.NumberFormat('en-IN').format(queried_parids_count); unique_part = `; ${queried_parids_count} unique mailing address${queried_parids_count > 1 ? 'es' : ''}.` //} // Assemble the header. let punc1 = '.'; // sometimes period, do other punctuation above. if (included_word_part?.length === 0 && unique_part?.length > 0) { punc1 = ''; } if (included_word_part?.length > 0) { punc1 = ''; } if (unique_part?.length === 0) unique_part = '.'; header.description = `${selected_part}${punc1}${included_word_part}${included_part}${unique_part}`; } } } } catch (error) { doLogException('updateTablePageInfoHeader', error); } };     ... View more

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