How to create a polygon with a hole inside the Google API for static maps?

Question

When I try to create an external polygon with a hole inside with the Static Maps API, the fill color fills the internal polygon, and I do not see any options for drawing it. Here's what it looks like:

this is a request: https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&path=coloroglexFF0000AA|weight//|fillcolorcodexFFB6C1BB|enc:csr {FcgiLuSm [rYua @dIHHvz = color: 0xFF0000AA | weight: 3 | enc: mjr {FsjjL {A} D} E | DxAvD ~ EWD

Answer 1

Since this is currently a feature that is not possible with the Static Maps API, I came up with a workaround that achieves a “hole effect”:

1) Define the outer and inner lines of the polygon without a "fillcolor", like this example: https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&path=color:0xFF0000AA|weight:3|enc:csr{FcgiLuSm[ rYua@zIvHvCdNcAzKmRhX &path=color:0xFF0000AA|weight:3|enc:mjr{FsjjL{A}D}E|DxAvD~EwD

2) Create a polygon that removes part of the outer polygon and inner polygon, creating as a packer. Set the weight to zero 'weight = 0' and select the color to fill, as in this example: https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&&path=color:0x0ea001AA|weight:0|fillcolor:0xFFB6C1BB|enc:csr{FcgiLuSm[ rYua@zIvHvCdNcAzKwIeI {A}D}E| DxAvDu@v \ https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&&path=color:0x0ea001AA|weight:0|fillcolor:0xFFB6C1BB|enc:csr{FcgiLuSm[ rYua@zIvHvCdNcAzKwIeI {A}D}E| DxAvDu@v \ 3) Similar to step 2, create the part that we miss the filled polygon, as in this example: https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&path=color:0x0ea001AA|weight:0|fillcolor:0xFFB6C1BB|enc:csr{ FcgiLlRiXwIeI_FvDu@v \ 4) Finally, connect all the paths together to simulate the desired hole: https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&path=color:0xFF0000AA|weight:3|enc:csr{FcgiLuSm[ rYua@zIvHvCdNcAzKmRhX &path=color:0xFF0000AA|weight:3|enc:mjr{FsjjL{A}D}E|DxAvD~EwD&path=color:0x0ea001AA|weight:0|fillcolor:0xFFB6C1BB|enc:csr{FcgiLuSm[ rYua@zIvHvCdNcAzKwIeI {A}D}E| DxAvDu@v %5C&path=color:0x0ea001AA|weight:0|fillcolor:0xFFB6C1BB|enc:csr{ FcgiLlRiXwIeI_FvDu@v %5C https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&path=color:0xFF0000AA|weight:3|enc:csr{FcgiLuSm[ rYua@zIvHvCdNcAzKmRhX &path=color:0xFF0000AA|weight:3|enc:mjr{FsjjL{A}D}E|DxAvD~EwD&path=color:0x0ea001AA|weight:0|fillcolor:0xFFB6C1BB|enc:csr{FcgiLuSm[ rYua@zIvHvCdNcAzKwIeI {A}D}E| DxAvDu@v %5C&path=color:0x0ea001AA|weight:0|fillcolor:0xFFB6C1BB|enc:csr{ FcgiLlRiXwIeI_FvDu@v %5C

There is a Polyline encoding / decoder utility that can help you see the whole process at https://developers.google.com/maps/documentation/utilities/polylineutility

Answer 2

To build the answer from Soldeplata Saketos, for the filling part, you can use one path for the contour + hole without the need to break it. It seems that the Map Statics API uses some kind of screen test, where if the area is drawn a couple (0, 2 ...) times, it actually does not fill, and when drawing worsens (1 or more) the number of times., It is filled with the fill color .

Based on this principle, here is the Python code based on the Shapely library (but hopefully portable to other languages ​​or libraries):

 fill_coords = list(poly.exterior.coords) outline_coords = [poly.exterior.coords] for hole in poly.interiors: fill_coords.extend(hole.coords) # always close by adding the first point on the exterior fill_coords.append(fill_coords[0]) outline_coords.append(hole.coords) 

Note that the appearance and all openings / interior parts must be defined as rings, i.e. a closed sequence of points.

Then, as Soldeplata Saketos suggests, draw the fill and outline separately:

• one path = to fill (fill_coords), with fill color and weight = 0
• separate path = for each member of outline_coords, no fill color. This will draw a polygon border

Here is the image of the result:

2-hole polygon

(the scale bar is added with additional code, but the image above it is the one obtained from the Static Maps API)

Here is the request (replace the API_KEY parameter with your own):

https://maps.googleapis.com/maps/api/staticmap?maptype=hybrid&key= _API_KEY_ & size = 640x593 & scale = 2 & center = 50.95141146936693,2.0425128936767543 & zoom = 16 & path = fillcolor% 3A0x0000ff66% 7CAD3% 3CAD3% 3AD 3% 0D3% 3AD 3A0% 3A0% 3A0% 3A0% 3A0D X_AcEqAiJvEuE_% 40% 7DArFgFdC% 60Kd% 40a% 40% 60A% 7B% 40zAqCtAmAjBHz% 40zDiYzLz% 40j% 40a% 40% HBaB% 40% 7A% Ba% 40% 7a% B% C% HB% HB% 40% 7% C % 40u% 40MsBuAGDrAjEB & path = color% 3A0x0000ffff% 7Cweight% 3A2% 7Cenc% 3AO% 7D% 7DuHqenKaZ ~ X_AcEqAiJvEuE_% 40% 7DArFgFdC% 60Kd% 40a% 40% 40A% BA% 0A% B% 7A% Bz% 0A% B% % 3A2% 7Cenc% 3Ayw ~ uHuwmKz% 40% 7C% 40hAaEyBaCw% 40vCj% 40lb & path = color% 3A0x0000ffff% 7Cweight% 3A2% 7Cenc% 3A% 7Bc ~ uHuenKx% 40% 7CAb% 40uD 40A%