Select to view content in your preferred language

Boilerplate for a Map Related Custom Widget

316
0
10-24-2023 09:02 AM

Boilerplate for a Map Related Custom Widget

I created this set of files as a way to save myself from writing the same boilerplate code over and over.  As written the attached widget does nothing useful, it is intended as a starting off point for a widget that needs to connect to a map and use features from the API. You should rename the folder and name in manifest.json before using in your project.

Note: This starter widget was originally written in Experience Builder 1.11 and should work in that version. A small modification may be necessary in Experience Builder 1.12 and higher. 

 

//widget.tsx return statement in Experience Builder 1.12    
  return (
		<div className='jimu-widget'>
			{
				props.useMapWidgetIds &&
				props.useMapWidgetIds.length === 1 && (
					<JimuMapViewComponent
						useMapWidgetId={props.useMapWidgetIds?.[0]}
						onActiveViewChange={activeViewChangeHandler}
					/>
				)
			}
		
			{mapReady ? 'map ready' : 'map not ready'}
		</div>
    )

//widget.tsx return statement in Experience Builder 1.11
return (
	<div className='jimu-widget'
		{
			...
			props.useMapWidgetIds &&
			props.useMapWidgetIds.length === 1 && (
				<JimuMapViewComponent
					useMapWidgetId={props.useMapWidgetIds?.[0]}
					onActiveViewChange={activeViewChangeHandler}
				/>
			)
		}
	>
		{mapReady ? 'map ready' : 'map not ready'}
	</div>
) 

 

Attachments
Version history
Last update:
‎02-28-2024 01:55 PM
Updated by:
Contributors