topic Re: Changing the map_zoom_slider to the esriSimpleSlider in ArcGIS JavaScript Maps SDK Questions

Changing the map_zoom_slider to the esriSimpleSlider

AndrewRae — Mon, 23 Apr 2012 21:34:26 GMT

Hi all
Maybe this is a bit of a newbie question but...
I would like to change the default map_zoom_slider to the esriSimpleSlider which is the default in compact javascript library.
I need to use the standard library as I am uses image services in my application (they do not appear to be supported using the compact JavaScript library).
I am hoping t should be easy to do.

Thanks

Andy Rae

Re: Changing the map_zoom_slider to the esriSimpleSlider

RonMiller — Tue, 24 Apr 2012 05:27:58 GMT

This gives you the little up-down little zoom icon instead of the long, ticked slider:

[INDENT]map = new esri.Map("map",{extent:initExtent, slider: true, sliderStyle: "small"});[/INDENT]

Re: Changing the map_zoom_slider to the esriSimpleSlider

derekswingley1 — Tue, 24 Apr 2012 15:07:07 GMT

This gives you the little up-down little zoom icon instead of the long, ticked slider:
map = new esri.Map("map",{extent:initExtent, slider: true, sliderStyle: "small"});

That's does it.

rmill�?? where did you find info on sliderStyle?

Re: Changing the map_zoom_slider to the esriSimpleSlider

AndrewRae — Tue, 24 Apr 2012 23:07:52 GMT

Thanks rmill
Wonderful this looks as if it will do the trick.
I found an example of the code in the following code sample.

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/map_resize.html

This example uses the full javascript library instead of the compact one unlike the other examples using the small sliderstyle.
I am not sure how well documented it is.

Thanks

Andy Rae

Re: Changing the map_zoom_slider to the esriSimpleSlider

RonMiller — Wed, 25 Apr 2012 02:30:44 GMT

That's does it.

rmill�?? where did you find info on sliderStyle?

I just saw the small zoom slider in another JSAPI sample and looked through the code, as Andy did.

Now, the next question is how to control the location - to move it away from the upper LH corner.

It doesn't seem to respond to the standard slider settings:

esriConfig.defaults.map.slider = { right:"10px", bottom:"10px", width:"200px", height:null };

Re: Changing the map_zoom_slider to the esriSimpleSlider

AndrewRae — Wed, 25 Apr 2012 20:05:03 GMT

I think the reason you cannot alter the position the normal way is that it is implemented using different classes.
When you inspect the element with fire bug you will get the following code with the small slider.

<div id="mapDiv_zoom_slider" class="esriSimpleSlider esriSimpleSliderVertical" style="z-index: 30;">

Compare this with the first line of the default slider. Which is set up within a table and uses another set of classes

<table id="map_Div_zoom_slider" class="dijit dijitReset dijitSlider

You maybe able to alter the location by changing the style for the esriSimpleSlider with css.
My knowledge of css is not crash hot so I maybe wrong.

Andy Rae

Re: Changing the map_zoom_slider to the esriSimpleSlider

JörgPossin — Wed, 18 Jul 2012 11:21:40 GMT

It doesn't seem to respond to the standard slider settings:
esriConfig.defaults.map.slider = { right:"10px", bottom:"10px", width:"200px", height:null };

Hi! I am wondering why nobody else have these problems with the slider. I also want to change the look but I can not find information about the sliderstyle except these line of code which does not work 😞 Did you solve the problem and what did you do?

regards,
Jörg

Re: Changing the map_zoom_slider to the esriSimpleSlider

JoanneMcGraw — Sat, 11 Dec 2021 16:46:51 GMT

I didn't actually try the specific code that rmill65 and Jörg reference. That is, I did not try to replace the entire associative array for the slider in the defaults, but I'll throw a couple of possibilities why it didn't work out there...perhaps because some necessary properties like position and z-index aren't there or the height is set to null it's just ignoring the array as invalid and falling back to its own internal default -OR- the code is trying to change the defaults after instantiating the map. I don't really know.

What I do know is that code as below (before instantiating the map), moves the zoom bar's location appropriately:

esriConfig.defaults.map.slider.top = "50px";
esriConfig.defaults.map.slider.left = "20px";
map = new esri.Map(
         "map"
         ,{
             wrapAround180:true
             ,extent:initExtent
         }
     );

Hope this helps to anyone else looking for the same type of info.

Cheers
jtm

Re: Changing the map_zoom_slider to the esriSimpleSlider

DuarteCarreira — Fri, 24 Aug 2012 13:34:04 GMT

Hi all.

My question is about doing the reverse: how to have the "default" zoom slider using the compact build?

My understanding was that using the compact build one could add missing functionality with additional dojo.require...

Any tips?

Thanks.