Example of how to include an ArcGIS API for JavaScript widget in an Experience Builder widget.
The main example here includes the 2D Measurement widget. Click the download button above and extract the files to client\your-extensions\widgets\js-api-widget-wrapper
to see it in action.
- Download and unzip Experience Builder Developer Edition.
- Download the latest release from this repository.
- Unzip the downloaded files, and copy the
js-api-widget-wrapper
folder into theclient\your-extensions\widgets\js-api-widget-wrapper
folder of the extracted Experience Builder files.
- Download and unzip Experience Builder Developer Edition.
- Open a new terminal window and browse to the
client
folder. git clone https://github.com/gavinr/js-api-widget-wrapper-experience-builder
npm ci
npm start
- Start Experience Builder server per the instructions (in a separate terminal,
cd server
,npm ci
,npm start
)
- Open the
client
folder as a project in VS Code (or similar code editor). - Make sure both scripts are running (in the
server
folder andclient
) folder). - Every time you make a change to your widget, it will be re-built with webpack automatically.
If you want to include a widget that is primarily placed as an icon over the map (using view.ui.add()
), like the Compass widget, an example is shown in the compass branch here (download zip). This will be a less-common use case for custom widgets, because the out-of-the-box Experience Builder Map Widget allows you to easily enable/disable these types of widgets in the widget settings.
View my other Experience Builder projects here