Set Zoom in and Zoom Out on map

[rsharma]

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.

[AnneFitz · Accepted solution]

Hi Rajni,

You can use the default zoom widget, but set the layout: "horizontal", and then add it to the bottom-right, like this:

var view = new MapView({
   container: "viewDiv",
   map: map,
   ui: {
      components: ["attribution"] // removes default widgets except for attribution
   }
});
        
var zoom = new Zoom({
   view: view,
   layout: "horizontal"
});
view.ui.add(zoom, "bottom-right");‍‍‍‍‍‍‍‍‍‍‍‍‍

[rsharma]

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");

}

[RobertScheitlin__GISP]

Rajni,

  Did you add the obvious one? "esri/widgets/Zoom"

[rsharma]

No

[rsharma]

Hi sir,

I tried the same and it still not working and blocked to display my other buttons also

[RobertScheitlin__GISP]

Rajni,

  That means you have a error in how you added it to your requires array. I added it to my sample of your code without any issue.