Community
Select to view content in your preferred language

Change Zoom Slider Labels

599
3
03-01-2012 05:38 PM
RussellFoster
by
New Contributor
‎03-01-2012 05:38 PM
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
0 Kudos
3 Replies
HemingZhu
by
Frequent Contributor
‎03-02-2012 12:46 PM
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.
0 Kudos
RussellFoster
by
New Contributor
‎03-13-2012 03:43 PM
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!
0 Kudos
StephenLead
by
Honored Contributor
‎03-13-2012 07:42 PM
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!
0 Kudos