Not able to delete selected polygon in ui-gmap-google-map

Question

I am able to draw multiple polygon by using Google Draw manager. Now I am not able to select specific polygon from multiple polygon and delete and edit it. Also not able to get new array after edit or delete.

My demo.js code is as follows :

$scope.map = {
        center: { latitude: 19.997454, longitude: 73.789803 },
        zoom: 10,
        //mapTypeId: google.maps.MapTypeId.ROADMAP,
        //radius: 15000,
        stroke: {
            color: '#08B21F',
            weight: 2,
            opacity: 1
        },
        fill: {
            color: '#08B21F',
            opacity: 0.5
        },
        geodesic: true, // optional: defaults to false
        draggable: false, // optional: defaults to false
        clickable: false, // optional: defaults to true
        editable: false, // optional: defaults to false
        visible: true, // optional: defaults to true
        control: {},
        refresh: "refreshMap",
        options: { scrollwheel: true },
        Polygon: {
            visible: true,
            editable: true,
            draggable: true,
            geodesic: true,
            stroke: {
                weight: 3,
                color: 'red'
            }
        },
   source: {
            id: 'source',
            coords: {
                'latitude': 19.9989551,
                'longitude': 73.75095599999997
            },
            options: {
                draggable: false,
                icon: 'assets/img/person.png'
            }
        },
        isDrawingModeEnabled: true
    };

   $scope.drawingManagerOptions = {
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              //google.maps.drawing.OverlayType.CIRCLE,
              google.maps.drawing.OverlayType.POLYGON,
            ]
        },
        circleOptions: {
            fillColor: '#BCDCF9',
            fillOpacity:0.5,
            strokeWeight: 2,
            clickable: false,
            editable: true,
            zIndex: 1
        },
        polygonOptions: {
            fillColor: '#BCDCF9',
            strokeColor: '#57ACF9',
            fillOpacity: 0.5,
            strokeWeight: 2,
            clickable: false,
            editable: true,
            zIndex: 1
        }
    };
    var coords = [];
    var polygon;
    $scope.eventHandler = {
        polygoncomplete: function (drawingManager, eventName, scope, args) {
            polygon = args[0];
            var path = polygon.getPath();
            for (var i = 0 ; i < path.length ; i++) {
                coords.push({
                    latitude: path.getAt(i).lat(),
                    longitude: path.getAt(i).lng()
                });
            }
    },
    };

    $scope.removeShape = function () {
        google.maps.event.clearListeners(polygon, 'click');
        google.maps.event.clearListeners(polygon, 'drag_handler_name');
        polygon.setMap(null);
    }

And My HTML code is as follows :

<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="map.control">
                <ui-gmap-marker coords="map.source.coords"
                                options="map.source.options"
                                idkey="map.source.id">
                </ui-gmap-marker>

                <ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl" events="eventHandler"></ui-gmap-drawing-manager>
            </ui-gmap-google-map>

You can find polygon image for reference:

Now I want to select one of polygon from following image and want to delete or update it.

Some help will be really appreciable.

Nannienanning

Can you expand on "Now I want to select one of polygon from following image and want to delete or update it" My interpretation is that you want the user to be able to click on the polygon and then you would do something? But how would you know if the intention is to delete or edit it? Are you going to show an infoWindow or something? Is there a working example of the code on a jsFiddle? – Confucius

@PaulThomasGC We need to do exact functionality that currently this url performing like Erase, Edit. Just we want to implement in AngularJs. Reference URL : gmapgis.com – Nannienanning

Currently you have the clickable option of polygon set to false. I'd have thought you would change that to true when your erase button is pressed, then look for the click event angular-ui.github.io/angular-google-maps/#!/api/polygon – Confucius

@PaulThomasGC Thanks Paul. But we already tried your solution. – Nannienanning

Answer 1

By the ui-google-map plugin's drawing manager doc, you could get the google.maps.drawing.DrawingManager object by the control attributes (putting there an object)

<ui-gmap-drawing-manager control="drawingManagerControl" options="drawingManagerOptions"></ui-gmap-drawing-manager>

and

$scope.drawingManagerControl = {};
//Now get the drawingManager object
var drawingManager = $scope.drawingManagerControl.getDrawingManager();

Having this object is the main work. Now you can look on everything you need. For your case you need the overlaycomplete events, it will listen for every time you have drawn a shape (=> polygon , circle, polyline)

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
  var newShape = e.overlay;
});

newShape is the new shape drawn, polygon in your case, so you can use it like a Polygon object and can use all you need in this reference.

Now I want to select one of polygon from following image and want to delete or update it.

For it, we'll distinct the polygon selected, by assigning it in a global variable: eg var selectedShape;

And now, Add a click event listener for this drawn polygon and update it as the selectedShape, and now to delete or update, you can use the selectedShape variable.

var selectedShape;
... ...
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    var newShape = e.overlay;
    google.maps.event.addListener(newShape, 'click', function() {
        selectedShape = newShape;
    });
}); 

Finally you can delete the selected shape by setting his map to null selectedShape.setMap(null); and update the shape by setting it editable to true shape.setEditable(true);

And finally to make these click event possible you need to add clickable options to true for all shape. PS: Use the IsReady Service to have map ready before working on it

Working plunker: https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/

Update:

But how to get all co-ordinates of multiple polygon after edit or draw.

you already have this in your script, in polygonecomplete ($scope.eventHandler). Now you can add it in overlaycomplete events listener, and for everytime you updated the shape (see code bellow)

But challenge is how to identify which polygon is edited on the map and how to update that specific polygon from my array

You can push in an array for each shape created and could manage it:

 ...
 var allShapes = []; //the array contains all shape, to save in end
 ....
//get path coords: I use your code there
function getShapeCoords(shape) {
  var path = shape.getPath();
  var coords = [];
  for (var i = 0; i < path.length; i++) {
    coords.push({
      latitude: path.getAt(i).lat(),
      longitude: path.getAt(i).lng()
    });
  }
  return coords;
}
....
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    var newShape = e.overlay;
    google.maps.event.addListener(newShape, 'click', function() {
        selectedShape = newShape;
    });
    ...
    // get coordinate of the polygon
    var shapeCoords = getShapeCoords(newShape);
    // pushing this shape to allShapes array
    allShapes.push(newShape);
}); 

in the delete function you can delete id by the index of the selectedShape

//delete selected shape
function deleteSelectedShape() {
  if (!selectedShape) {
    alert("There are no shape selected");
    return;
  }
  var index = allShapes.indexOf(selectedShape);
  allShapes.splice(index, 1);
  selectedShape.setMap(null);

}

Now you have the allShapes array, and in the end you can loop it then get for each coordinates and save in your db.

I updated the plunker and added some debug log do show you.

Altruism

Thanks for your solution.Delete is working fine. But how to get all co-ordinates of multiple polygon after edit or draw. But challenge is how to identify which polygon is edited on the map and how to update that specific polygon from my array. – Nannienanning

Thanks for your solution....... Need little bit help.. I am getting updated co-ordinates but how should I recognise and replace it. – Nannienanning

You could get the index of the edited shape and you can use this index – Altruism

Thanks. Really appreciate your help.. Can you please tell me how to get index of it and update in my array where I pushed co-ordinates while drawing polygon? – Nannienanning

like the one in deleteSelectedShape function, you could get the index by allShapes.indexOf(selectedShape); – Altruism

Answer 2

This snipet from github could help: https://github.com/beekay-/gmaps-samples-v3/blob/master/drawing/drawing-tools.html

Heyer