topic Re: Pan controls ArcGIS4 in ArcGIS JavaScript Maps SDK Questions

Pan controls ArcGIS4

azy141 — Mon, 25 Mar 2024 12:04:27 GMT

Hi I am looking to add pan controls in the form of arrows to an ArcGIS4 JS map but have been struggling to find the specific api to allow me to do this.

I was wondering if anyone had any input on how I could go about doing this?

Thank you

Re: Pan controls ArcGIS4

Egge-Jan_Pollé — Mon, 25 Mar 2024 12:22:44 GMT

Hi @azy141,

Can you please explain why you would want to add pan controls to your ArcGIS4 JS map? The reason I ask this, is because I think it is not necessary at all to add such controls to the user interface.

It is quite easy to pan the map - grabbing it with a left mouse click, using the arrow keys on your keyboard or just with your fingers on a mobile device.

So, the map is 'panable' by default. There is no need to add controls to activate a pan modus.

What is your opinion about this?

Cheers,

Egge-Jan

Re: Pan controls ArcGIS4

azy141 — Mon, 25 Mar 2024 12:41:59 GMT

I was given this assignment as we are looking at building controls that are easier to use for accessibility reasons.

Re: Pan controls ArcGIS4

Egge-Jan_Pollé — Mon, 25 Mar 2024 13:07:51 GMT

I think you will have to add your own buttons to the map, or actually to the view.ui, with a function to move the center of the map an X number of units to the N/E/S/W when the respective button is clicked.

I have never added pan buttons to the ui myself, but for some inspiration you may have a look at this example, where I do add a custom 'previous extent' and 'next extent' button to the user interface:

ArcGIS Maps SDK for JavaScript example: Previous a... - Esri Community

HTH,

Egge-Jan

Re: Pan controls ArcGIS4

Paco — Mon, 25 Mar 2024 16:10:24 GMT

Hi. I would assume you could just add some new html elements and change the MapView (view) by an x,y distance on each click.

Here I added custom zoom in/out buttons in a similar way-

document.getElementById("zoominbtn").addEventListener('click', function(){

console.log("zoom in")

var n= view.zoom + 1;

view.zoom = n

});

document.getElementById("zoomoutbtn").addEventListener('click', function(){

console.log("zoom out")

var n= view.zoom - 1;

view.zoom = n

});

Re: Pan controls ArcGIS4

ReneRubalcava — Mon, 25 Mar 2024 20:16:15 GMT

There is a DirectionalPad widget, it's not in the corners though, not sure if that would meet your needs

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-DirectionalPad.html

Re: Pan controls ArcGIS4

Egge-Jan_Pollé — Mon, 25 Mar 2024 21:06:54 GMT

Hi @ReneRubalcava,

Cool. Didn't know about this little widget. I did quickly create a small sample to test it (see code below) and it works fine. I do like this little compass indicating the orientation of the map (when not 0), allowing you to reset the map orientation (to 0).

Of course I cannot speak for the original poster, but I think this offers most of the functionality requested.

Here is my little sample:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS JavaScript with UK data - DirectionalPad</title> <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/css/main.css"> <script src="https://js.arcgis.com/4.29/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/Map", "esri/geometry/Point", "esri/views/MapView", "esri/widgets/DirectionalPad" ], function(Map, Point, MapView, DirectionalPad) { var map = new Map({ basemap: { portalItem: { id: "5b9d5ac7e17f402a9111f1ca2c22bf56" // GB Cartographic Local Names, hosted by EsriUKContent, see: https://www.arcgis.com/home/item.html?id=5b9d5ac7e17f402a9111f1ca2c22bf56 } } }); var view = new MapView({ spatialReference: 27700, container: "viewDiv", map: map, center: new Point({x: 500000, y: 500000, spatialReference: 27700}), zoom: 5 }); const directionalPad = new DirectionalPad({ view: view }); view.ui.add(directionalPad, "bottom-right"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

Cheers,

Egge-Jan

Re: Pan controls ArcGIS4

azy141 — Fri, 05 Apr 2024 13:26:38 GMT

This is perfect thank you

Re: Pan controls ArcGIS4

azy141 — Fri, 05 Apr 2024 13:27:10 GMT

Do you know how I could go about overriding the icons used in this d pad?

Re: Pan controls ArcGIS4

MatthewDriscoll — Fri, 05 Apr 2024 13:51:31 GMT

ESRI Icons

const directionalPad = new DirectionalPad({ view: view icon: "esri-icon-handle-horizontal", })

Re: Pan controls ArcGIS4

azy141 — Fri, 05 Apr 2024 13:51:02 GMT

That makes sense to me when using for a widget with only 1 icon but the d pad has 8 icons but only 1 instance of

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-DirectionalPad.html#icon

I don't quite understand how I would use this to override the north, east, south, west arrows etc?

Re: Pan controls ArcGIS4

MatthewDriscoll — Fri, 05 Apr 2024 14:13:00 GMT

I see. I think you are going to need to customize the calcite. I looked here, but cannot find which would be the best place to start.

Re: Pan controls ArcGIS4

MatthewDriscoll — Fri, 05 Apr 2024 15:15:13 GMT

Here is a example of changing the calcite design. I switched the chevrons to arrows.

https://codepen.io/mbdriscoll/pen/wvZyXoE?editors=1010

Re: Pan controls ArcGIS4

fdeters — Thu, 11 Sep 2025 23:12:09 GMT

In case anyone else comes across this in the future and is curious, here is a link to WCAG 2.2 SC 2.5.7 Dragging Movements, which requires that anything that "uses a dragging movement for operation can be achieved by a single pointer without dragging".

For WCAG 2.2 AA compliance purposes, it's not enough to provide keyboard controls for panning; you must also provide a pointer control that does not require dragging.