Modify Feature

To add modify interaction to the map pass options to the addMapInteraction function. To remove vertex, select it by clicking on it then click Right mouse button on it.

Options

• type - Type of the interaction. For modify interaction pass modify. You can also pass modifyAndTranslate as a combination of modify and translate.

There are two ways of modifying feature either by interaction or manually setting parameters of feature. To modify feature by interaction first select feature on map then click Modify button from the toolbar. Make your modifications on geometry then click on Save button to save modified feature.

To save modified feature pass options and callback function to the modifyFeature function.

Options

• mode - Indicates how function will behave. Supported modes are interaction | manual. Use interaction mode to save feature which is currently manipulated by modify interaction. Or use manual mode to manually set parameters of feature which should be modified.
• featureId - Id of the feature to be modified. This parameter is only used on manual mode.
• geometry - Geometry of the feature to be modified. This parameter is only used on manual mode.

Callback Function

• callback - Function to be called back. Response will be passed to this function. It should be handled inside this function.

  Response structure

  • success - true | false. If value is true then modification on feature was succesfully saved. If false then it means saving failed. You can check message property for the reason of fail.
  • message - Additional message about the result of the call.
  • value - It will contain the feature id and geometry of the modified feature if call succeeds. If call fails this property will be null.

Example

// Initialization of the map
var options = {
    tileSettings: {
        source: 'xyz',
        url: 'https://gomap.az/smoothtiles/maptile.do?lng=az&x={x}&y={y}&z={z}&f=png&dp=0'
    },
    targetElement: 'map' // Id of the <div> element. Container of the map.
};

GisTools.initializeMap({options: options});

var options = {
    userId: '00000000-0000-0000-0000-000000000001',
    featureIdList: ['00000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000002']
};
GisTools.loadFeatures({options: options});

// Adding select interaction
var interactionOptions = {
    type: 'select'
};
GisTools.addMapInteraction({options: interactionOptions});

var guideModifyUndoButton = document.getElementsByClassName('guide-modify-undo-button');

guideModifyUndoButton[0].addEventListener('click', function () {
    GisTools.undoOperation();
});

var guideModifyRedoButton = document.getElementsByClassName('guide-modify-redo-button');

guideModifyRedoButton[0].addEventListener('click', function () {
    GisTools.redoOperation();
});

var guideModifyButton = document.getElementsByClassName('guide-modify-button');

guideModifyButton[0].addEventListener('click', function () {
    var interactionOptions = {
        type: 'modify'
    };
    GisTools.addMapInteraction({options: interactionOptions});
});

var guideModifyCancelButton = document.getElementsByClassName('guide-modify-cancel-button');

guideModifyCancelButton[0].addEventListener('click', function () {
    var interactionOptions = {
        type: 'modify',
        mode: 'revertBack'
    };
    GisTools.removeMapInteraction({options: interactionOptions});
});

var guideModifySaveButton = document.getElementsByClassName('guide-modify-save-button');

guideModifySaveButton[0].addEventListener('click', function () {

    var modifyOptions = {
        mode: 'interaction'
    };
    GisTools.modifyFeature(modifyOptions, callback);

    function callback(response) {
        if (response.success === true) { // Success
            console.log(response);
            alert(response.message);
        } else if (response.success === false) { // Fail
            console.log(response);
        }
    }
});