topic Re: building custom zoom buttons for a basemap gallery in ArcGIS JavaScript Maps SDK Questions

building custom zoom buttons for a basemap gallery

PaulJereb — Tue, 13 Dec 2011 19:54:21 GMT

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

Re: building custom zoom buttons for a basemap gallery

KellyHutchins — Tue, 13 Dec 2011 21:42:05 GMT

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_navigation.html

Re: building custom zoom buttons for a basemap gallery

PaulJereb — Wed, 14 Dec 2011 16:17:12 GMT

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

Re: building custom zoom buttons for a basemap gallery

KellyHutchins — Wed, 14 Dec 2011 16:22:58 GMT

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?

Re: building custom zoom buttons for a basemap gallery

PaulJereb — Wed, 14 Dec 2011 19:06:14 GMT

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

Re: building custom zoom buttons for a basemap gallery

KellyHutchins — Sun, 12 Dec 2021 01:43:48 GMT

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>

Re: building custom zoom buttons for a basemap gallery

PaulJereb — Thu, 15 Dec 2011 04:47:58 GMT

PERFECT!
Thank you, Kelly!