How-to Save Polygon Overlays to PNG or JPG format

2,302 views
Skip to first unread message

7heroes

unread,
Oct 12, 2011, 11:54:40 AM10/12/11
to google-map...@googlegroups.com
Hi all,

Is there a way to save all the polygons drew on google map to PNG or JPG files? I only need to capture the polygon, but not the google map. Something like if I drew a triangle on google map, and right click the triangle, select export to PNG, it will save only the triangle overlay (not include the map that below it). And the image can be open with image editor like Paint...

Thanks for your help,

Sam.

Chris Broadfoot

unread,
Oct 12, 2011, 11:40:37 PM10/12/11
to google-map...@googlegroups.com
Berry wrote a cool demo, to aid printing:

   http://home.provide.net/~bratliff/coast/

Why not save the array of latlngs of the polygon, though? Saving it as PNG or JPG means you're rasterising the polygon, which means it won't be conducive to zooming in/out.

Chris

--


--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/mbUkhglhmhYJ.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

7heroes

unread,
Oct 13, 2011, 11:19:29 AM10/13/11
to google-map...@googlegroups.com
Hi Chris,

I saved the array of latlngs of the polygon as you suggest for later rendering which work really cool, but I would like to save them  as PNG as well because I need to edit the polygon (represented a building) further such as adding walls etc... in Paint or I will write other app to add more functionality.

I'm going to try the link you sent me, and will let you know my progress, really appreciate.

Sam.

.

Berry Ratliff

unread,
Oct 13, 2011, 12:45:55 PM10/13/11
to Google Maps JavaScript API v3
I agree with Chris. Except for very trivial shapes, vector
definitions are much more compact than raster definitions. You could
build a custom map with blank image tiles. You could do a screen
capture of your rendered polys.

7heroes

unread,
Oct 13, 2011, 4:30:21 PM10/13/11
to google-map...@googlegroups.com
Hi Berry,

Are you the author of the demo that Chris sent me? if yes, can you tell me where did you find the offset that equal 268435456? can it be use anywhere on Earth or just on the area that on your map?

Thanks,

Sam.

Berry Ratliff

unread,
Oct 13, 2011, 5:40:50 PM10/13/11
to Google Maps JavaScript API v3
It is (1 << 28) which is (256 << 20) which is half the circumference
of the Earth in pixels at zoom level 21. It is done to adjust the
origin from the Greenwich Meridian to the International Date Line. It
does not wrap around correctly at zero.

Use:

(x ^ x>>z<<z)

to cut off the high order bits. For values relative to the center of
the map, it is OK.

7heroes

unread,
Oct 14, 2011, 12:57:10 PM10/14/11
to google-map...@googlegroups.com
Hi Berry, I'm very curious that why did you use the magic number :) 256 but not other number such as 320 or 640? I assume number 20 is the max zoom level from Google Map, please correct me if I'm wrong.

Thanks,

Sam.

PS: I noticed that you updated your demo, good job!

Berry Ratliff

unread,
Oct 14, 2011, 2:01:02 PM10/14/11
to Google Maps JavaScript API v3
At zoom level 0, the circumference of the Earth is 256 pixels which is
1 << 8. At zoom level 1, the circumference of the Earth is 512 pixels
which is 1 << 9. At zoom level 20, it is 268,435,456 pixels which is
1 << 28. At zoom level 22, it is 1,073,741,824 pixels which is 1 <<
30. At zoom level 23, it exceeds the capacity of a positive 32-bit
integer.

To avoid overflow, I limit the zoom level to 21. I believe Google
does also.

7heroes

unread,
Oct 14, 2011, 2:19:46 PM10/14/11
to google-map...@googlegroups.com
oh I see, this is a great information, but in your case, 256 is half of circumference, am I correct?

Berry Ratliff

unread,
Oct 14, 2011, 3:50:35 PM10/14/11
to Google Maps JavaScript API v3
On Oct 14, 6:19 pm, 7heroes <s...@knowlittle.com> wrote:
> oh I see, this is a great information, but in your case, 256 is half of
> circumference, am I correct?

Yes. It is done to shift the origin from the Greenwich Meridian to
the International Date Line. The distance is half the circumference
of the Earth in pixels. Zero degrees of Longitude is on the Greenwich
Meridian. Zero pixel offset is on the International Date Line. Also,
the non-linear Latitude conversion depends on the radius of the Earth
in pixels.

7heroes

unread,
Oct 17, 2011, 4:35:42 PM10/17/11
to google-map...@googlegroups.com
Hi Berry, your demo is really good. I can export the polygons that I drew on google map to png files :D by using your pixel mapping.

Thanks,

Sam.

Berry Ratliff

unread,
Oct 17, 2011, 6:40:07 PM10/17/11
to Google Maps JavaScript API v3
Glad it works.

I have added another pair of demos.

For static map polylines & markers:

http://home.provide.net/~bratliff/harbor/

For static map polygons & markers:

http://home.provide.net/~bratliff/hawaii/

Both support lots of polys & lots of markers without URL length
considerations. Both allow static maps to be redecorated without
fetching additional static maps. It reduces transmission delay. It
reduces quota depletion. I am planning to add mouse events.
Reply all
Reply to author
Forward
0 new messages