nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

All comments

khutchins

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

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

khutchins

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

khutchins

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!

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.