Ready-to-use Web Esri JavaScript 4.x widgets for time slider and 3D tools

Now Available: Ready-to-use Web Esri JavaScript 4.x widgets for time slider and 3D tools

What are they?

Part of Esri's JavaScript 4.x API includes ready-to-use widgets. By wrapping these widgets as VertiGIS Studio Web components you can use them directly.

Time Slider library. This library wraps the Esri TimeSlider widget.
https://vertigis-web-incubator.netlify.app/timeslider

3D Tools library. This library wraps the following Esri widgets and supplies them in a ready-to-use library: AreaMeasurement, LineMeasurement, Daylight, ElevationProfile, LineOfSight, ShadowCast, Slice.
https://vertigis-web-incubator.netlify.app/3d-tools

Why deliver them as VertiGIS Studio Web incubator libraries?

Esri's widgets provide immediate value when they solve a use case, they do not however support many other aspects of VertiGIS Studio Web in a way that would allow us to include them directly. Most notably, these widgets do not support WCAG AA accessibility, they do no full internationalization, and they are not integrated into the brand and style capabilities of VertiGIS Studio Web.

How do I use them?

Go to the VertiGIS Studio Web incubator page of interest
Use the Download this Library link to download the library .js file
In VertiGIS Studio Web Designer in any saved app, use the File > Upload Library to add the library .js file to your app
The Esri widgets will appear as new components you can include and configure in your app

p.s. In addition to the ready-to-use library this is on GitHub and so you can also access the source code if you desire to tweak it.

Antonio Carrozzo

February 17, 2023 07:46

Could you please provide an example of how to integrate the directions widget?

Jasper Kroon

October 09, 2024 12:08

Nice work re-using the code already created by Esri. Could be a common way to add features.

It would be nice to configure the time-slider settings within the wrapper itself and be able to add 2 time-slider buttons with different settings. Also the time-slider crashes with some settings set in the Webmap.