Is there a way to dissable drag in a mapboxdraw?

[kemal023]

I have map where I can draw lines, but after drawing the lines I can drag the line and circles to where I want it and I dont want that. I needs to be blocked so it stays at that place. I tried doing something like draggeble:false or trying to change stuff in the style but I couldn't figure it out

this is how my map.js looks like:

mapboxgl.accessToken = 'myToken';

const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v9', // style URL
    center: [-96, 37.8], // starting position
    zoom: 3, // starting zoom
});


map.addControl(new mapboxgl.FullscreenControl());
const geolocate = new mapboxgl.GeolocateControl()
map.addControl(geolocate)

map.on('load', function()
{
    geolocate.trigger();
});

var draw = new MapboxDraw({
    
    displayControlsDefault: false,
    controls: {
        
        line_string: true,
        trash: true
    },
    styles: [
        // ACTIVE (being drawn)
        // line stroke
        {
            "id": "gl-draw-line",
            "type": "line",
            "filter": ["all", ["==", "$type", "LineString"], ["!=", "mode", "static"]],
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-color": "#3b9ddd",
                "line-dasharray": [0.2, 2],
                "line-width": 4,
                "line-opacity": 0.7
            }
        },

        {
            "id": "gl-draw-polygon-and-line-vertex-halo-active",
            "type": "circle",
            "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
            "paint": {
                "circle-radius": 10,
                "circle-color": "#FFF"
            }
        },
        // vertex points
        {
            "id": "gl-draw-polygon-and-line-vertex-active",
            "type": "circle",
            "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
            "paint": {
                "circle-radius": 6,
                "circle-color": "#3b9ddd",
            },
        }
    ]
});

// add the draw tool to the map
map.addControl(draw);

// add create, update, or delete actions
map.on('draw.create', updateRoute);
map.on('draw.update', updateRoute);
map.on('draw.delete', removeRoute);

// use the coordinates you just drew to make your directions request
function updateRoute() {
    removeRoute(); // overwrite any existing layers
    
    var data = draw.getAll();
    
    var lastFeature = data.features.length - 1;
    var coords = data.features[lastFeature].geometry.coordinates;
    var newCoords = coords.join(';')
    console.log(newCoords);
    
    for (var i = 0; i < coords.length; i++) {
        var coordsPoints = coords[i];

        
        // Create a default Marker and add it to the map.
        const marker1 = new mapboxgl.Marker()
            .setLngLat([coordsPoints[0],coordsPoints[1]])
            .addTo(map);
            
    }
    
    //console.log(newCoords);
}


// remove the layer if it exists
function removeRoute () {
    if (map.getSource('route')) {
        map.removeLayer('route');
        map.removeSource('route');
        document.getElementById('calculated-line').innerHTML = '';
    } else  {
        return;
    }

[goksungurhan]

hi, the same issue. Did you solve that?

[jlev]

Check out the static draw mode. https://github.com/mapbox/mapbox-gl-draw-static-mode

You may need to modify the drawing tool to reset the mode after the user is done editing. For many plugins the default is simple_select.

[stevage]

I also wish there was a way to disable dragging, or to require an additional key to be held down or something.

Using the static mode wouldn't help in my case because I do want the user to be able to edit it - but not drag.