arcgis-js-api

Disable drag/move of a graphic picture marker using arcgis javascript 4.x


Using ArcGIS Javascript API 4.x. I have the following picture marker:

// graphics layer
graphicsLayer = new GraphicsLayer();
theMap.add(graphicsLayer);

// point symbol
const pointSymbol = {
  type: "picture-marker",
  url: "pictures/mymarker.png",
  width: "32px",
  height: "32px"
};

// graphic object to hold picture marker
const pointGraphic = new Graphic({
  geometry: myPoint,
  symbol: pointSymbol
});
graphicsLayer.add(pointGraphic);

My question is how do I disable selection of the marker and how do I disable drag of the marker?

I was hoping there is a setting such as draggable: false but this does not exist:

const pointGraphic = new Graphic({
      geometry: myPoint,
      symbol: pointSymbol,
      draggable: false  // THIS DOES NOT EXIST
    });

Solution

Thanks to Cabesuon's example below, I figured out the issue why the point was becoming draggable. By default actually the point should not be draggable. But if you create a sketch object in the same graphicslayer, everything becomes draggable. The solution was simple: just create the sketch object using a different name. In the above example, I had:

sketch = new Sketch({
view: view,
layer: graphicsLayer,
...

I just changed it to:

sketch = new Sketch({
view: view,
layer: createDifferentLayerNameHereJustForSketch,
...

And the problem was resolved. The point is no longer draggable.


Solution

  • By default the left mouse "drag" (click, hold and move) button action is to pan the view and the right mouse "drag" button action is to rotate the view. You should NOT be able to move a graphic or feature just with the code you add to the question.

    This is a simple snippet to show what I am saying.

    <html lang="en">
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>
            Picture Marker Symbol
        </title>
    
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
        <script src="https://js.arcgis.com/4.26/"></script>
        <script src="https://developers.arcgis.com/javascript/latest/sample-code/satellites-3d/live/satellite.js"></script>
    
        <script>
            require([
                "esri/Map",
                "esri/views/MapView",
                "esri/layers/GraphicsLayer",
                "esri/Graphic",
                "esri/request"
            ], (Map, MapView, GraphicsLayer, Graphic, esriRequest) => {
                const map = new Map({
                    basemap: "satellite"
                });
    
                const view = new MapView({
                    container: "viewDiv",
                    map: map,
                    zoom: 5,
                    center: [-101.94981250000075, 41.20977753557709],
                });
    
                const graphicsLayer = new GraphicsLayer();
    
                const graphic = new Graphic({
                    geometry: {
                        type: "point", // autocasts as new Point()
                        x: -101.94981250000075,
                        y: 41.20977753557709
                    },
                    symbol: {
                        type: "picture-marker", // autocasts as new PictureMarkerSymbol()
                        url: "https://developers.arcgis.com/javascript/latest/sample-code/satellites-3d/live/satellite.png",
                        width: 64,
                        height: 64
                    }
                });
    
                graphicsLayer.add(graphic);
    
                map.add(graphicsLayer);
            });
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>