2

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.

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.

  • Thanks for the response and sorry to be unclear. Yes, I would like the Slider to control the map layer that is displayed. In my example, as the user moves the slider from say 1 to 2, that would turn mapservice 1 off and mapservice 2 on. – BretW Mar 6 '14 at 16:52
  • I edited my answer – Jeremy Hamm Mar 6 '14 at 16:55
  • Thanks Jeremy - Logically what you have given me makes sense, and the code that is not elegant is so much easier to understand and implement. I am hitting a SyntaxError in my app code - but i will debug that. – BretW Mar 6 '14 at 17:57
1

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");
  • Hi Steve and thanks for the swift response. I am not looking to change level, nor change the base map. The Slider is to control which mapservice is displayed, in my example of a Sea Level Rise map the user would move the slider from say 1 to 2, which would result in mapservice 1 being turned off and mapservice 2 being turned on. Does that make better sense? – BretW Mar 6 '14 at 16:55
  • 1
    so you have one map service with 10 layers in it and depending on the slider value you want to set the visibility of that map service? You might consider updating your question with the architecture you are using for the app. – Steve Mar 6 '14 at 17:03
  • Yes, that's it, except they are individual map services as I needed to Cache them. I will edit my question to be clearer. – BretW Mar 6 '14 at 17:29
  • @BretW I updated my answer, do you follow along? – Steve Mar 6 '14 at 17:47
  • @Steve I like your solution much more elegant than what I was thinking. Adding the layers into an array will make selecting them much easier, well done! – Jeremy Hamm Mar 6 '14 at 17:55
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.