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

タグ付きの投稿をもっと見る

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!

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

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