2

First of all, for the issue you're going to read, I used this snippet of code to highlight my polygon : Highlight polygon and tint rest of map using Google Maps

Here is my code (it's Angular) :

var boundaries          = [];

// big area
var overlay             = [
  new $rootScope.googleApi.LatLng(80.0, -90.0),
  new $rootScope.googleApi.LatLng(-60.0, -90.0),
  new $rootScope.googleApi.LatLng(-60.0, 90.0),
  new $rootScope.googleApi.LatLng(80.0, 90.0)
];

// my polygon
angular.forEach(settings_boundaries, function(val, key) {
  boundaries.push(new $rootScope.googleApi.LatLng(val[1], val[0]));
});

// create a polygon with overlay first
var poly = new $rootScope.googleApi.Polygon({
  paths: [overlay, boundaries],
  strokeColor: "blue",
  strokeWeight: "1",
  fillColor: "black",
  fillOpacity: 0.4,
  clickable: false
});

poly.setMap(interactiveMap);

Now, the real problem is, If I use these coordinates (which I don't remember how I got them in the first place) :

[[1.6101837158203125,49.00274483644452],
[1.6294097900390625,49.01175312475694],
[1.5947341918945312,48.98787759766659],
[1.6101837158203125,49.00274483644452]]

Everything works fine (as you can see here).

But if I use these ones :

[[1.6809940338134766,48.98337149775796],
[1.6791915893554688,48.96849847697763],
[1.7185020446777344,48.995199140974066],
[1.6809940338134766,48.98337149775796]]

This is not working anymore.
As you can see here.

I used this website to generate the coordinates :
http://www.the-di-lab.com/polygon/ (view screenshot)

I searched for a long time what the issue could be, but I have really no idea. It's approximately the same coordinates. The first lat,lon values are the same than the last ones, for both of them.

If you have any idea (I guess there's something special in the coordinates), I would like to know !

Thanks !

Community
  • 1
  • 1
Aly
  • 458
  • 2
  • 13

1 Answers1

1

Structurally, the coordinates of the triangle are correct. Only a geometrical difference the first triangle (the one functioning) is drawn in a clockwise direction while the latter is drawn counterclockwise. I have already met a situation like this but I do not remember which site. Then try to reverse the direction of drawing of the triangle in this way:

     [[1.6809940338134766,48.98337149775796],
     [1.7185020446777344,48.995199140974066]
     [1.6791915893554688,48.96849847697763]
     [1.6809940338134766,48.98337149775796]]
ScaisEdge
  • 131,976
  • 10
  • 91
  • 107
  • I don't know how I didn't find the stackoverflow topic with the same problem (and which already has the same answer) considering the time I spent trying to resolve the problem.... Anyway, thanks, it's working now ! – Aly Jul 30 '15 at 09:44
  • I did not know that answer, the site to which I referred was not SO. my comments were derived from a geometric reasoning polygon interior to area – ScaisEdge Jul 30 '15 at 09:48
  • Doesn't work for: `var world = [ new google.maps.LatLng(90, 90), new google.maps.LatLng(90, -90), new google.maps.LatLng(0, 90), new google.maps.LatLng(0, -90), new google.maps.LatLng(90, 90) ]; ` – sbrm1 Oct 28 '16 at 19:41
  • @sbrm1 ican't understand your need ,, try post a proper new question .. with a well describe situation , code and data sample .. eventually comment me the link of this new question .. – ScaisEdge Oct 28 '16 at 20:53