How to select a polygon covered by another polygon - google-maps

Question

when I draw the last two polygons has a z-index greater than the first, so "hidden" at first and I can not choose, then what I'm trying to do is change the z-index by area
I try this
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
lastPolygon = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
console.log(newShape);
ArrayDeZonas.push(newShape);
zIndex += 1
ordenarZonasDescendente(ArrayDeZonas);
});
function ordenarZonasDescendente(zonas) {
var zonaAuxiliar;
for (var i = 0; i < getCantidadElementos(zonas); i++) {
for (var j = i+1; j < getCantidadElementos(zonas); j++) {
var area1 = getArea(GetGLatLngArray(zonas[i]));
var area2 = getArea(GetGLatLngArray(zonas[j]));
if (area1 < area2) {
zonas[i].zIndex = zIndex //Smaller area greater z Index
zonas[j].zIndex = zIndex-1; //Larger area less zIndexx
}
}
}
return zonas;
}
in console output
in consola.log () it shows me that their z-index changed and are fine, but not updated on the map, I'm not able to select the polygon that is inside.
Sorry for my English, I hope it is understood what I want, thank you very much!

Answer 1

I would suggest:
use the geometry library to compute the area
var area = google.maps.geometry.spherical.computeArea(zonas[i].getPath());
use the javascript array sort to order the polygons
zonas.sort(byArea);
function byArea(a, b) {
if (a._area < b._area) {
return -1;
}
if (a._area > b._area) {
return 1;
}
// a must be equal to b
return 0;
}
Then you can do this:
function ordenarZonasDescendente(zonas) {
for (var i = 0; i < zonas.length; i++) {
var area = google.maps.geometry.spherical.computeArea(zonas[i].getPath());
zonas[i]._area = area;
}
zonas.sort(byArea);
for (var i = 0; i < zonas.length; i++) {
zonas[i].set("zIndex", (zonas.length - i));
}
return zonas;
}
proof of concept fiddle
code snippet:
$(document).ready(function() {
function ordenarZonasDescendente(zonas) {
for (var i = 0; i < zonas.length; i++) {
var area = google.maps.geometry.spherical.computeArea(zonas[i].getPath());
zonas[i]._area = area;
}
zonas.sort(byArea);
for (var i = 0; i < zonas.length; i++) {
zonas[i].set("zIndex", (zonas.length - i));
}
return zonas;
}
function byArea(a, b) {
if (a._area < b._area) {
return -1;
}
if (a._area > b._area) {
return 1;
}
// a must be equal to b
return 0;
}
var ArrayDeZonas = [];
var zIndex = 0;
var infowindow = new google.maps.InfoWindow();
var mapHeight = '400px';
// $('#map-canvas').css('height', mapHeight);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 47.53187912201915,
lng: 7.705222390807307
},
zoom: 20,
});
var map_drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.POLYGON
]
},
//drawingMode: google.maps.drawing.OverlayType.POLYGON,
markerOptions: {
draggable: true
},
polylineOptions: {
editable: true,
draggable: true
},
map: map
});
google.maps.event.addListener(map_drawingManager, 'overlaycomplete', function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
map_drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
lastPolygon = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function(evt) {
newShape.setOptions({
draggable: true
});
infowindow.setContent("vertices: " + this.getPath().getLength() + "<br>" + "area: " + google.maps.geometry.spherical.computeArea(this.getPath()) + "<br>" + "zIndex: " + this.get("zIndex") + "<br>" + "coords: " + evt.latLng.toUrlValue(6));
infowindow.setPosition(evt.latLng);
infowindow.open(map);
/*
setSelection(newShape);
*/
});
/*
setSelection(newShape);
*/
console.log(newShape);
ArrayDeZonas.push(newShape);
zIndex += 1;
ordenarZonasDescendente(ArrayDeZonas);
}
});
})
html,
body,
#map-canvas {
height: 500px;
width: 750px;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>