POST
|
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
03-18-2024
08:18 AM
|
1
|
0
|
177
|
POST
|
Since 4.26, the class "esri-ui calcite-theme-light" was replaced with "esri-ui calcite-mode-light" and now the top inset pushes the widgets down. Changing the class back to version with "theme" fixes this. Could it possibly be that the wrong class was used here for versions > 4.25? 4.23 to 4.25 <div class="esri-ui calcite-theme-light" style="inset: 55px 0px 0px;"> 4.26 through 4.29 <div class="esri-ui calcite-mode-light" lang="en-US" style="inset: 55px 0px 0px;"> Also, 1. Centering a featureLayer by lat\lon is no longer accurate. Looking at the featureLayer above, it looks like the right side widgets are preventing it from centering seeing that the featureLayer is aligned with the last widget. 2. Initial zoom is too close. At some point in the past week, zoom 12 is now much too close. We have made no changes since July 2023. let view = new MapView({ map: map, container: 'aerialMapViewer', center: [lon, lat], zoom: 12, <-------------------- NOW TOO CLOSE padding: padding, constraints: { maxScale: 0, minScale: 300000 } }); 3. There is a large black box in an area of the map.
... View more
03-12-2024
02:02 PM
|
0
|
2
|
323
|
POST
|
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
01-08-2024
07:24 AM
|
1
|
1
|
187
|
POST
|
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
01-02-2024
01:27 PM
|
0
|
4
|
197
|
POST
|
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
06-30-2023
11:23 AM
|
0
|
0
|
514
|
POST
|
Using Popup in version 4.27. Is it possible to hide vertical scrollbar when nothing to scroll? In 4.27 samples, vertical scrollbar and nothing to scroll. Nothing to scroll here. Same popup item above and no vertical scrollbar in 4.26
... View more
06-30-2023
07:04 AM
|
0
|
3
|
554
|
POST
|
I am using a PopupTemplate in 4.2.7. I would like to show additional title data in the popup feature list items when multiple features exist, but never on the main popup view. The template title appears to be common for both selected item and list items. only 1 item in popup. Ok. Multiple items in popup, show additional title info in list and not here Show additional title info. Ok.
... View more
06-30-2023
06:52 AM
|
0
|
0
|
161
|
POST
|
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
03-22-2023
11:40 AM
|
0
|
1
|
626
|
POST
|
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
03-22-2023
10:02 AM
|
0
|
3
|
634
|
POST
|
The location of the error is on line 1 below. const queryFeatureLayer = new FeatureLayer({ params here... } const queryObject = queryFeatureLayer.createQuery(); set the queryObject params run query 1. queryFeatureLayer.queryFeatures(queryObject) 2. .then((layerView) => { ... } My guess is that the server responded with zero results or did not complete the query at all. Running the query a second time often works, so my workaround is to run again. if(error.message.indexOf('featureResult') > -1) { setTimeout(() => { run the query again }, 350);
... View more
03-22-2023
09:18 AM
|
0
|
0
|
227
|
POST
|
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
03-22-2023
07:27 AM
|
0
|
5
|
658
|
POST
|
I am adding buffer graphics to 2D MapView and would like to have an event on the add\remove to check for errors. The "on" event below doesn't report an event. const bufferLayer = new GraphicsLayer({
title: 'some-bufferLayer',
});
let geometry = sketchGeometry; // a polygon
const bufferGeometry = geometryEngine.geodesicBuffer(
geometry, // geometry, The buffer input geometry
buffer_size, // distance, The specified distance(s) for buffering
unitType, // unit, Measurement unit of the distance
false // unionResults, Default Value: false
);
if (bufferLayer.graphics?.length === 0) {
bufferLayer.add(
new Graphic({
geometry: bufferGeometry,
symbol: sketchViewModel.polygonSymbol,
})
);
} else {
bufferLayer.remove(bufferGeometry);
bufferLayer.graphics.getItemAt(0).geometry = bufferGeometry;
}
view.map.add(bufferLayer);
// ???
// No event happening here.
bufferLayer.graphics.on("after-remove", function(event){
});
... View more
03-22-2023
07:04 AM
|
0
|
7
|
668
|
POST
|
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
03-14-2023
01:03 PM
|
0
|
2
|
863
|
Title | Kudos | Posted |
---|---|---|
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 | |
1 | 02-21-2023 10:25 AM |
Online Status |
Offline
|
Date Last Visited |
3 weeks ago
|