button for marker and decorators

[Zubair-KPM]

Hi, i am working on a button where i want add a functionality that whenever a click the button it should should me up a marker categories like computer, laptop and soon. When i click to it like suppose if i click to laptop the laptop marker and decorator should hide.

i have written a button code but and not able to write it further so can any help?

Button code:

import React, { useState } from "react";
import {
  CommandItemDef,
  StageUsage,
  ToolbarHelper,
  ToolbarItem,
  ToolbarOrientation,
  ToolbarUsage,
  UiItemsProvider,
} from "@itwin/appui-react";
import { toaster } from "@itwin/itwinui-react";

import { IModelApp } from "@itwin/core-frontend";

export class ToggleButtonProvider implements UiItemsProvider {
  public readonly id = "ToggleButtonProvider";

  private displayInfoToast = (message: string) => {
    toaster.setSettings({
      placement: "top-end",
      order: "ascending",
    });

    toaster.informational(message, {
      duration: 3000,
    });
  };

  private handleOptionSelection = (option: string) => {
    // Handle the selected option
    this.displayInfoToast(`${option} is selected`);
  };

  private handleButtonClick = () => {
    // Show options when the button is clicked
    const options = ["laptop", "computer", "light", "outdoor units"];
    const message = "Please select an option:";
    const selectedOption = window.prompt(message, options[0]);
    if (selectedOption) {
      this.handleOptionSelection(selectedOption);
    }
  };

  public provideToolbarItems(
    _stageId: string,
    stageUsage: string,
    toolbarUsage: ToolbarUsage,
    toolbarOrientation: ToolbarOrientation
  ): ToolbarItem[] {
    if (
      stageUsage === StageUsage.General &&
      toolbarUsage === ToolbarUsage.ContentManipulation &&
      toolbarOrientation === ToolbarOrientation.Horizontal
    ) {
      const toolbarItem = ToolbarHelper.createToolbarItemFromItemDef(
        1000,
        new CommandItemDef({
          commandId: "Toggle marker visibility",
          iconSpec: "icon-placeholder",
          label: "Toggle Marker",
          execute: () => this.handleButtonClick(),
        })
      );

      return [toolbarItem];
    }
    return [];
  }
}

Decorators code:

import { QueryRowFormat } from "@itwin/core-common";
import { DecorateContext, Decorator, IModelConnection, Marker, ScreenViewport } from "@itwin/core-frontend";

import { kPM_SmartDeviceMarker } from "../markers/KPM_SmartDeviceMarker";


export class kPM_SmartDeviceDecorator implements Decorator {
  private _iModel: IModelConnection;
  private _markerSet: Marker[];

  constructor(vp: ScreenViewport) {
    this._iModel = vp.iModel;
    this._markerSet = [];

    this.addMarkers();
  }

  private async getSmartDeviceData() {
    const query = `
    SELECT kPM_SmartDevice_ID,
           kPM_SmartDevice_Type,
              Origin
              FROM RevitDynamic.Computer_Mouse_CPU
              WHERE Origin IS NOT NULL

    UNION

    SELECT KPM_SmartDevice_ID,
           KPM_SmartDevice_Type,
              Origin
              FROM RevitDynamic.Laptop
              WHERE Origin IS NOT NULL

    UNION

    SELECT kPM_SmartDevice_ID,
           kPM_SmartDevice_Type,
              Origin
              FROM RevitDynamic.Suspended_Light
              WHERE Origin IS NOT NULL

    UNION

    SELECT kPM_SmartDevice_ID,
           kPM_SmartDevice_Type,
              Origin
              FROM RevitDynamic.Split_System_Outdoor_Carrier_Single_Phase_075_3_ton
              WHERE Origin IS NOT NULL

    UNION

    SELECT kPM_SmartDevice_ID,
           kPM_SmartDevice_Type,
              Origin
              FROM RevitDynamic.Suspended_Light_PLHM09188
              WHERE Origin IS NOT NULL

    UNION

    SELECT kPM_SmartDevice_ID,
           kPM_SmartDevice_Type,
              Origin
              FROM RevitDynamic.Lighting_Pendants_Suspended
              WHERE Origin IS NOT NULL;
    `;
    const results = this._iModel.query(query, undefined, { rowFormat: QueryRowFormat.UseJsPropertyNames });
    const values = [];

    for await (const row of results)
      values.push(row);

    return values;
  }

  private async addMarkers() {
    const values = await this.getSmartDeviceData();

    values.forEach(value => {
        const smartDeviceMarker = new kPM_SmartDeviceMarker(
        { x: value.origin.x, y: value.origin.y, z: value.origin.z },
        { x: 40, y: 40 },
        value.kPM_SmartDevice_ID,
        value.kPM_SmartDevice_Type

      );

      const htmlElement = document.createElement("div");
      htmlElement.innerHTML = `
      <h3 style="color: white">${value.kPM_SmartDevice_ID}</h3>
      `

      smartDeviceMarker.htmlElement = htmlElement;

      this._markerSet.push(smartDeviceMarker);
    })
  }

  public decorate(context: DecorateContext): void {
    this._markerSet.forEach(marker => {
      marker.addDecoration(context);
    })
  }
} 

Markers code:

import { XAndY, XYAndZ } from "@itwin/core-geometry";
import { Marker } from "@itwin/core-frontend";

export class kPM_SmartDeviceMarker extends Marker {
  static toolId(toolId: any, _manuallyAddMarker: any) {
    throw new Error("Method not implemented.");
  }
  private kPM_SmartDevice_ID: string;
  private kPM_SmartDevice_Type: string;

  constructor(location: XYAndZ, size: XAndY, kPM_SmartDevice_ID: string, kPM_SmartDevice_Type: string) {
    super(location, size);

    this.kPM_SmartDevice_ID = kPM_SmartDevice_ID;
    this.kPM_SmartDevice_Type = kPM_SmartDevice_Type;

    this.setImageUrl(`/${this.kPM_SmartDevice_Type}.png`);
  }
} 

[smmr-dn]

Hi, thank you for your question. Have you taken a look at the Intro to iTwins Course. We included several tutorials for different options to deal with markers. There is also one talking about toggling display using the button as well.
https://developer.bentley.com/learning/courses/intro-to-itwinplatform/chapter-7-specialized-markers/lesson-3/

[Zubair-KPM]

the given link is look like this

[pmconne]

I edited @smmr-dn's post to fix the link - please try again.

Please consider updating your question to specify what you expect to happen vs what is actually happening.

[Zubair-KPM]

Hi, actually iam looking to make a button where i can able to on and off the marker and even category-wise like if i want to disable the desktop icons i can do only that and other marker will remain enable for my itwin web App.

Kindly help will be appreciated! Thanks

[Zubair-KPM]

The link you edited is also not working!