1

I tried to query and select my 3D buildings related to their names or heights and can achieve the selection but I want to highlight selected ones. How can I do that?

Or is there any better way to select them?

JavaScript code:

    document.getElementById("first").addEventListener("click", function (event) {
      extrudedBuildings.definitionExpression = "Tipi = 'Mühendislik'";    
    });
    document.getElementById("second").addEventListener("click", function (event) {
      extrudedBuildings.definitionExpression = "Tipi = 'Özel'";
    });
    document.getElementById("third").addEventListener("click", function (event) {
      extrudedBuildings.definitionExpression = "Tipi = 'İİBF'";
    });
    document.getElementById("fourth").addEventListener("click", function (event) {
      extrudedBuildings.definitionExpression = "Tipi = 'Resmi'";
    });
    document.getElementById("fifth").addEventListener("click", function (event) {
      extrudedBuildings.definitionExpression = "Tipi = 'Rektörlük'";
    });
    document.getElementById("sixth").addEventListener("click", function (event) {
      extrudedBuildings.definitionExpression = "Tipi = 'Yemekhane'";
    });
    document.getElementById("seventh").addEventListener("click", function (event) {
      extrudedBuildings.definitionExpression = "Tipi = 'Kütüphane'";
    });

HTML Code:

          <div id="topbar_4">

            <button id="first" class="esri-button  esri-button--primary">Mühendislik Binaları</button>
            <button id="second" class="esri-button  esri-button--secondary">Özel Binalar</button>
            <button id="third" class="esri-button  esri-button--primary">İİBF </button>
            <button id="fourth" class="esri-button  esri-button--secondary">Resmi Binalar</button>
            <button id="fifth" class="esri-button  esri-button--primary">Rektörlük </button>
            <button id="sixth" class="esri-button  esri-button--secondary">Yemekhane </button>
            <button id="seventh" class="esri-button  esri-button--primary">Kütüphane </button>
            <table width="100%">

1 Answer 1

1

Set the value attribute and use that in the definition query and add in a common class. You can then query all the buttons to add listeners to them in a loop using that common class and use the value in the definition expression.

HTML

<button id="first" class="esri-button  esri-button--primary  definitionExpression" value="Mühendislik Binaları">Mühendislik Binaları</button>
<button id="second" class="esri-button  esri-button--secondary  definitionExpression" value="Özel Binalar" >Özel Binalar</button>
<button id="third" class="esri-button  esri-button--primary  definitionExpression" value="İİBF">İİBF </button>

Javascript

document.querySelectorAll('.definitionExpression').forEach(item => {
  item.addEventListener('click', event => {
    extrudedBuildings.definitionExpression = `Tipi = '${event.target.value}'`;
  })
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.