Draw Feature

To add draw interaction to the map pass options and callback function to the addMapInteraction function.

Options
  • type - Type of the interaction. For draw interaction pass draw.
Callback Function
  • callback - Optional parameter. Function to be called back when drawing feature will be end.

After drawing features use getUnsavedDrawnFeatures function to retrieve the unsaved drawn features.

To save drawn features pass options and callback function to the addFeatures function. Returns feature id of the saved features.

Options
  • userId - Id of the user which features will be related.
  • parentFeatureId - Optional parameter. Id of the parent feature.
  • featureTypeId - Id of the Feature type.
  • geometry - Geometries of the features to be saved.
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 features were succesfully saved and function will return feature id of saved features. You can check value property to get the feature id of saved features. 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 of saved features 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});

// Loading feature types
GisTools.featureTypes(callback);

function callback(response) {
    if (response.success === true) { // Success

        var guideFeatureType = document.getElementById('guide-feature-type');

        var featureTypes = JSON.parse(response.value);

        featureTypes.forEach(function (featureType) {
            guideFeatureType.options.add(new Option(featureType.name, featureType.featureTypeId));
        });
    } else if (response.success === false) { // Fail
        console.log(response);
    }
}

var guideDrawUndoButton = document.getElementsByClassName('guide-draw-undo-button');

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

var guideDrawRedoButton = document.getElementsByClassName('guide-draw-redo-button');

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

// Adding draw interaction

var guideFeatureType = document.getElementById('guide-feature-type');

var guideDrawButton = document.getElementsByClassName('guide-draw-button');

guideDrawButton[0].addEventListener('click', function () {
    var interactionOptions = {
        type: 'draw',
        geometryType: guideFeatureType.options[guideFeatureType.selectedIndex].getAttribute('data-geometry-type')
    };

    function callback() {
        console.log('Drawing feature end.');
    }

    GisTools.addMapInteraction({options: interactionOptions}, callback);
});

var guideDrawCancelButton = document.getElementsByClassName('guide-draw-cancel-button');

guideDrawCancelButton[0].addEventListener('click', function () {
    var interactionOptions = {
        type: 'draw'
    };
    GisTools.removeMapInteraction({options: interactionOptions});
});

// Saving unsaved drawn features
var guideDrawSaveButton = document.getElementsByClassName('guide-draw-save-button');

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

    var unsavedDrawnFeatures = GisTools.getUnsavedDrawnFeatures();
    var featureTypeId = document.getElementById("guide-feature-type").value;

    if (unsavedDrawnFeatures.length > 0) {
        var options = {
            userId: '00000000-0000-0000-0000-000000000001',
            parentFeatureId: '00000000-0000-0000-0000-000000000001',
            featureTypeId: featureTypeId,
            geometry: unsavedDrawnFeatures
        };
        GisTools.addFeatures(options, callBack);
    }

    function callBack(response) {
        if (response.success === true) { // Success
            console.log(response);
            alert(response.message);
        } else if (response.success === false) { // Fail
            console.log(response);
        }
    }
});
Draw unfinished polygon
  • drawUnFinishedPolygon(coordinates) - This function receive lineString coordinates and converts these coordinates into a polygon and displays them on the map together with the area

  • removeUnFinishedPolygon() - This function finds the unfinished polygon and deletes it from the map

Example
var coordinates = [
                    [49.853298962116234,40.37223182544446],
                    [49.8535457253456,40.37183130860711],
                    [49.8535457253456,40.37183130860711],
                    [49.85395342111587,40.37197843751787]
                  ]
        
for draw -> GisTools.drawUnFinishedPolygon(coordinates);
for remove -> GisTools.removeUnFinishedPolygon();