Google Maps Polygon Fill Color Disappearing with improper geometry

1

I am having an issue with keeping the polygon fill color present in the polygon on the Google Maps Android platform. When the polygon path overlaps itself the fill color disappears. I am using the same method for highlighting my path on iOS and it does not have this behavior. Please see these images to note how the the fill color disappears when there is an overlap in the polygon path.

Here is the correct color fill before overlap:

Before overlap

The color disappears when there are polygon path points that are within the same polygon:

After overlap

The behavior is not the same on iOS. The polygon keeps its fill on iOS. This is an excerpt from the Google Maps documentation:

Fill color in ARGB format, the same format 
used by Color. The default value is 
transparent (0x00000000). If the polygon 
geometry is not specified correctly (see 
above for Outline and Holes), then no fill 
will be drawn.

Here is the code that I am using. Basically I have a path with a width X and that path at width X is highlighted:

As the location changes I take the current location and calculate a left and right point for example:

LatLng leftPoint = 
SphericalUtil.computeOffset(presentLoc, 
widthInFeet * 0.3048, heading - 90);

Next I take the right side and reverse the array and add it to the left to make the polygon path. I then pass in that array of points into the polygon for update as the location changes.

polygon.setPoints(polyPoints);
polygon.setFillColor(YELLOW);
polygon.setStrokeWidth(1);

How does one make the image above retain its fill color when there is the inevitable overlap when for example there is a sharp turn etc?

I used this com.google.maps.android.PolyUtil.simplify from below to do a Douglas-Peucker simplification, however this does not help with sharp turns that overlap or pass back over the path. I am tempted to use multiple smaller polygons instead of one large polygon, but I don't want to waste the system resources especially when the app will have fairly large paths.

android
google-maps
asked on Stack Overflow Aug 8, 2018 by johnsonjp34 • edited Aug 9, 2018 by johnsonjp34

2 Answers

2

I thought I'd at least demonstrate what simplification can accomplish and let you decide if it is desirable. Frankly, I have not seen a lot of examples of how their algorithm performs.

The problem turns into what the tolerance parameter needs to be - a potentially difficult one for a general case.

The code is straight forward - two polygons are created, one a result of simplification. This also demonstrates the bug where the clear polygon is not being filled.

    List<LatLng> points = new ArrayList<>();
    points.add(new LatLng(39.182937,-76.823560));
    points.add(new LatLng(39.180741,-76.821758));
    points.add(new LatLng(39.190454, -76.810985));
    points.add(new LatLng( 39.190221, -76.812530));
    points.add(new LatLng(39.186961, -76.808239));
    points.add(new LatLng(39.188724,-76.806264));
    points.add(new LatLng(39.192882, -76.811328));
    points.add(new LatLng(39.182937, -76.823560));

    PolygonOptions rectOptions = new PolygonOptions()
            .addAll(points);
    // Get back the mutable Polygon
    Polygon polygon = mMap.addPolygon(rectOptions);
    polygon.setFillColor(Color.YELLOW);


    points = new ArrayList<>();
    points.add(new LatLng(39.182937,-76.834560));
    points.add(new LatLng(39.180741,-76.832758));
    points.add(new LatLng(39.190454, -76.821985));
    points.add(new LatLng( 39.190221, -76.823530));
    points.add(new LatLng(39.186961, -76.819239));
    points.add(new LatLng(39.188724,-76.817264));
    points.add(new LatLng(39.192882, -76.822328));
    points.add(new LatLng(39.182937, -76.834560));
    points = PolyUtil.simplify(points, 200.0);

    rectOptions = new PolygonOptions()
            .addAll(points);
    // Get back the mutable Polygon
    polygon = mMap.addPolygon(rectOptions);
    polygon.setFillColor(Color.YELLOW);

And finally the results - so clearly some fidelity is sacrificed in the simplification where one vertex of the inner triangle won out in the algorithm - but interesting none the less:

enter image description here

Note in this example the tolerance threshold is about 120 meters - the point at which it has an effect.

I do agree with @MartinZeitler that the solution for you most likely will be to remove the interior points.

answered on Stack Overflow Aug 10, 2018 by Andy • edited Aug 10, 2018 by Andy
0

In onMapReady to call method- onpostExe();

private void onpostExe() {
        if (points != null && points.size() > 0) {
            PolylineOptions lineOptions;
            lineOptions = new PolylineOptions();
            lineOptions.addAll(points);
            lineOptions.width(8);
            lineOptions.color(Color.RED);
            lineOptions.geodesic(true);
 mMap.addPolyline(lineOptions);
}

on overlap is possible but, when use width size to spacify the difference on solve overlap problem

answered on Stack Overflow Aug 14, 2018 by Viral Patel

User contributions licensed under CC BY-SA 3.0