topic Re: Set Zoom in and Zoom Out on map in ArcGIS JavaScript Maps SDK Questions

Set Zoom in and Zoom Out on map

rsharma — Mon, 13 Apr 2020 12:07:47 GMT

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.

Re: Set Zoom in and Zoom Out on map

AnneFitz — Sat, 11 Dec 2021 06:25:37 GMT

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

Re: Set Zoom in and Zoom Out on map

rsharma — Tue, 14 Apr 2020 04:08:08 GMT

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

}

Re: Set Zoom in and Zoom Out on map

RobertScheitlin__GISP — Tue, 14 Apr 2020 12:39:24 GMT

Rajni,

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

Re: Set Zoom in and Zoom Out on map

rsharma — Tue, 14 Apr 2020 12:41:42 GMT

Re: Set Zoom in and Zoom Out on map

rsharma — Wed, 15 Apr 2020 04:07:01 GMT

Hi sir,

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

Re: Set Zoom in and Zoom Out on map

RobertScheitlin__GISP — Wed, 15 Apr 2020 12:53:46 GMT

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.