CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Aurélien Warnon
Aurélien Warnon

Reputation: 71

Edition of polygon with hole disappears with high zoom level

As the title says, I'm having a little problem with polygon edition at high zoom level.

I'm using the Google map API to create a polygon with a hole in it. That allows me to "highlight" a zone on the map. In my app, the user can modify that polygon so that it perfectly matches its zone.

Everything works fine for the edition but, at the 2 highest zoom levels, the edition "points" disappear. That makes edition a bit hard if you really want to be precise when drawing the zone.

Is there some parameter I'm missing to make the edition "points" appear at every zoom levels?

I have a working jsfiddle here: https://jsfiddle.net/nrtvewgh/1/

Here is the code:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 50.383074874246, lng: 5.1561069488525},
  zoom: 12,
  mapTypeId: 'satellite'
});

var WORLD_COORDS = [
    new google.maps.LatLng(-85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, 180),
    new google.maps.LatLng(-85.1054596961173, 180),
    new google.maps.LatLng(-85.1054596961173, 0)
];

var zoneCoords = [
    new google.maps.LatLng(50.414233409894, 5.1438760757446),
    new google.maps.LatLng(50.408462829958, 5.1216888427734),
    new google.maps.LatLng(50.383074874246, 5.1561069488525),
    new google.maps.LatLng(50.408435479564, 5.164647102356),
    new google.maps.LatLng(50.413348040727, 5.151150226593)
];
console.log(zoneCoords);
var domainZone = new google.maps.Polygon({
    paths: [WORLD_COORDS, zoneCoords],
    strokeColor: '#FFFFFF',
    strokeOpacity: 0.9,
    strokeWeight: 4,
    fillColor: '#FFFFFF',
    fillOpacity: 0.2,
    zIndex: 0
});
domainZone.setMap(map);
domainZone.setEditable(true);

Just zoom on the "points" at the edge of the zone and they will eventually disappear.

I noticed I can still drag the edge of the zone at the last 2 zoom levels, but this is not intuitive at all.

I have looked for answers but can't seem to find people that have the same problem.

Thanks a lot for your help.

Upvotes: 2

Views: 74

Answers (1)

Aurélien Warnon
Aurélien Warnon

Reputation: 71

For those who come across the same issue, I have found a dirty workaround that seems to work.

Instead of a single polygon with a hole, I created two polygons.

  • That same one with a hole in it and with a strokeOpacity of 0.
  • Another simple polygon that has the same coordinates with a fillOpacity of 0 and a higher zIndex.

When the user wants to edit the holed polygon, the trick is to make him edit the regular polygon behind the scenes. Whenever the simple polygon changes, I simply synchronize the holed polygon so that it looks exactly the same.

When editing a regular polygon, I don't have this zoom problem and everything is working fine.

I hope this answer is clear enough. Don't hesitate to ask if it is not. I might even be able to make a jsfiddle is someone needs an example.

Upvotes: 1

Related Questions