Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.



  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  ArcGIS API for JavaScript,
  For more information about the layers-scenelayer-filter-query sample, read the original sample description at
    SceneLayer filter and query | Sample | ArcGIS API for JavaScript 4.16
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;

    #optionsDiv {
      width: 250px;
      padding: 0 12px 0 12px;
      background-color: white;
      padding: 10px;

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

    ], function(WebScene, SceneView, Legend, LayerList) {
      // load web scene from ArcGIS Online
      var webScene = new WebScene({
        portalItem: {
          // autocasts as new PortalItem()
          id: "b1f8fb3b2fd14cc2a78728de108776b0"
      // create the scene view
      var view = new SceneView({
        container: "viewDiv",
        map: webScene,
        environment: {
          lighting: {
            directShadowsEnabled: true
      webScene.when(function() {
        // the field containing the building is different for each layer
        // buildingQuery defines the query corresponding to each layer in the web scene
        var buildingQuery = {
          "Building Wireframe": "BUILDINGID = 'Q'",
          "Interior Space": "BUILDING = 'Q'",
          Walls: "BUILDINGKEY = 'Q'",
          Doors: "BUILDINGKEY = 'Q'"
        // filter all layers in the web scene to contain only building Q
        webScene.layers.forEach(function(layer) {
          layer.definitionExpression = buildingQuery[layer.title];
        // we will use the Interior Space layer many times, so we'll save it in a variable
        var officeLayer = webScene.layers.find(function(l) {
          return l.title === "Interior Space";
        // the data set displays many types of offices, but below are the ones we want to display
        var officeTypes = [
          "Conference Room",
          "Office Cubicle"
        // function that calculates how many office types are currently shown and displays this in the legend
        function displayOfficeTypes() {
          // create the query on the officeLayer so that it respects its definitionExpression
          var query = officeLayer.createQuery();
          query.outFields = ["SPACETYPE"];
          // query the officeLayer to calculate how many offices are from each type
          officeLayer.queryFeatures(query).then(function(results) {
            var typesCounter = {}; // counter for the office types defined in the officeTypes array
            var othersCounter = 0; // counter for all the other office types
            // count the types of all the features returned from the query
            results.features.forEach(function(feature) {
              var spaceType = feature.attributes.SPACETYPE;
              if (typesCounter[spaceType]) {
              } else {
                typesCounter[spaceType] = 1;
              if (officeTypes.indexOf(spaceType) === -1) {
            // to set the results in the legend, we need to modify the labels in the renderer
            var newRenderer = officeLayer.renderer.clone();
            officeTypes.forEach(function(value, i) {
              newRenderer.uniqueValueInfos[i].label =
                value + ": " + (typesCounter[value] || 0) + " rooms";
            newRenderer.defaultLabel =
              "Other types: " + othersCounter + " rooms";
            officeLayer.renderer = newRenderer;
        // call the method to display the counts from each office type in the legend
        // function that will filter by the selected floor
        function showFloors(event) {
          // retrieve the query stored in the selected value
          var floorQuery =;
          // update the definition expression of all layers except the wireframe layer
          webScene.layers.forEach(function(layer) {
            if (layer.title !== "Building Wireframe") {
              layer.definitionExpression =
                buildingQuery[layer.title] + " AND " + floorQuery;
          // after the layers were filtered recalculate the counts of each office type
          .addEventListener("change", showFloors);
        // add a legend for the officeLayer
        var legend = new Legend({
          view: view,
          layerInfos: [{
            layer: officeLayer,
            title: " "
        view.ui.add(legend, "bottom-right");
        // Add a layer list to enable and disable the building wireframe
        var layerList = new LayerList({
          view: view,
          container: document.getElementById("layerListCustom")
      view.ui.add(document.getElementById("optionsDiv"), {
        position: "top-left",
        index: 0
      view.ui.add(document.getElementById("layerListDiv"), {
        position: "top-right",
        index: 0
    function filterLayerList1(){
         var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("lname");
        filter = input.value.toUpperCase();
        ul = document.getElementsByTagName('ul')[0];  
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
             a = li[i];
            txtValue = a.innerText;  
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";

  <div id="viewDiv"></div>
  <div id="layerListDiv" style="border: 5px outset black; background-color: gray;">
    <div id="searchLyrList">
      <!--h1> Search for layer to filter</h1-->
      <input type="text" id="lname" onkeyup="filterLayerList1();" name="layername" placeholder="Search for layer name.." style="width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;">
    <div id="layerListCustom">

  <div id="optionsDiv" class="esri-widget">
      <b>Filter building by floor:</b>
      <select id="floorSelect">
        <option value="1=1">All</option>
        <option value="FLOOR = '1'">1</option>
        <option value="FLOOR = '2'">2</option>
        <option value="FLOOR = '3'">3</option>