Dojo Slider to control tiled map services?

Question

am creating a web map to show Sea Level Rise in my County. I want to use a Slider for a user select the increment of Sea Level Change that wish to see.

I have been able to create Programatically create the Slider using:

var vertSlider = new VerticalSlider({
       minimum: 0,
       maximum: 10,
       discreteValues: 1,
       //value: 0,
       intermediateChanges: true,
       style: "height: 200px; width: 15px;",

       onChange: function (value) {
           dom.byId("sliderValue").value = value;
       }
       }, "vertSlider");

The maps layers are created with:

var layer1 = new ArcGISTiledMapServiceLayer("http://url");
var layer2 = new ArcGISTiledMapServiceLayer("http://url");
... and so on till 10 layers are added.

I need now to be able to pass the value of the slider to draw one of my map layers. So when the slider is moved from position 1 to 2, layer 1 would be turned off and 2 would display.

How would i do this using JS or the ESRI API? There are many examples using the TimeSlider, but those do not translate to the Dojo Slider.

Answer 1

In my application I use a function to set the opacity of a map layer using a Dojo slider. I am not sure if this is what you are trying to do but more context to the issue would be helpful. Are you trying to show the map layer when the slider is moved?

changeOpacity(op){
    var newOp = (op / 100);
    (YOU MAP LAYER).setOpacity(1.0 - newOp);
}

EDIT:

Try this:

onChange: function (value) {
    var sliderValue = dom.byId("sliderValue");
    if(sliderValue.value == 1){
        map.removeLayer(***YOUR LAYER 2***);            
        map.addLayer(***YOUR LAYER 1***);
    }else if(sliderValue.value == 2){
        map.removeLayer(***YOUR LAYER 1***);
        map.addLayer(***YOUR LAYER 2***);
    }
}

Not the most elegant code by it should work. You could also use a switch statement which would be better if there are more layers than just a few.

Answer 2

You would use that onChange event handler to instead of setting a value on the sliderValue domNode you would add or remove a tiled service from the esri.Map.

You would have to link the slider values to basemaps and you would addLayer and removeLayer basemap layers as necessary.

So you could add all of your basemaps to an array and link the slider values to the index of the basemap layers in the array. Then when one changed, remove the current layer and add the one from array[slider changed value]

var layers = [new ArcGISTiledMapServiceLayer("url"),
              new ArcGISTiledMapServiceLayer("url"),
              ...
             ];
var map = new Map(...);

If the slider has a default starting point, you would add layers[slider.startingPoint] the the map in the first index position. I'll assume 0.

Now layers[0] can be related to the slider's position 0.

Now you can use that relation...

var vertSlider = new VerticalSlider({
       minimum: 0,
       maximum: 10,
       discreteValues: 1,
       //value: 0,
       intermediateChanges: true,
       style: "height: 200px; width: 15px;",

       onChange: function (value) {
           //assume 0 is the 'base' map
           var currentVisibleLayer = map.getLayer(map.layerIds[0]);
           map.removeLayer(currentVisibleLayer);

           map.addLayer(layers[value]);
       }
}, "vertSlider");

Answer 3

I ended up using this answer rather than the array as it was so much simpler. I had to edit the Answer provided by Jeremy slightly, by changing the reference to the Slider from "sliderValue" to vertSlider.value" and instead of adding the layer in the IF ELSE statement, i merely showed it with, 'onChange: function (value) { //alert("working"); var sliderValue = dom.byId("sliderValue"); //alert("output" + vertSlider.value);

               if (vertSlider.value == 0) {
                   SLR_0ft.show();

               } else if (vertSlider.value == 1) {
                   SLR_1ft.show();
                   SLR_0ft.hide();
               }
           }'