topic Re: Change Zoom Slider Labels in ArcGIS JavaScript Maps SDK Questions

Change Zoom Slider Labels

RussellFoster — Fri, 02 Mar 2012 01:38:38 GMT

Hi,
I have seen lot's of information on changing the zoom slider using the esri default methods, but I'm looking to do something different and can't see from the API how I should do it. I have several hierachies of boundaries that I want to display. The user selects which Hierarchy from a drop down box. At various zoom levels only a given layer in that hierachy is displayed. For example if the zoom level is 0 to 5 show state borders, when a bit lower show local givernment borders, etc etc. What I can't see how to do is update the zoom slider labels. I can set them before I create the map, but can't see how to change them on the fly afterwards, as the user changes which hierarchy they are looking at. I want to have the labels represent which boundaries are visible at a given zoom level. Does anyone know if this is possible? If so could you show me which object.method(newLabelInfo) to use?
Thanks

Re: Change Zoom Slider Labels

HemingZhu — Fri, 02 Mar 2012 20:46:31 GMT

Hi,
I have seen lot's of information on changing the zoom slider using the esri default methods, but I'm looking to do something different and can't see from the API how I should do it. I have several hierachies of boundaries that I want to display. The user selects which Hierarchy from a drop down box. At various zoom levels only a given layer in that hierachy is displayed. For example if the zoom level is 0 to 5 show state borders, when a bit lower show local givernment borders, etc etc. What I can't see how to do is update the zoom slider labels. I can set them before I create the map, but can't see how to change them on the fly afterwards, as the user changes which hierarchy they are looking at. I want to have the labels represent which boundaries are visible at a given zoom level. Does anyone know if this is possible? If so could you show me which object.method(newLabelInfo) to use?
Thanks

You could build your own zoom slider using dijit.form.slider and tie with the zoom level. Though i have not built it myself, i have use it to tie with the layer's transparency. I think the principle is the same.

Re: Change Zoom Slider Labels

RussellFoster — Sat, 11 Dec 2021 09:04:20 GMT

Hi All, I used hzhu's idea and it worked a treat. For anyone else wanting to know how, below is an incomplete code snippet. I have ripped out the unimportant text from the labels leaving only the tags. The idea is that the labels are divisions that remain hidden until I want one to be displayed, so when I change from one hierarchy to the other I just make the label I want to show visible (DISPLAY:block) and the rest invisible (DISPLAY:none).

<div id="map" dojotype="dijit.layout.ContentPane" region="center">
 <!-- Zoom slider -->
 <div id="zoomSliderBar" style="position:absolute;left:30px;top:20px;z-index:50;height:250px" 
  dojotype="dijit.form.VerticalSlider" value="3" minimum="0" maximum="15" showbuttons="true" 
  intermediatechanges="false" discreteValues="16" pageIncrement="16" onchange="zoomSliderChanged()">
 </div>
 <!-- Tick marks for zoom slider -->
 <div dojotype="dijit.form.VerticalRule" container="rightDecoration" count="16" style="position:absolute;left:0px;top:0px;width:5px;height:250px;margin:42px 45px;z-index:50"></div>
 <!-- labels for zoom slider -->
 <div id="labelHier0" dojotype="dijit.form.VerticalRuleLabels" container="rightDecoration" style="position:absolute;left:0px;top:0px;font-size:75%;color:red;height:250px;margin:43px 55px;z-index:50;DISPLAY:block">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </div>
 <div id="labelHier1" dojotype="dijit.form.VerticalRuleLabels" container="rightDecoration" style="position:absolute;left:0px;top:0px;font-size:75%;color:red;height:250px;margin:43px 55px;z-index:50;DISPLAY:none">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </div>
 <div id="labelHier2" dojotype="dijit.form.VerticalRuleLabels" container="rightDecoration" style="position:absolute;left:0px;top:0px;font-size:75%;color:red;height:250px;margin:43px 55px;z-index:50;DISPLAY:none">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </div>
 <div id="labelHier3" dojotype="dijit.form.VerticalRuleLabels" container="rightDecoration" style="position:absolute;left:0px;top:0px;font-size:75%;color:red;height:250px;margin:43px 55px;z-index:50;DISPLAY:none">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </div>
 <div id="labelHier4" dojotype="dijit.form.VerticalRuleLabels" container="rightDecoration" style="position:absolute;left:0px;top:0px;font-size:75%;color:red;height:250px;margin:43px 55px;z-index:50;DISPLAY:none">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </div>
 <div id="labelHier5" dojotype="dijit.form.VerticalRuleLabels" container="rightDecoration" style="position:absolute;left:0px;top:0px;font-size:75%;color:red;height:250px;margin:43px 55px;z-index:50;DISPLAY:none">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </div>
 <span id="info" style="position:absolute;left:500px;bottom:20px;color:#000;z-index:50;"></span>
</div>

Thanks for all your help guys!

Re: Change Zoom Slider Labels

StephenLead — Wed, 14 Mar 2012 02:42:32 GMT

Do you have a link to an online version we could play with? Failing that can you add some screenshots?

It's always good to get inspiration on cool map interfaces!