1

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"
      }
    }
  ]
}
2
  • Could you add contents of user_geodata to check whether it's well-formed? if you want to ensure map completely loaded, you can try idle instead load. – Chase Choi Dec 10 '19 at 4:44
  • I've tried with 'idle' still not work :(. I've added the data to the question. – pnz Dec 10 '19 at 22:33
1

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

Part of your GeoJSON data is not following the right-hand rule which means the coordinates should be ordered as counter-clockwise(if it's polygon-hole, then should be clockwise).

You can validate your GeoJSON data here.
There's an online converter for the right-hand rule by Mapster.

7
  • I corrected it, but it didn't solve the problem : / – pnz Dec 11 '19 at 15:30
  • does the value ... of fill-pattern is real value? fill-pattern should be Name of image in sprite. The data is correct as I see the result with fill-color: 'blue' instead fill-pattern. jsfiddle.net/cs09g/q3x1ohun/51 – Chase Choi Dec 12 '19 at 0:40
  • Yes, I've just hide it. Actually I solved the issue, but still there is a console error. Check my answer. – pnz Dec 12 '19 at 12:04
  • on can be fired multiple times. Change the map.on("idle") to map.once("idle)` to make sure it executes once. – Chase Choi Dec 12 '19 at 14:19
  • I've changed it to map.on("load"), it solved the errors. I added the answer as well. The clockwise problem did not affect it. – pnz Dec 13 '19 at 9:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.