Листовка Draw - сохранить Geo JSON на сервер

Question

Вдохновленный этим часто цитируемым вопросом: https://gis.stackexchange.com/questions/211496/leaflet-draw-add-attributes-and-save-to-file Я хотел сделать что-то подобное сам, но вместо создания файла для загрузки я хотел бы сохранить его на сервере.

Я что-то собрал, и я не получаю ошибок в консоли, но файл Geo JSON на сервере остается пустым. Скорее всего, я как-то неправильно использую ajax.

Я думаю, что критическая часть кода такова:

    /*
    =============================================================================
    Open Editable Popup
    =============================================================================
    */

    map.on('draw:created', function (event) {
      var layer = event.layer,
          feature = layer.feature = layer.feature || {}; // Intialize layer.feature
          feature.type = feature.type || "Feature"; // Intialize feature.type
      var props = feature.properties = feature.properties || {}; // Intialize feature.properties
      props.title = "my title";
      props.content = "my content";
      var idIW = L.popup();
      var content = '<span><b>Name</b></span><br/><input id="shapeName" type="text"/><br/><br/><span><b>Description<b/></span><br/><textarea id="shapeDesc" cols="25" rows="5"></textarea><br/><br/><input type="button" id="okBtn" value="Save" onclick="saveIdIW()"/>';
      idIW.setContent(content);
      idIW.setLatLng(layer.getLatLng());
      idIW.openOn(map);
      drawnItems.addLayer(layer);
  });


    function saveIdIW() {
        var sName = $('#shapeName').val();
        var sDesc = $('#shapeDesc').val();
        var drawings = drawnItems.getLayers(); //drawnItems is a container for the drawn objects
        drawings[drawings.length - 1].title = sName;
        drawings[drawings.length - 1].content = sDesc;
        map.closePopup();
    };




    /*
    =============================================================================
    Add Button to save the changes to GeoJSON
    =============================================================================
    */

    //button generated by the leaflet easy-button plugin. icon by font awesome - inclusion see html file
    var saveButton = L.easyButton('fa-save', function(btn, map){
            // Extract GeoJson from drawnItems 
            var data = drawnItems.toGeoJSON();
            // Stringify the GeoJson
            var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));

            $.ajax({
                type: 'POST',
                url: "data/markers.geojson",   //url of receiver file on server
                data: convertedData,           //data container
                success: function(data) {
                    alert(data);
                },                              //callback when ajax request finishes
                dataType: "json"                    
              });
    }).addTo(map);

Примечание: это вымышленная карта, если она разница. Но я думаю, что самое большее это должно привести к неправильным координатам точек для маркеров, а не к совершенно пустому файлу. Я публикую весь код, если вы считаете, что это помогает, но я не хотел делать это слишком долго, а остальное в основном код из предыдущего вопроса https://gis.stackexchange.com/questions/360207/map-slightly-off-center-with-simple-cartesian-crs-and-tilelayer-in-leaflet плюс элементы управления листовки листовки.