AnsweredAssumed Answered

Imagery With Dojo Horizontal slider

Question asked by hamadtou80 on Dec 1, 2017
Latest reply on Dec 6, 2017 by rscheitlin

Hi,   I create  an new widget based on the demo template,  to make Imagery slider widget.

So far its working fine and the widget serve only 2 imagery I will add more to the slider later..  Now  I need to accomplish following task with the slider. I do appreciate any help on that.

1- When opening the widget I Need certain imagery year 2015 to be added.

2- When closing the widget I need to remove all the imagery from the map..

3-  How can to Style the height of the slider.

here is my slider code  in startup function.

   startup: function() {
        this.inherited(arguments);
        //this.mapIdNode.innerHTML = this.map.id;
map=this.map;
          var air2011= new ArcGISImageServiceLayer("http://mydomain.com/arcgis/rest/services/Aerials/Aerial2001/ImageServer" ,{ id: "Aerials 2001", visible: true });
                var air2015= new ArcGISImageServiceLayer("http://mydomain.com/arcgis/rest/services/aerials/Aerials2015/ImageServer", { id: "Aerials 2015", visible: true });
         // Create the rules
                 var rulesNode = domConstruct.create("div", {}, dom.byId("slider"), "first");
                this.sliderRules = new HorizontalRule({
                   // container: "topDecoration",
                    count: 11,
                    style: "width: 5px; "
                }, rulesNode);

                // Create the labels
                var labelsNode = domConstruct.create("div", {}, dom.byId("slider"), "first");
                this.sliderLabels = new HorizontalRuleLabels({
                    //container: "topDecoration",
                    labels:["2013","2015","2016"],
                    labelStyle: "font-size: 15px;"
                }, labelsNode);



                  //create the slider
                  var slider = new HorizontalSlider({
         name: "slider",
         id: "slider",
         value: 0,
         minimum: 0,
         maximum: 3,
         discreteValues: 3,
         intermediateChanges: false,
         style: "height:10px; width: auto; color:red;",
          onChange: function(value) {
             //console.log(value);
           // var sliderValue = dom.byId("vertSlider");

    if(value == 0){
         console.log(value);
        map.removeLayer(air2015);           
        map.addLayer(air2011);

    }else if(value == 1.5){
         console.log(value);
        map.removeLayer(air2011);
        map.addLayer(air2015);
   
    }
}
     },     "slider");

                // Start up the widgets
                slider.startup();
                sliderRules.startup();
                sliderLabels.startup();
        console.log('startup');
       },

       onOpen: function(){
         console.log('onOpen');
       },

       onClose: function(){
            this.inherited(arguments);

     
        console.log('onClose');
       }

Outcomes