Drag Feature

To add drag interaction to the map pass options to the addMapInteraction function.

Options
  • type - Type of the interaction. For drag interaction pass translate.

To drag feature first select feature on map then click Drag button from the toolbar. Drag geometry then click on Save button to save dragged feature.

To save dragged feature pass callback function to the translateFeature function.

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 drag 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.
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 guideTranslateButton = document.getElementsByClassName('guide-translate-button');

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

var guideTranslateCancelButton = document.getElementsByClassName('guide-translate-cancel-button');

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

var guideTranslateSaveButton = document.getElementsByClassName('guide-translate-save-button');

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

    GisTools.translateFeature(callBack);

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