|
POST
|
The cast looks like it did the trick as far as getting rid of the linter errors. I do appreciate that. Would casting possibly fix the issues @micsova was asking about you think? I'm newer to typescript, coming from a C# background mainly. Not sure of the prevalence of type casting in cases like these.
... View more
04-25-2025
08:50 AM
|
0
|
0
|
323
|
|
POST
|
Thanks for the reply @mpatiiuk ! As far as where the TargetedEvent type is coming from, it's coming from the component's on function here: (let me know if you can't see that I can resend it) Tried the type you gave me but no luck. still getting the same linter error of Property 'portalItem' does not exist on type 'Map'. Inlining the listener gives me a similar error as well. I did get this code from some of the docs I found for the calcite components. It's here: https://developers.arcgis.com/javascript/latest/tutorials/using-view-with-components/#add-script-logic which I was sent to from this tutorial: https://developers.arcgis.com/javascript/latest/get-started-react/#add-additional-functionality (at the bottom of this section it mentioned going to 'this tutorial' which sends me to the previous link to this one) I mean it does indeed log the title in the console, but I should be able to use my tooling also. Thanks again!
... View more
04-23-2025
04:57 AM
|
0
|
2
|
1948
|
|
POST
|
Thanks for following up @Edvinas_S . Here's something that I'm still trying to wrap my head around. First off, when I do the console.log for the portalItem.title, it actually gives me the title of the webmap that's in my portal. I tried giving it a name of tempProperty to see if it would still print the title. It told me tempProperty doesn't have a property called title. When I switched back to portalItem, it was indeed printing out again. I was hoping to not have to worry about IDE typing errors like this using the calcite web components. Any thoughts on that? The other thing I had was utilizing this link for using react with the calcite components: https://developers.arcgis.com/calcite-design-system/resources/frameworks/#calcite-components-react Now I did read the note stating if using react 19+ we don't need to use calcite-components-react. I was hoping to get some other documentation on accessing underlying functionality in the web components so I can start writing my own components to work with the map via react.
... View more
04-22-2025
06:54 AM
|
0
|
1
|
1972
|
|
POST
|
I'm actually using VSCode as well but I'm using Vite@latest to setup the app initially. With that I'm actually trying to use react 19 with the web components and I'm getting similar issues as far as type issues. For instance. I'm using this code in a react component. const handleArcgisViewReadyStateChange = (event: TargetedEvent<HTMLArcgisMapElement, void>) => {
const { portalItem } = event.target.map
console.log(portalItem.title)
}
<arcgis-map
item-id="5d2b522afda8457c9a00c4773c1648e6"
onarcgisViewReadyChange={handleArcgisViewReadyStateChange}
>
<arcgis-home position='top-left'></arcgis-home>
<arcgis-zoom position='top-left'></arcgis-zoom>
<arcgis-locate position='top-left'></arcgis-locate>
</arcgis-map> I'm getting a typing problem with VSCode IDE telling me Property 'portalItem' does not exist on type 'Map'.
... View more
04-21-2025
12:30 PM
|
0
|
3
|
1993
|
|
POST
|
Hi All! I've been looking for awhile and I'm not finding a reason why when I click on a webmap to show a popup in a deployed ExB application, it's adding this: #data_s=id%3AdataSource_1-19547facb76-layer-17-7%3A88283 in the URL. I can use my custom search widget and it finds features and whatnot all day. But when I click on the feature on the map, or even when I click on a result item in my custom search widget, it shows this querystring data in the url. Now I know that if I copy the entire url and use it in a new browser window it'll show the mapping app as well as the highlighted feature that's been clicked on. My question (other than the fact that it requires a login to display, which may be the reason I DON'T use ExB and go back to WAB) is why it automagically adds that data to the end of the url? Is there somewhere to configure it to NOT do that? I'm flagging @JeffreyThompson2 since he seems like an excellent resource to get ahold of. Anyone that has any answers for me are welcome to reply too. Thanks again! - Dean Wilson
... View more
04-18-2025
07:07 AM
|
0
|
1
|
761
|
|
POST
|
Hi All! I'm new to ExB development and coming from WAB originally. This thing has been wracking my brain for a few days and I'm at my wits end here. Not sure if it's just a don't know what you don't know thing, but it's still frustrating none-the-less. I'm trying to use a query string parameter that's passed through the url when I first load the app I'm building with ExB developer version 1.17. In my custom widget I have a few different components. The main search component service I have that does the actual searches works great when used within the context of the widget itself. The steps I"m trying to get to are as follows: Drop URL with query param in the browser > widget pulls query param (it's set to auto open on app start) > sets the search text using useState > called the handleSearch function (which is promise based) Using a useEffect gives me a bunch of issues since you have to declare all of your dependencies, which includes the setSearchText, handleSearch function, and the like. Here's the current widget.tsx: /** @jsx jsx */
/** @jsxFrag React.Fragment */
import { React, type AllWidgetProps } from 'jimu-core'
import { jsx, css } from 'jimu-core'
import { type BufferSettings, BufferUnit, type IMConfig } from '../config'
import {
Button, Card, CardBody, CardFooter, Dropdown, DropdownButton, DropdownItem,
DropdownMenu, Tab, Tabs, TextInput
} from 'jimu-ui'
import { SearchOutlined } from 'jimu-icons/outlined/editor/search'
import { MoreVerticalOutlined } from 'jimu-icons/outlined/application/more-vertical'
import ResultItem from './components/resultItem'
import ResultsTabTitle from './components/resultsTabTitle'
import { type JimuMapView, JimuMapViewComponent } from 'jimu-arcgis'
import { useMapService } from './services/map'
import { useSearchService } from './services/search'
import type Graphic from '@arcgis/core/Graphic'
import DrawTools from './components/drawTools'
import BufferControls from './components/bufferControls'
const { useState } = React
enum TabName {
ByValue = 'byValue',
ByShape = 'byShape',
Results = 'results'
}
const Widget = (props: AllWidgetProps<IMConfig>) => {
const { id, config } = props
const [isLoading, setIsLoading] = useState<boolean>(false)
const [error, setError] = useState<Error | null>(null)
const [searchText, setSearchText] = useState('')
const [activeTab, setActiveTab] = useState<TabName>(TabName.ByValue)
const [jimuMapView, setJimuMapView] = useState<JimuMapView>(null)
const [searchResults, setSearchResults] = useState<Graphic[]>([])
const [searchResultsCount, setSearchResultsCount] = useState(0)
const [bufferSettings, setBufferSettings] = useState<BufferSettings>({
enabled: false,
distance: 5,
unit: BufferUnit.Feet
})
const mapService = useMapService(id)
const searchService = useSearchService(config.selectedLayerId)
const handleActiveViewChange = (jmv: JimuMapView) => {
setJimuMapView(jmv)
if (jmv) {
searchService.initialize(jmv)
mapService.initialize(jmv)
}
}
const handleUpdateBufferSetting = (field: keyof BufferSettings, value: any) => {
setBufferSettings({
...bufferSettings,
[field]: value
})
}
const handleSearch = async () => {
if (!jimuMapView || !config.selectedLayerId || !searchText.trim()) {
return
}
setIsLoading(true)
setError(null)
const { features, error } = await searchService.searchFeatures(
searchText,
config.searchFields
)
if (error) {
setError(error)
setIsLoading(false)
return
}
setSearchResults(features)
if (features.length > 0) {
setSearchResultsCount(features.length)
setActiveTab(TabName.Results)
mapService.updateResultsLayer(features, `${config.title} Results`)
}
setIsLoading(false)
}
const handleSpatialSearch = async (graphic: Graphic) => {
if (!jimuMapView || !config.selectedLayerId || !graphic) {
return
}
setIsLoading(true)
setError(null)
const { features, error } = await searchService.searchFeaturesBySpatial(
graphic.geometry,
bufferSettings
)
if (error) {
setError(error)
setIsLoading(false)
return
}
setSearchResults(features)
if (features.length > 0) {
setSearchResultsCount(features.length)
setActiveTab(TabName.Results)
mapService.updateResultsLayer(features, `${config.title} Results`)
if (bufferSettings.enabled) {
mapService.highlightBufferedSearchFeature(graphic)
}
}
setIsLoading(false)
}
const handleClearSearch = () => {
setSearchResults([])
setSearchResultsCount(0)
setSearchText('')
setError(null)
mapService.clearResults()
setActiveTab(TabName.ByValue)
}
const handlePressEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (searchText.trim()) {
handleSearch()
}
}
const handleResultItemClick = (item: Graphic) => {
if (item) {
mapService.highlightFeature(item)
}
}
const handleSearchOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchText(event.target.value)
if (error) setError(null)
}
const getSearchableFieldsText = () => {
if (!config.searchFields || config.searchFields.length === 0) {
return 'Search by keyword'
}
return config.searchFields.reduce((text, field, index, array) => {
const fieldAlias = field.alias || field.fieldName
if (index === 0) {
return `Search by ${fieldAlias}`
} else if (index === array.length - 1) {
return `${text}, or ${fieldAlias}`
} else {
return `${text}, ${fieldAlias}`
}
}, '')
}
return (
<div className="widget-wc-search" css={css`
height: 100%;
display: flex;
flex-direction: column;
`}>
<Tabs
className='h-100'
defaultValue='byValue'
value={activeTab}
fill
onChange={(tabId: string) => {
if (Object.values(TabName).includes(tabId as TabName)) {
setActiveTab(tabId as TabName)
}
}}
type='pills'
>
<Tab
id={TabName.ByValue}
title='By Value'
>
<Card>
<CardBody>
{error && (
<div className="error-message" css={css`
color: var(--sys-color-error-main);
margin-bottom: 10px;
padding: 8px;
background-color: var(--sys-color-error-light);
border-radius: 4px;
`}>
<p>Error: {error.message}</p>
</div>
)}
<p>{getSearchableFieldsText()}</p>
<TextInput
placeholder='Enter Account Number, Parcel, Etc.'
onPressEnter={handlePressEnter}
disabled={isLoading}
value={searchText}
onChange={handleSearchOnChange}
prefix={<SearchOutlined size="s" />}
/>
</CardBody>
<CardFooter
css={css`
display: flex;
justify-content: space-between;
`}
>
<Button
onClick={handleClearSearch}
disabled={!searchText.trim()}
size='default'
>
Clear
</Button>
<Button
onClick={handleSearch}
disabled={isLoading || !searchText.trim()}
size='default'
css={css`${(isLoading) ? 'background-color: var(--ref-palette-neutral-300) !important;' : ''}`}
>
{(isLoading) ? 'Searching...' : 'Search'}
</Button>
</CardFooter>
</Card>
</Tab>
<Tab
id={TabName.ByShape}
title='By Shape'
>
<Card>
<CardBody>
{error && (
<div className="error-message" css={css`
color: var(--sys-color-error-main);
margin-bottom: 10px;
padding: 8px;
background-color: var(--sys-color-error-light);
border-radius: 4px;
`}>
<p>Error: {error.message}</p>
</div>
)}
<p>Select features by</p>
<DrawTools
jimuMapView={jimuMapView}
onGraphicCreated={handleSpatialSearch}
/>
<BufferControls
settings={bufferSettings}
onUpdateSetting={handleUpdateBufferSetting}
/>
</CardBody>
</Card>
</Tab>
<Tab
id={TabName.Results}
title={(<ResultsTabTitle recordCount={searchResultsCount} />)}
>
<div>
<div
className='d-flex justify-content-end pt-1 pb-1 sticky-top bg-overlay'
>
<Dropdown
direction='down'
>
<DropdownButton
arrow={false}
icon
size='default'
css={css`
border: none !important;
`}
>
<MoreVerticalOutlined />
</DropdownButton>
<DropdownMenu>
<DropdownItem
onClick={handleClearSearch}
>
Clear Results
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<>
{
searchResults.map((feature, index) => {
return (
<ResultItem
key={feature.attributes.OBJECTID}
feature={feature}
displayFields={config.displayFields}
summaryConfig={{
showSummaryLink: config.showSummaryLink,
summaryLinkLabel: config.summaryLinkLabel,
summaryUrlTemplate: config.summaryUrlTemplate,
summaryLinkFieldName: config.summaryLinkFieldName
}}
onItemClick={() => { handleResultItemClick(feature) }}
/>
)
})
}
</>
</div>
</Tab>
</Tabs>
<JimuMapViewComponent
useMapWidgetId={config.useMapWidgetIds?.[0]}
onActiveViewChange={handleActiveViewChange}
/>
</div>
)
}
export default Widget I still have some refactoring to do but thats the gist of it. Not sure where to go with this and Claude.ai keeps lying to me like AI usually does. lol Thanks in advance! - Dean Wilson
... View more
04-16-2025
11:29 AM
|
0
|
2
|
560
|
|
POST
|
They want me to show data in a table combined with both soil and land use. I guess drawing it I won't need to unionize it. Maybe I'll go back to rethink that part of it. Typing it out makes me think we should have a different approach then what they did before. This was an arcmap add-on written in VB that's being ported over to a web application using the javascript api.
... View more
09-19-2019
05:26 AM
|
0
|
0
|
1744
|
|
POST
|
1) The polygons need to be completely contained in the selection polygon. 2) What I'm doing is searching on a parcel geometry for land use and soil types so I want to show the land use and soil types within the parcel polygon. Hopefully that makes sense..
... View more
09-18-2019
09:11 AM
|
0
|
2
|
1744
|
|
POST
|
Ok thats pretty simple.. The only other question I have would be what spatial relationship would I use for that? (I should have mentioned that earlier) Then I can union all 3 polygons and make the final graphic right? Or just use the two? I'm asking this because I need to show the union on the map within the parcel polygon only.. amongst other things that need done with this. lol. Thanks for the quick reply on this too Robert.. You're a wealth of knowledge.
... View more
09-18-2019
08:59 AM
|
0
|
4
|
1744
|
|
POST
|
Trying to look for how to do this and I'm kind of at a loss here.. Here's my dilemma: I have a polygon shape, and I want to use that shape and get only the polygon data from 2 other layers that are only within that shape. Once I get those I'm going to union the resultant polygons but what would be a good second step for this? First step is getting the polygon I want to use. I did read about the clip geometry tool but it looks like from what I'm reading, that only clips on a selected extent, and not an actual input geometry. Any guidance would be wonderful. Thanks!!
... View more
09-18-2019
07:56 AM
|
0
|
6
|
1800
|
|
POST
|
This did it Tanu.. I went ahead and used the geometry service on the existing polygon rings and put label points as the geometry and drew them that way. They show up in the prints great! Thank you soooo much for your insight on this. Nowhere did I see that in order to print the text graphics the geometry needed to be of type point. -Dean
... View more
08-16-2019
07:05 AM
|
0
|
2
|
1952
|
|
POST
|
I attached the print submission json as a zip to the question posting. I went ahead and formatted the json for easier readability. Thanks!! -Dean
... View more
08-13-2019
12:19 PM
|
0
|
4
|
1952
|
|
POST
|
My only holdup with getting with ESRI about it is the fact that we're on a 10.4.1 arcgis on-premise server. But on any case, I'll take a peek and see what I can get to you, Tanu. Thanks!
... View more
08-12-2019
10:25 AM
|
0
|
0
|
1952
|
|
POST
|
No I haven't. I was hoping I could find something here since I'm sure I'm not the only one having this kind of problem. I suppose I'll have to call them though.
... View more
08-12-2019
07:45 AM
|
0
|
7
|
1952
|
| Title | Kudos | Posted |
|---|---|---|
| 2 | 07-14-2025 08:02 AM | |
| 1 | 07-02-2025 08:04 AM | |
| 1 | 05-23-2019 07:42 AM |
| Online Status |
Offline
|
| Date Last Visited |
11-06-2025
05:03 AM
|