|
POST
|
Thank you, Rene. Your example helped. I put this together to show a loader during updating. view.watch('updating', async (state) => { let elm = document.querySelector('#pao-modal-loading'); if (elm) elm.open = state; });
... View more
09-23-2022
01:10 PM
|
0
|
0
|
997
|
|
POST
|
Here's my solution until\if header is exposed later on. Thank you, Kitty. const delay = (ms) => {
return new Promise(resolve => setTimeout(resolve, ms));
};
/**
* 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
* @param {*} id
*/
const styleAccordionItem = async () => {
await customElements.whenDefined("calcite-accordion-item");
await delay(125);
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', 'rgb(255, 200, 69');
}
};
... View more
09-22-2022
05:56 AM
|
0
|
3
|
2813
|
|
POST
|
Access to header and even title would be great. I'll keep an eye on this open enhancement group. Is my original code fragment bad practice? It does style the header once the accordion item is rendered...or is that just by accident? I'll try using the styling in your fragment above and find a color that isn't so dark when the accordion is expanded. That will be fine as long as the accordion item stands out for the user. Thanks.
... View more
09-21-2022
05:08 PM
|
0
|
0
|
2831
|
|
POST
|
Thanks, Kitty. I'm not familiar with CustomElementRegistry. You have given me something new to read tonight! The codepen was helpful. Though .header is still not available.
... View more
09-21-2022
02:16 PM
|
0
|
6
|
2838
|
|
POST
|
I am adding style to an accordion item, but when the calcite-accordion-item is first added to the calcite-accordion container, the shadowRoot ".header" is not available yet. What is another way to add style to this? Accordion item not styled until shadowRoot is ready. Accordion item styled. Only works when shadowRoot is built. document.querySelectorAll('calcite-accordion-item').forEach((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', 'rgb(255, 200, 69');
});
... View more
09-21-2022
11:41 AM
|
0
|
8
|
2859
|
|
POST
|
I am looking for a way to know when MapImageLayer symbology is visible and there's nothing pending. Adding a watch for reactiveUtils does show me that the MapImageLayer is loaded, but the symbology is still not visible for up to 5 seconds. (the view.when is also hit). I am trying to disable some widget buttons until after the map and symbology is fully loaded with nothing pending before I enable the buttons. I am also updating a few layers in listItemCreatedFunction and have a watch reactiveUtils there too, but still not helping. I'm thinking about just adding a 5 second timer if there's nothing else available. 🙄At this point my watch indicates the MapImageLayer is loaded, but there's no symbology yet. 😊At this point I can enable my widget buttons const mapLayerAndLabels = new MapImageLayer({
url: mapLayerAndLabelsUrl,
legendEnabled: true,
visible: true,
title: 'Map Layers & Labels',
});
map.add(mapLayerAndLabels); This is in listItemCreatedFunction reactiveUtils.whenOnce(
() => mapLayerAndLabels.loaded)
.then(() => {
console.log(`mapLayerAndLabels is loaded.`);
});
... View more
09-13-2022
02:05 PM
|
0
|
4
|
1070
|
|
POST
|
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
... View more
09-13-2022
10:23 AM
|
0
|
0
|
1141
|
|
POST
|
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)
... View more
09-09-2022
11:17 AM
|
0
|
2
|
1168
|
|
POST
|
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
... View more
08-30-2022
09:00 AM
|
0
|
2
|
1379
|
|
POST
|
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', '');
... View more
08-18-2022
12:15 PM
|
0
|
2
|
583
|
|
POST
|
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
... View more
06-24-2022
02:40 PM
|
0
|
1
|
1359
|
|
POST
|
Great. I will let you know when it’s up. Meanwhile, I’ll accept your answer here.
... View more
06-21-2022
07:16 PM
|
0
|
0
|
1208
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 10-30-2024 01:32 PM | |
| 1 | 03-18-2024 08:18 AM | |
| 1 | 01-08-2024 07:24 AM | |
| 3 | 12-30-2022 11:36 AM | |
| 1 | 03-13-2023 07:40 AM |
| Online Status |
Offline
|
| Date Last Visited |
09-12-2025
08:55 AM
|