Pan controls ArcGIS4

azy141 · ‎03-25-2024

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

Egge-Jan_Pollé · ‎03-25-2024

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

azy141 · ‎03-25-2024

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

Egge-Jan_Pollé · ‎03-25-2024

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

Paco · ‎03-25-2024

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

});

ReneRubalcava · ‎03-25-2024

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

azy141

This is perfect thank you

Egge-Jan_Pollé · ‎03-25-2024

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

azy141

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

MatthewDriscoll

ESRI Icons

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