Extrude: changing building footprint height using slider

Question

How to seamlessly change a selected building footprint height (extrude) using HorizontalSlider?

Currently, my code works something like this:

Click a building -> change color of building and assign max height value (how tall the building can be) to slider and label

Use the horizontal slider to change height -> click back the selected building to change height (!!! this needs to be done by the slider).

I think something to do with slider onChange, but I am not sure...  How to change building footprint height using the slider?

Anonymous User · Answer

Thank you so much for your response!  It seems like there is no easy way to do so that I decided to use "submit" button.

FC_Basson · Answer

According to the base class dijit/form/HorizontalSlider documentation the widget only has an "onChange" event, so you have to release the the slider handle to fire the event.  If you use an <input type="range"> element as slider, you could use the "oninput" event as a listener for continuous value change while dragging the handle, but you loose all the fancy styling of the widget.

Anonymous User · Answer

Hi FC Basson,

Thank you so much for your response.  I tested your code and had a fun filtering buildings by height.  It is definitely good to remember!!

It seems my question wasn't clear enough. I would like to extrude the selected building seamlessly using slider input.  I included my code below this time (I am new to dojo/dijit so I am learning it as I go).  I think line 26 to 29 needs to be onChange event (while the slider is moving, keep render the renderer).  How can I achieve this?  I know attached code is a little too long for the post, but I hope this provides some ideas what I am trying to do.  I appreciate any of your input.

onOpen: function(){
      console.log('onOpen');
      var footprintL = this._startUpExtrude();
      var sliderUI = this._initSliderUI();

this._getFeatureLayerAttributes().then(lang.hitch(this, function(building){
        // Get the building footprint attributes
        var buildingData = building.attributes;
        var uniqueValueInfos = building.uniqueValueInfos; // PolygonSymbol3D/ExtrudeSymbol3DLayer
        
        // Click event
        this.sceneView.on('click', lang.hitch(this, function(event){
            this.sceneView.hitTest(event.screenPoint).then(function(res){
            var attributes = res.results[0].graphic.attributes; //OBJECTID & Building_Height
            
            //Update slider label to Z_Max ---> !!! See dijit Basics to see there is another way to do the same
            var zMaxLabel = number.format(buildingData[attributes.OBJECTID - 1].Z_Max, {places: 0});
            var last = dojo.query(".dijitRuleLabelContainer").last();
            last[0].textContent = zMaxLabel;
            
            //Update slider maximum value ---> !!! See dijit Basics to see there is another way to do the same
            zMaxNum = Number(zMaxLabel);
            sliderUI.slider.maximum = zMaxNum;
            
            // Change selected building height
            var symbol = new PolygonSymbol3D({
                symbolLayers: [new ExtrudeSymbol3DLayer({
                              size: Number(dom.byId("sliderValue").value),
                              material: { color: [255, 0, 0, 0.85] } })]
            });
            
            uniqueValueInfos[attributes.OBJECTID -1 ] = {value: attributes.OBJECTID, symbol:symbol};
            
            var renderer = new UniqueValueRenderer({
              field: "OBJECTID",
              uniqueValueInfos: uniqueValueInfos,
              visualVariables: [{ valueUnit: 'feet' }]
            });
            footprintL.renderer = renderer;
          })
        }));
      }))
  },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍