Zoom control position change to right

2914
1
10-15-2015 01:40 AM
JulieBiju
Occasional Contributor

Thank U.

How to change the zoom control to Right at button click?

When click language1 button , need zoom control on the left side of the map.

When click language2 button , need zoom control on the right side of the map.

Is it possible to do so???

#mapDiv {

    padding: 0;

    margin: 0;

    height: 100%;

    z-index: -1;

    -moz-border-radius: 4px;

    overflow: hidden;

    }

<div id="mapDiv" runat ="server"dojotype="dijit/layout/ContentPane" region="center" style="border:1px solid #000; visibility: hidden;">

<img id="loadingImg" runat ="server" src="images/rotating globe 1.gif" style="position:absolute; right:512px; top:290px; z-index:100; width: 70px; height: 70px;" />

<div   runat ="server" id="BingDiv" style="position:absolute; right:50px; top:100px; z-Index:99;">

<button id="dropdownButton"  label="Map List"  data-dojo-type="dijit/form/DropDownButton" style="display: none;">

<div data-dojo-type="dijit.Menu" id="bingMenu">

<!--The menu items are dynamically created using the basemap gallery layers-->

</div>

</button>

</div>

</div>

0 Kudos
1 Reply
TyroneBiggums
Occasional Contributor III

You want to change map sliderPosition: "top-right" in your map definition if you want to start with language2. This was added in v3.3.


To toggle the position, you could hack the css classNames being used by Esri onclick of your buttons.

This will remove the top left class name and replace it with top right.

document.getElementById("map_zoom_slider").className = document.getElementById("map_zoom_slider").className.replace(/\esriSimpleSliderTL\b/,'');

document.getElementById("map_zoom_slider").className += " esriSimpleSliderTR";

Above, sliderPosition: 'top-right' is causing the top right classname esriSimpleSliderTR to render. So, take that into consideration when you are toggling left and right.