Select to view content in your preferred language

Need to create a custom widget with multiple widgets enclosed within.

11-03-2023 01:30 PM
New Contributor

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS Maps SDK for JavaScript Tutorials: Display a scene</title>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;


<link rel="stylesheet" href="">
<script src=""></script>

], function(esriConfig, Map, SceneView, FeatureLayer, Expand, BasemapGallery, AreaMeasurement3D, LineOfSight, LayerList, Legend, Compass) {

esriConfig.apiKey = "AAPKb6723de7d64b410ca4b3106297567589haGVc4dtuVBzVw1isFbYLznf9QbiJJ27VVkAZruKb0Y3N91W2kBNUn268t7DvYPC";

const map = new Map({
basemap: "arcgis/topographic", // basemap styles service
ground: "world-elevation", //Elevation service

const view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: {
x: -118.808, //Longitude
y: 33.961, //Latitude
z: 2000 //Meters
tilt: 75

// Define a pop-up for Trailheads
const popupTrailheads = {
"title": "Trailhead",
"content": "<b>Trail:</b> {TRL_NAME}<br><b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft"

const trailheads = new FeatureLayer({
url: "",
popupTemplate: popupTrailheads


// Define a popup for Trails
const popupTrails = {
title: "Trail Information",
content: [{
type: "media",
mediaInfos: [{
type: "column-chart",
caption: "",
value: {
fields: [ "ELEV_MIN","ELEV_MAX" ],
normalizeField: null,
tooltipField: "Min and max elevation values"

const trails = new FeatureLayer({
url: "",
outFields: ["TRL_NAME","ELEV_GAIN"],
popupTemplate: popupTrails


// Create a BasemapGallery widget instance and set
// its container to a div element

const basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")

// Create an Expand instance and set the content
// property to the DOM node of the basemap gallery widget

const bgExpand = new Expand({
view: view,
content: basemapGallery

//Area Measurement
const measurementWidget = new AreaMeasurement3D({
view: view

const areaExpand = new Expand({
view: view,
content: measurementWidget

const lineOfSight = new LineOfSight({
view: view

const lineOfSightExpand = new Expand({
view: view,
content: lineOfSight

// LayerList
const layerList = new LayerList({
view: view

// Use an Esri icon font to represent the content inside
// of the Expand widget
const layerListExpand = new Expand({
expandIconClass: "esri-icon-layer-list",
view: view,
content: layerList

const legend = new Legend({
view: view

const legendExpand = new Expand({
expandIconClass: "esri-icon-legend",
view: view,
content: legend

const compass = new Compass({
view: view

const compassExpand = new Expand({
view: view,
content: compass

view.ui.add([bgExpand, areaExpand, lineOfSightExpand, layerListExpand, legendExpand, compassExpand], "top-right");


<div id="viewDiv"></div>

My Result:
* Widgets on the rightScreenshot 2023-11-04 015327.png


I need my widget to include multiple widgets within, how to achieve that?


This is my goal widget. Mine should be expandable like this with multiple widgets within.


0 Kudos
2 Replies
Frequent Contributor II

You should remove your api key from your snippet.

You can probably accomplish what you want to do with Calcite components.

Here is a tutorial similar to what you want.

The action-bar also support a horizontal layout.

The calcite tutorials and documentation should help you accomplish what you're trying to do.

0 Kudos
New Contributor

Thank you, will check this out

0 Kudos