GeoJSON Editing – Dynamical Refresh of Mapbox Layers After Drawing Edits

editinggeojsonmapboxmapbox-gl-js

I fetch some GeoJSON from a DB, and add them to my map. After I use the mapbox-gl-draw library for editing.
My problem is that, after editing a feature on the map I would like to directly change it (on the map) as well, but the proper code part below does not work.

var user_geodata = <?php $stmt = $pdo->prepare("...") ?>;
map.on('load', function () {

    map.addSource('fields', {
    "type": "geojson",
    "data": user_geodata
    });

    map.addLayer({
        'id': 'temp',
        'type': 'fill',
        'source': 'fields',
        'layout': {},
        'paint': {
            'fill-pattern': '...'     
        }
    });    
});

draw.add(user_geodata);

// I have tried something like this, but it does not work.
map.on('draw.update', sourceRefresh);
function sourceRefresh(e) {
    var data = draw.getAll();
    fields.setData(data);
    map.update();
};

console.log(user_geodata);

Console output:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              17.6180362701416,
              46.8542630603229
            ],
            [
              17.6127576828003,
              46.8504183434193
            ],
            [
              17.6116847991943,
              46.8500074413642
            ],
            [
              17.6123714447022,
              46.8491562771071
            ],
            [
              17.6152038574219,
              46.847483259774
            ],
            [
              17.6162767410278,
              46.8466907596915
            ],
            [
              17.6195812225342,
              46.8482757481643
            ],
            [
              17.6227140426636,
              46.8506824930804
            ],
            [
              17.6217269897461,
              46.8514162353227
            ],
            [
              17.6210832595825,
              46.8509466414424
            ],
            [
              17.6194524765015,
              46.8520032218992
            ],
            [
              17.6202249526978,
              46.8525902020603
            ],
            [
              17.6180362701416,
              46.8542630603229
            ]
          ]
        ]
      },
      "properties": {
        "crop_type": "forest"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              17.6181221008301,
              46.8544391476351
            ],
            [
              17.6225852966309,
              46.8577260048138
            ],
            [
              17.6204395294189,
              46.8590759057288
            ],
            [
              17.6188945770264,
              46.8604257727069
            ],
            [
              17.6182079315186,
              46.8594867384017
            ],
            [
              17.6176929473877,
              46.8580194644213
            ],
            [
              17.6154613494873,
              46.8561999890007
            ],
            [
              17.6181221008301,
              46.8544391476351
            ]
          ]
        ]
      },
      "properties": {
        "crop_type": "residential"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              17.6179504394531,
              46.8544391476351
            ],
            [
              17.6133155822754,
              46.8508292423308
            ],
            [
              17.6117706298828,
              46.850154192459
            ],
            [
              17.6087665557861,
              46.8495084846425
            ],
            [
              17.6074361801147,
              46.8510346906077
            ],
            [
              17.608380317688,
              46.8512694876761
            ],
            [
              17.609281539917,
              46.8512401380987
            ],
            [
              17.6098394393921,
              46.8514162353227
            ],
            [
              17.6086378097534,
              46.8520912693323
            ],
            [
              17.6113843917847,
              46.8538815358325
            ],
            [
              17.6122426986694,
              46.853177175806
            ],
            [
              17.6144313812256,
              46.8549087109781
            ],
            [
              17.6163196563721,
              46.8555250066349
            ],
            [
              17.6179504394531,
              46.8544391476351
            ]
          ]
        ]
      },
      "properties": {
        "crop_type": "none"
      }
    }
  ]
}

Best Answer

I solved the issue, with the following code:

map.on('load', function () {

    map.addSource('fields', {
      "type": "geojson",
      "data": user_geodata
    });

    draw.add(user_geodata);

    map.addLayer({
    ...
    });    

});

map.on('draw.update', sourceRefresh);

function sourceRefresh(e) {
    var data = draw.getAll();
    map.getSource('fields').setData(data);
};
Related Question