nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Changing the map_zoom_slider to the esriSimpleSlider

AndrewRae

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

Vind meer berichten getagd met

Accepted answers

All comments

RonMiller

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]

derekswingley1

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?

AndrewRae

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

RonMiller

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 };

AndrewRae

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

JörgPossin

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

JoanneMcGraw

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

Duarte_Carreira

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.

sytsedevries_0-1641888910353.png

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.