How to manipulate mapbox symbol icons - MapboxGL.js

Question

I have my own Mapbox style that I build in MapBox Studio. Now I want to allow my user to move poi_label symbols. How could I do that? I am following this example Create a draggable point and also I am aware of Mapbox properties. I have added my code below where I can access the layer, now how can I make this symbol draggable/movable?

     map.on('load', function () {
      var layers = map.getStyle().layers;
      layers.forEach(function (layer) {
        if (layer.type && layer.type == "symbol"
          && layer["source-layer"] && layer["source-layer"] == "poi_label") {
          layer.draggable = true;// not working
          map.on('mouseenter', layer.id, function () {
            map.getCanvas().style.cursor = 'draggable';
          });
          map.on('mouseleave', layer.id, function () {
            map.getCanvas().style.cursor = '';
          });          
        }
      });

In the Create a draggable point example, the author is using manual geojson data. Is there any way to build this geojson programmatically based on the loaded part of the map?

Answer 1

Yes using querySourceFeatures to get the GeoJSON from there you can use the draggable point example you've linked to.