Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

android google maps Polygon add circle hole

hi currently im working on a google maps app.

and i want the following effect:

enter image description here

To do this i was thing of first creating a polygon overlay over the country, following by adding a hole to this polygon for the highlighted area with a certain KM radius, so that it shrinks and expands when zooming.

Now i know how to create a polygon;

mMap.addPolygon(new PolygonOptions().addAll(sCountryBorder).fillColor(0xcc000000));

Now i want to add a hole to this polygon, but i dont know how to generate a circular hole with the correct radius.

mMap.addPolygon(new PolygonOptions().addAll(sCountryBorder).fillColor(0xcc000000).addHole({CIRCULAR_HOLE}));

I know it is possible to create a circle with a certain radius in Google maps is it also possible to somehow convert this into an Array of LatLng objects?

mMap.addCircle(new CircleOptions()
                        .center(newLocation)
                        .radius(mRadius.size)
                        .strokeWidth(0)
                        .fillColor(getResources().getColor(R.color.transparant)));
like image 872
sn0ep Avatar asked Aug 24 '16 13:08

sn0ep


People also ask

How do I draw multiple circles on Google Maps?

Click anywhere on the map to create a circle. You may continue clicking outside the circles to create more circles. You can reposition (drag) the circles with your mouse by clicking+holding+moving.

Can I draw a polygon on Google Maps?

Draw a path or polygonTo make a path or polygon into a 3D object, click Altitude. A "New Path" or "New Polygon" dialog will pop up. You may need to move it out of the way before moving on to the next step. To draw the line or shape you want, click a start point on the map and drag.


1 Answers

Unfortunately, Google Maps library doesn't let to get an array of LatLng of the circle. So you need to draw a circle yourself.

Basically, you need to provide a method that will create a hole (circle) for a polygon which fills your map.

There are 3 steps.

1 step is to build a method that will create a polygon that covers an entire map.

private static List<LatLng> createOuterBounds() {
    float delta = 0.01f;

    return new ArrayList<LatLng>() {{
        add(new LatLng(90 - delta, -180 + delta));
        add(new LatLng(0, -180 + delta));
        add(new LatLng(-90 + delta, -180 + delta));
        add(new LatLng(-90 + delta, 0));
        add(new LatLng(-90 + delta, 180 - delta));
        add(new LatLng(0, 180 - delta));
        add(new LatLng(90 - delta, 180 - delta));
        add(new LatLng(90 - delta, 0));
        add(new LatLng(90 - delta, -180 + delta));
    }};
}

2 step is to create a method that will return an Iterable with LatLngs of the circle.

private static Iterable<LatLng> createHole(LatLng center, int radius) {
    int points = 50; // number of corners of inscribed polygon

    double radiusLatitude = Math.toDegrees(radius / (float) EARTH_RADIUS);
    double radiusLongitude = radiusLatitude / Math.cos(Math.toRadians(center.latitude));

    List<LatLng> result = new ArrayList<>(points);

    double anglePerCircleRegion = 2 * Math.PI / points;

    for (int i = 0; i < points; i++) {
        double theta = i * anglePerCircleRegion;
        double latitude = center.latitude + (radiusLatitude * Math.sin(theta));
        double longitude = center.longitude + (radiusLongitude * Math.cos(theta));

        result.add(new LatLng(latitude, longitude));
    }

    return result;
}

3 and the last step is to use these methods for PolygonOptions creation.

static PolygonOptions createPolygonWithCircle(Context context, LatLng center, int radius) {
    return new PolygonOptions()
        .fillColor(ContextCompat.getColor(context, R.color.grey_500_transparent))
        .addAll(createOuterBounds())
        .addHole(createHole(center, radius))
        .strokeWidth(0);
}

I have also created a demo repository which contains an app which draws a needed circle. https://github.com/AntonyGolovin/Google-Map-mask. All needed logic is contained in MapHelper.java class.

Result:

Screenshot

like image 128
Anton Holovin Avatar answered Oct 08 '22 04:10

Anton Holovin