building custom zoom buttons for a basemap gallery

[PaulJereb]

Hello!

I'm using a basemap gallery with three maps (two static, one dynamic) in a mobile webapp.

How can I build custom zoom buttons?

I tried to find out what methods the built in buttons are using, without success and I also couldn't find anything in the API Reference...

BR Paul

[KellyHutchins]

One way to accomplish this would be to use the Navigation toolbar. Here's a link to a sample:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/toolbar_naviga...

[PaulJereb]

Thanks Kelly, that would be exactly what I need. I tried to add it to my project but it didn't work. Also when trying to zoom in/out using the buttons in the demo you posted nothing happens...

(I tested it with firefox, chrome and safari)

BR Paul

[KellyHutchins]

After clicking on the zoom buttons you'll need to draw a zoom extent on the map in order for the zoom action to occur.

You mentioned that it doesn't work in your project. Can you post code?

[PaulJereb]

ah ok, that explains a lot 😉 I'd need the zoom functionality for a mobile webapp (iOS), so it should zoom right on the click of the button. Like the built-in zoom-buttons in this sample:

http://help.arcgis.com/en/webapi/javascript/arcgis/demos/mobile/mobile_simplemap.html

[KellyHutchins]

Paul,

You could create zoom buttons that modify the map's extent. Something like this:

 <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){map.setExtent(map.extent.expand(0.5));}">Zoom In</div>
      <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){map.setExtent(map.extent.expand(2));}">Zoom Out</div>

[PaulJereb]

PERFECT!
Thank you, Kelly!