Imagery With Dojo Horizontal slider

[HushamMohamed1]

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

[RobertScheitlin__GISP · Accepted solution]

Husham,

   Try this:

define(['dojo/_base/declare',
    'dojo/on',
    'dojo/_base/lang',
    'dojo/dom-construct',
    'esri/layers/ArcGISImageServiceLayer',
    'dijit/form/HorizontalRule',
    'dijit/form/HorizontalRuleLabels',
    'dijit/form/HorizontalSlider',
    'dijit/_WidgetsInTemplateMixin',
    'jimu/BaseWidget'],
  function(
    declare,
    on,
    lang,
    domConstruct,
    ArcGISImageServiceLayer,
    HorizontalRule,
    HorizontalRuleLabels,
    HorizontalSlider,
    _WidgetsInTemplateMixin,
    BaseWidget) {
    //To create a widget, you need to derive from BaseWidget.
    return declare([BaseWidget, _WidgetsInTemplateMixin], {
      baseClass: 'widget-imageryslider',
      name: 'ImagerySlider',
      air2011: null,
      air2015: null,

      postCreate: function() {
        this.inherited(arguments);
      },

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

        this.air2011 = new ArcGISImageServiceLayer("http://mydomain.com/arcgis/rest/services/Aerials/Aerial2001/ImageServer", {
          id: "Aerials 2001",
          visible: true
        });
        this.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({
          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: lang.hitch(this, function(value) {
            if(value == 0) {
              console.log(value);
              this.map.removeLayer(this.air2015);
              this.map.addLayer(this.air2011);
            } else if(value == 1.5) {
              console.log(value);
              this.map.removeLayer(this.air2011);
              this.map.addLayer(this.air2015);
            }
          })
        }, "slider");

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

      onOpen: function() {
        if(!this.map.getLayer("Aerials 2015")){
          this.map.addLayer(this.air2015);
        }
      },

      onClose: function() {
        if(!this.map.getLayer("Aerials 2001")){
          this.map.removeLayer(this.air2011);
        }
        if(this.map.getLayer("Aerials 2015")){
          this.map.removeLayer(this.air2015);
        }
      }
    });
  });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[HushamMohamed1]

Thank you Robert,

I came up with the same solution except onOpen  and onClose,  its more clean than mine...

Thank you so much

[HushamMohamed1]

Hi Robert,

its all about the variable scope right?

[RobertScheitlin__GISP]

Correct

[HushamMohamed1]

Thank you Again,  its Working Perfect Now.. after little modification..

If I need to convert this widget to a configurable widget what do I need, if you can direct me to steps or sample.

Thanks

[RobertScheitlin__GISP]

There is not a real good guide or source for that. You just need to look at a simple out of the box esri widget for coding guidance.

[HushamMohamed1]

Still need to fix the initial slider value to 4 when we open the widget for the second time without refreshing the page.

Thanks

[RobertScheitlin__GISP]

Just move the slider var to a global like air2015 and then do

this.slider.value = 4;