topic Re: Extrude: changing building footprint height using slider in ArcGIS JavaScript Maps SDK Questions

Extrude: changing building footprint height using slider

Anonymous User — Wed, 15 Feb 2017 23:02:58 GMT

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?

Re: Extrude: changing building footprint height using slider

FC_Basson — Fri, 10 Dec 2021 20:08:02 GMT

Your building footprint will be based on a defition query, so in the slider's onchange event you must get the slider value and apply it to the building feature layer definition query

Something like this:

onChange: function(value){
  dom.byId("sliderValue").value = number.format(value, {places:0});
  buildingLayer.definitionExpression = "ELEVATION > " + value.toString();
}‍‍‍‍

where ELEVATION is the feature layer attribute field indicating the building height.

Re: Extrude: changing building footprint height using slider

Anonymous User — Fri, 10 Dec 2021 20:08:05 GMT

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;
          })
        }));
      }))
  },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Extrude: changing building footprint height using slider

FC_Basson — Fri, 17 Feb 2017 06:25:59 GMT

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.

Re: Extrude: changing building footprint height using slider

Anonymous User — Mon, 20 Feb 2017 22:15:53 GMT

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.