arcgis-widgets-advanced

Advanced and specialized widgets including BuildingExplorer, FloorFilter, Track, Locate, Histogram, ScaleBar, Compass, NavigationToggle, and media viewers

Quality

48%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Advisory

Suggest reviewing before use

Optimize this skill with Tessl

npx tessl skill review --optimize ./contexts/4.34/skills/arcgis-widgets-advanced/SKILL.md

ArcGIS Advanced Widgets

Use this skill for specialized and advanced widgets including building exploration, indoor mapping, device GPS tracking, navigation aids, histograms, and media viewing.

Related skills: See arcgis-widgets-ui for basic widgets (Legend, LayerList, Search, Popup, etc.) and arcgis-map-tools for measurement, print, directions, and swipe tools.

Component Overview

Component	Widget Class	Purpose
`arcgis-building-explorer`	BuildingExplorer	Explore building scene layers
`arcgis-floor-filter`	FloorFilter	Filter indoor maps by floor
`arcgis-oriented-imagery-viewer`	OrientedImageryViewer	View oriented imagery
`arcgis-video-player`	VideoPlayer	Play video service feeds
`arcgis-track`	Track	Track device GPS location
`arcgis-locate`	Locate	Zoom to user location
`arcgis-scale-bar`	ScaleBar	Display map scale bar
`arcgis-compass`	Compass	Show north orientation
`arcgis-navigation-toggle`	NavigationToggle	Switch between pan and rotate
`arcgis-histogram-range-slider`	HistogramRangeSlider	Histogram with range selection

BuildingExplorer

Explore and filter BuildingSceneLayer data by disciplines and categories. Works only in 3D SceneView with BuildingSceneLayer.

BuildingExplorer Component

<arcgis-scene>
  <arcgis-building-explorer slot="top-right"></arcgis-building-explorer>
</arcgis-scene>

<script type="module">
  import BuildingSceneLayer from "@arcgis/core/layers/BuildingSceneLayer.js";

  const sceneElement = document.querySelector("arcgis-scene");
  const buildingExplorer = document.querySelector("arcgis-building-explorer");

  await sceneElement.viewOnReady();

  const buildingLayer = new BuildingSceneLayer({
    url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BSL__4326__United_States__NewYork__702702_702_Main/SceneServer"
  });

  sceneElement.map.add(buildingLayer);
</script>

BuildingExplorer Widget (Core API)

import BuildingExplorer from "@arcgis/core/widgets/BuildingExplorer.js";
import BuildingSceneLayer from "@arcgis/core/layers/BuildingSceneLayer.js";

const buildingLayer = new BuildingSceneLayer({
  url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BSL__4326__United_States__NewYork__702702_702_Main/SceneServer"
});

map.add(buildingLayer);

const buildingExplorer = new BuildingExplorer({
  view: view,
  layers: [buildingLayer]
});

view.ui.add(buildingExplorer, "top-right");

BuildingExplorer with External Reference

<calcite-shell>
  <calcite-shell-panel slot="panel-start">
    <calcite-panel heading="Building Explorer">
      <arcgis-building-explorer reference-element="sceneView"></arcgis-building-explorer>
    </calcite-panel>
  </calcite-shell-panel>

  <arcgis-scene id="sceneView"></arcgis-scene>
</calcite-shell>

FloorFilter

Filter floor-aware web maps by facility and floor level. Requires a floor-aware web map that contains floor plan data with facility and level information.

FloorFilter Component

<arcgis-map item-id="YOUR_FLOOR_AWARE_WEBMAP_ID">
  <arcgis-floor-filter slot="top-left"></arcgis-floor-filter>
</arcgis-map>

FloorFilter Widget (Core API)

import FloorFilter from "@arcgis/core/widgets/FloorFilter.js";
import WebMap from "@arcgis/core/WebMap.js";

const webMap = new WebMap({
  portalItem: {
    id: "YOUR_FLOOR_AWARE_WEBMAP_ID"
  }
});

const view = new MapView({
  container: "viewDiv",
  map: webMap
});

await view.when();

const floorFilter = new FloorFilter({
  view: view
});

view.ui.add(floorFilter, "top-left");

FloorFilter with External Reference

<calcite-shell>
  <calcite-shell-panel slot="panel-start">
    <calcite-panel heading="Floor Filter">
      <arcgis-floor-filter reference-element="mapView"></arcgis-floor-filter>
    </calcite-panel>
  </calcite-shell-panel>

  <arcgis-map id="mapView" item-id="YOUR_FLOOR_AWARE_WEBMAP_ID">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>
</calcite-shell>

FloorFilter Events

// Watch for floor level changes
floorFilter.watch("level", (level) => {
  console.log("Selected level:", level);
});

// Watch for facility changes
floorFilter.watch("facility", (facility) => {
  console.log("Selected facility:", facility);
});

// Watch for site changes
floorFilter.watch("site", (site) => {
  console.log("Selected site:", site);
});

OrientedImageryViewer

View and navigate oriented imagery captured in the field. Requires an OrientedImageryLayer.

OrientedImageryViewer Component

<arcgis-map>
  <arcgis-oriented-imagery-viewer slot="top-right"></arcgis-oriented-imagery-viewer>
</arcgis-map>

<script type="module">
  import OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.js";

  const viewElement = document.querySelector("arcgis-map");
  const viewer = document.querySelector("arcgis-oriented-imagery-viewer");

  await viewElement.viewOnReady();

  const oiLayer = new OrientedImageryLayer({
    url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/OrientedImagery/MapServer/0"
  });

  viewElement.map.add(oiLayer);
  viewer.layer = oiLayer;
</script>

OrientedImageryViewer Widget (Core API)

import OrientedImageryViewer from "@arcgis/core/widgets/OrientedImageryViewer.js";
import OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.js";

const oiLayer = new OrientedImageryLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/OrientedImagery/MapServer/0"
});

map.add(oiLayer);

const viewer = new OrientedImageryViewer({
  view: view,
  layer: oiLayer
});

view.ui.add(viewer, "top-right");

OrientedImageryViewer with External Panel

<calcite-shell>
  <calcite-shell-panel slot="panel-end" width-scale="l">
    <calcite-panel heading="Oriented Imagery">
      <arcgis-oriented-imagery-viewer reference-element="mapView"></arcgis-oriented-imagery-viewer>
    </calcite-panel>
  </calcite-shell-panel>

  <arcgis-map id="mapView" basemap="satellite">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>
</calcite-shell>

VideoPlayer

Play video feeds from a VideoLayer service. Requires a VideoLayer with an associated video service.

VideoPlayer Component

<arcgis-map>
  <arcgis-video-player slot="top-right"></arcgis-video-player>
</arcgis-map>

<script type="module">
  import VideoLayer from "@arcgis/core/layers/VideoLayer.js";

  const viewElement = document.querySelector("arcgis-map");
  const videoPlayer = document.querySelector("arcgis-video-player");

  await viewElement.viewOnReady();

  const videoLayer = new VideoLayer({
    url: "https://your-server.com/arcgis/rest/services/VideoService/MapServer/0"
  });

  viewElement.map.add(videoLayer);
  videoPlayer.layer = videoLayer;
</script>

VideoPlayer Widget (Core API)

import VideoPlayer from "@arcgis/core/widgets/VideoPlayer.js";
import VideoLayer from "@arcgis/core/layers/VideoLayer.js";

const videoLayer = new VideoLayer({
  url: "https://your-server.com/arcgis/rest/services/VideoService/MapServer/0"
});

map.add(videoLayer);

const videoPlayer = new VideoPlayer({
  view: view,
  layer: videoLayer
});

view.ui.add(videoPlayer, "top-right");

Track

Track the user's device GPS location in real time. Requires HTTPS and user permission to access device location.

Track Component

<arcgis-map basemap="streets-navigation-vector" center="-118.24, 34.05" zoom="12">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-track slot="top-left"></arcgis-track>
</arcgis-map>

Track Widget (Core API)

import Track from "@arcgis/core/widgets/Track.js";
import Graphic from "@arcgis/core/Graphic.js";

const track = new Track({
  view: view,
  useHeadingEnabled: true,
  goToOverride: (view, options) => {
    options.target.scale = 1500;
    return view.goTo(options.target);
  }
});

view.ui.add(track, "top-left");

// Start tracking programmatically
track.start();

Track Events

// Track position updates
track.on("track", (event) => {
  const { position } = event;
  console.log("Latitude:", position.coords.latitude);
  console.log("Longitude:", position.coords.longitude);
  console.log("Accuracy:", position.coords.accuracy);
  console.log("Heading:", position.coords.heading);
  console.log("Speed:", position.coords.speed);
});

// Track errors
track.on("track-error", (event) => {
  console.error("Tracking error:", event.error);
});

Track with Custom Symbol

const track = new Track({
  view: view,
  graphic: new Graphic({
    symbol: {
      type: "simple-marker",
      size: 12,
      color: "blue",
      outline: {
        color: "white",
        width: 2
      }
    }
  })
});

view.ui.add(track, "top-left");

Locate

Zoom to the user's current location. A single-action widget that finds the device location and pans the map to it.

Locate Component

<arcgis-map basemap="streets-navigation-vector" center="-118.24, 34.05" zoom="12">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-locate slot="top-left"></arcgis-locate>
</arcgis-map>

Locate Widget (Core API)

import Locate from "@arcgis/core/widgets/Locate.js";

const locate = new Locate({
  view: view,
  useHeadingEnabled: false,
  goToOverride: (view, options) => {
    options.target.scale = 1500;
    return view.goTo(options.target);
  }
});

view.ui.add(locate, "top-left");

Locate Events

// Listen for locate event
locate.on("locate", (event) => {
  console.log("Located at:", event.position.coords.latitude, event.position.coords.longitude);
});

// Listen for errors
locate.on("locate-error", (event) => {
  console.error("Location error:", event.error);
});

Locate with Custom Symbol

const locate = new Locate({
  view: view,
  graphic: new Graphic({
    symbol: {
      type: "simple-marker",
      size: 14,
      color: "#00bfff",
      outline: {
        color: "white",
        width: 2
      }
    }
  })
});

view.ui.add(locate, "top-left");

ScaleBar

Display a scale bar indicator showing map scale in metric or imperial units.

ScaleBar Component

<arcgis-map basemap="streets-navigation-vector" center="-118.24, 34.05" zoom="12">
  <arcgis-scale-bar slot="bottom-left"></arcgis-scale-bar>
</arcgis-map>

ScaleBar Widget (Core API)

import ScaleBar from "@arcgis/core/widgets/ScaleBar.js";

const scaleBar = new ScaleBar({
  view: view,
  unit: "dual" // "metric", "imperial", "dual", "non-metric"
});

view.ui.add(scaleBar, "bottom-left");

ScaleBar Styles

// Line style (default)
const scaleBar = new ScaleBar({
  view: view,
  unit: "dual",
  style: "line" // "line" or "ruler"
});

// Ruler style
const scaleBarRuler = new ScaleBar({
  view: view,
  unit: "metric",
  style: "ruler"
});

Compass

Display a compass indicator showing the current orientation of the map. Automatically appears when the map is rotated and hides when north is up.

Compass Component

<arcgis-map basemap="streets-navigation-vector" center="-118.24, 34.05" zoom="12">
  <arcgis-compass slot="top-left"></arcgis-compass>
</arcgis-map>

<!-- Also works with 3D scenes -->
<arcgis-scene>
  <arcgis-compass slot="top-left"></arcgis-compass>
</arcgis-scene>

Compass Widget (Core API)

import Compass from "@arcgis/core/widgets/Compass.js";

const compass = new Compass({
  view: view
});

view.ui.add(compass, "top-left");

Compass Behavior

// Clicking the compass resets the view rotation to north (0 degrees)
// In 3D, it also resets the camera heading

// Programmatically reset rotation
view.rotation = 0; // 2D
// or
view.goTo({ heading: 0 }); // 3D

NavigationToggle

Switch between pan and rotate navigation modes. Primarily useful in 3D SceneView.

NavigationToggle Component

<arcgis-scene>
  <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
</arcgis-scene>

NavigationToggle Widget (Core API)

import NavigationToggle from "@arcgis/core/widgets/NavigationToggle.js";

const navigationToggle = new NavigationToggle({
  view: view
});

view.ui.add(navigationToggle, "top-left");

NavigationToggle Layout

// Horizontal layout (default)
const navigationToggle = new NavigationToggle({
  view: view,
  layout: "horizontal" // "horizontal" or "vertical"
});

// Vertical layout
const navigationToggleVertical = new NavigationToggle({
  view: view,
  layout: "vertical"
});

HistogramRangeSlider

Display a histogram chart with adjustable range slider handles for filtering data. Commonly used with smart mapping to visualize data distribution and filter by value ranges.

HistogramRangeSlider (Core API)

import HistogramRangeSlider from "@arcgis/core/widgets/HistogramRangeSlider.js";
import * as histogram from "@arcgis/core/smartMapping/statistics/histogram.js";

// Generate histogram bins from a layer field
const histogramResult = await histogram.histogram({
  layer: featureLayer,
  field: "population",
  numBins: 30
});

const slider = new HistogramRangeSlider({
  bins: histogramResult.bins,
  min: histogramResult.minValue,
  max: histogramResult.maxValue,
  values: [histogramResult.minValue, histogramResult.maxValue],
  excludedBarColor: "#d7d7d7",
  rangeType: "between",
  container: "sliderDiv"
});

HistogramRangeSlider with Layer Filtering

import HistogramRangeSlider from "@arcgis/core/widgets/HistogramRangeSlider.js";
import * as histogram from "@arcgis/core/smartMapping/statistics/histogram.js";

const fieldName = "median_income";

const histogramResult = await histogram.histogram({
  layer: featureLayer,
  field: fieldName,
  numBins: 50
});

const slider = new HistogramRangeSlider({
  bins: histogramResult.bins,
  min: histogramResult.minValue,
  max: histogramResult.maxValue,
  values: [histogramResult.minValue, histogramResult.maxValue],
  excludedBarColor: "#d7d7d7",
  rangeType: "between",
  labelFormatFunction: (value) => {
    return "$" + Math.round(value).toLocaleString();
  },
  container: "sliderDiv"
});

// Filter layer when slider values change
slider.on(["thumb-change", "thumb-drag", "segment-drag"], () => {
  const [min, max] = slider.values;
  featureLayer.definitionExpression =
    `${fieldName} >= ${min} AND ${fieldName} <= ${max}`;
});

HistogramRangeSlider with Smart Mapping

import HistogramRangeSlider from "@arcgis/core/widgets/HistogramRangeSlider.js";
import * as histogram from "@arcgis/core/smartMapping/statistics/histogram.js";
import * as colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";

// Create color renderer and histogram together
const colorParams = {
  layer: featureLayer,
  field: "population",
  view: view
};

const [rendererResponse, histogramResult] = await Promise.all([
  colorRendererCreator.createContinuousRenderer(colorParams),
  histogram.histogram({
    layer: featureLayer,
    field: "population",
    numBins: 30
  })
]);

featureLayer.renderer = rendererResponse.renderer;

const slider = new HistogramRangeSlider({
  bins: histogramResult.bins,
  min: histogramResult.minValue,
  max: histogramResult.maxValue,
  values: [histogramResult.minValue, histogramResult.maxValue],
  excludedBarColor: "#d7d7d7",
  rangeType: "between",
  container: "sliderDiv"
});

// Update renderer stops when slider changes
slider.on(["thumb-change", "thumb-drag", "segment-drag"], () => {
  const renderer = featureLayer.renderer.clone();
  const colorVariable = renderer.visualVariables[0];
  colorVariable.stops = [
    { value: slider.values[0], color: colorVariable.stops[0].color },
    { value: slider.values[1], color: colorVariable.stops[colorVariable.stops.length - 1].color }
  ];
  featureLayer.renderer = renderer;
});

HistogramRangeSlider Configuration

const slider = new HistogramRangeSlider({
  bins: histogramResult.bins,
  min: 0,
  max: 100,
  values: [20, 80],

  // Range type: "between", "not-between", "at-least", "at-most", "equal", "not-equal"
  rangeType: "between",

  // Visual options
  barCreatedFunction: (index, element) => {
    // Customize individual bars
    element.setAttribute("fill", index % 2 === 0 ? "#007ac2" : "#005a8e");
  },
  excludedBarColor: "#d7d7d7",
  includedBarColor: "#007ac2",

  // Data line overlays
  dataLines: [
    { value: 50, label: "Average" }
  ],
  dataLineCreatedFunction: (element, label, index) => {
    element.setAttribute("stroke", "red");
  },

  // Precision for displayed values
  precision: 2,

  container: "sliderDiv"
});

Combining Multiple Advanced Widgets

Complete 3D Building Explorer App

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>
  <script src="https://js.arcgis.com/4.34/"></script>
  <script type="module" src="https://js.arcgis.com/4.34/map-components/"></script>
  <style>
    html, body { height: 100%; margin: 0; }
  </style>
</head>
<body>
  <calcite-shell>
    <calcite-navigation slot="header">
      <calcite-navigation-logo slot="logo" heading="Building Explorer"></calcite-navigation-logo>
    </calcite-navigation>

    <calcite-shell-panel slot="panel-start">
      <calcite-panel heading="Building">
        <arcgis-building-explorer reference-element="sceneView"></arcgis-building-explorer>
      </calcite-panel>
    </calcite-shell-panel>

    <arcgis-scene id="sceneView">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-scale-bar slot="bottom-left"></arcgis-scale-bar>
    </arcgis-scene>
  </calcite-shell>

  <script type="module">
    import BuildingSceneLayer from "@arcgis/core/layers/BuildingSceneLayer.js";
    import Map from "@arcgis/core/Map.js";

    const sceneElement = document.querySelector("arcgis-scene");
    await sceneElement.viewOnReady();

    const buildingLayer = new BuildingSceneLayer({
      url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BSL__4326__United_States__NewYork__702702_702_Main/SceneServer"
    });

    sceneElement.map.add(buildingLayer);
  </script>
</body>
</html>

Indoor Mapping with Floor Filter and Track

<arcgis-map item-id="YOUR_FLOOR_AWARE_WEBMAP_ID">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-floor-filter slot="top-left"></arcgis-floor-filter>
  <arcgis-locate slot="top-left"></arcgis-locate>
  <arcgis-track slot="top-left"></arcgis-track>
  <arcgis-scale-bar slot="bottom-left"></arcgis-scale-bar>
</arcgis-map>

Navigation Widgets in 3D Scene

<arcgis-scene basemap="satellite">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-compass slot="top-left"></arcgis-compass>
  <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
  <arcgis-locate slot="top-left"></arcgis-locate>
  <arcgis-scale-bar slot="bottom-left"></arcgis-scale-bar>
</arcgis-scene>

Reference Samples

building-explorer - Exploring building scene layers
floor-filter - Indoor floor filtering
oriented-imagery - Oriented imagery viewer
track - GPS tracking widget
widgets-compass - Compass widget usage
widgets-scalebar - ScaleBar widget configuration
histogram-range-slider - Histogram range slider for filtering

Common Pitfalls

Track widget requires HTTPS: The Track and Locate widgets use the Geolocation API, which only works on HTTPS origins (or localhost). They will fail silently on HTTP.
FloorFilter needs floor-aware web map: The FloorFilter widget requires a web map configured with floor-aware data including facility and level information. A standard web map without floor plan data will not display anything.
BuildingExplorer only works with BuildingSceneLayer in SceneView: BuildingExplorer requires both a 3D SceneView (not MapView) and at least one BuildingSceneLayer in the map. It will not work with other layer types or in 2D.
HistogramRangeSlider needs properly configured bins array: The bins property must be an array of objects with minValue, maxValue, and count properties. Use the smartMapping/statistics/histogram module to generate valid bins from layer data.
Missing reference-element attribute on components: When placing advanced widget components outside their parent map or scene element (e.g., in a Calcite side panel), you must set the reference-element attribute to the ID of the map/scene element. Without it, the widget cannot connect to the view.

Repository: SaschaBrunnerCH/arcgis-maps-sdk-js-ai-context
Commit: d84407b

Last updated: 1 day ago
Created: 1 day ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.