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; } } }

Pan controls ArcGIS4

azy141

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

Vind meer berichten getagd met

Accepted answers

All comments

fdeters

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.

azy141

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?

MatthewDriscoll

ESRI Icons

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

azy141

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

azy141

This is perfect thank you

Egge-Jan_Pollé

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

ReneRubalcava

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

Paco

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

});

Egge-Jan_Pollé

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

azy141

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

Egge-Jan_Pollé

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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