Hi i want to set zoom in and out button n bottom right corner horizontally to each other, i did trying it with css, but it do not work in responsive pages.
Any solution will be helpfull.
Hi Rajni,
You can use the default zoom widget, but set the layout: "horizontal", and then add it to the bottom-right, like this:
<SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN> ui<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> components<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"attribution"</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="comment token">// removes default widgets except for attribution</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> zoom <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Zoom</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN> layout<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"horizontal"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>zoom<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bottom-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Its not working, do i need to add in require something, it even stops my recentre button to display. and no button is shown on map
var view = new MapView({ map: webmap, container: "viewDiv", center: ['<?=$map_xy_coordinate['x']?>', '<?=$map_xy_coordinate['y']?>'], zoom: 15, ui: { components: ["attribution"] // removes default widgets except for attribution } });
view.when(function() { // Add the boundary polygon and new lot polygon graphics // create DOM object var recenterBtn = domConstruct.toDom("<div class='map-button esri-component esri-locate esri-widget--button esri-widget' role='button' title='Recenter'>RECENTRE<span aria-hidden='true' role='presentation'></span></div>"); var zoom = new Zoom({ view: view, layout: "horizontal" }); // add to view view.ui.add(recenterBtn, "bottom-right"); view.ui.add(zoom, "bottom-right");
}
Rajni,
Did you add the obvious one? "esri/widgets/Zoom"
No
Hi sir,
I tried the same and it still not working and blocked to display my other buttons also
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
