SVG graphics clip / disappear when zooming in Chrome + Safari

[Coen de Jong]

Test link: http://kwestievan.nl/reizen

What I'm doing here: implemented my own OverlayView to draw curved lines from marker to marker with arrowheads at the end of each line with SVG. I add a div element to the map that is of a certain width and height to contain the line and arrowhead. I then put inline SVG code in that div to let the browser draw the line and arrow.

If viewed in Safari or Chrome some very annoying and unexpected behavior occurs. In Safari the whole SVG graphic disappears beyond a certain zoom level, and in Chrome the arrowheads at the end of the line disappear and re-appear at random zoom levels so it seems. In Firefox and Opera this behavior is not happening and the arrowheads are visible at any zoom level.

Don't mind the red boxes and/or the displacement of some arrows. That's work in progress.

What is going on here? Is SVG not fully compatible with Google Maps or am I doing something wrong?

ps: I know it was announced that tech support was moved to SO, but thought that I might as well post it here since a lot of tech people are also hanging around here. Here's the link to SO: http://stackoverflow.com/questions/9603353/google-maps-api-v3-svg-graphics-clip-disappear-when-zooming

[Coen de Jong]

OK, so I'm making progress. If you look at the test link right now you'll see that in Chrome the arrows stay where they need to be pretty consistent whatever zoom level you are at. Safari still looses the entire SVG graphic past a certain zoom level. Even normal Google InfoWindow instances have this problem, as you can see at the test website with the last marker (zoom out a little to see it).

Judging on this I'm thinking there is actually a bug in Google Maps right now. Can someone else confirm that the InfoWindow itself (not the shadow) disappears after a certain zoom level (somewhere after the middle level)? Like in this screenshot: http://cl.ly/3F2M0B021s3D0a0p0b1N

Any help on this appreciated. I'm going to put a bug report in Google Maps issue tracker in a moment.

[DiTieM]

You are running out of precision. When zooming control the size of the numbers you are drawing. Each zoom increase the precision in 2. So high zooms are 2^zoom. SVG will have an overflow. You need to clip your content.

[Coen de Jong]

Sorry to say this but I don't get what you are saying.. Running out of precision? Increase in 2? SVG will have an overflow? Clipping content?

On 10 mrt 2012, at 08:50, DiTieM wrote:

You are running out of precision. When zooming control the size of the numbers you are drawing. Each zoom increase the precision in 2. So high zooms are 2^zoom. SVG will have an overflow. You need to clip your content.

--
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/-/nf-iY5Vn6wIJ.
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.

[DiTieM]

Sorry. Your SVG overlay must have some coordinates. For example you say, I want to draw a path from 10,10 to 15,20. Now imagine that 10,10 is Sydney and 20,20 is New York. If you are in zoom level 0, you will have 10,10 and 20,20. In level 1, it would be 20,20 for Sydney and 40,40 for New York. In level N, 2^N*(10,10) and 2^N*(20,20). So, how big is you SVG size? is is the size of the "screen" or the size of the "map"? If it is the size of the map, you have a SVG of 2^24 (max zoom) "pixels" by the size of a tile (2^8). Can you imagine that? You have an SVG of 2^32 pixels. Think how things go inside the browser, having to manage all those "big" numbers is very easy to run into overflow.

A very easy way to detect this is to draw a thick line and observe. When you are making a zoom, the line will become a bit thinner (error of rendering in such huge coordinates).  

So, the way to fix this is by clipping. Your SVG need to be always as big as the screen, and you need to draw in it what corresponds to the size of the screen. Technically this should not happen if the SVG would be well designed (you can play with the attribute viewBox, but it wont help much), but...

Hope it is more clear now :)

[Chris Broadfoot]

I suggest using Berry's approach:

On Sun, Mar 11, 2012 at 8:40 AM, Berry Ratliff <brat...@provide.net> wrote:

Have you considered using the API to draw your polys ?  You could draw
your arrows in an "OverlayView".  You could use CANVAS rather than
SVG.  I believe every common browser with support for SVG also has
support for CANVAS.

Additionally, please star this issue and add your comments:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1811

Chris

--

G+: http://chrisbroadfoot.id.au/+

Twitter: http://twitter.com/broady

[Coen de Jong]

Sorry for not replying to this thread for a while. I had some other personal problems to deal with first.

Now to reply to all the things being said:

1. I have not experienced a lot of svg performance problems across all the browsers I could test (so no IE7-8). So the running out of precision is unknown to me. It's not that the whole world is one giant svg element, every point to point is a single svg element. Of course if someone places two markers at opposite ends of the world the svg is going to be huge at high zoom levels, but I could do some sorcery with the rendering of that, like only drawing what the user sees + a margin or so.

2. I could move on with Google to canvas, but then it is all of a sudden a lot harder to draw curved lines with arrowheads again, as canvas is simply pixels and I have to do maths again to figure it out. Not enjoying the foresight of my next encounter with maths...

3. @Berry: yes, a lot of JS libraries. You might be right that a vanilla map with just the lines would be best to see if it is something maps related or a conflict in libraries. Hmm.

4. @Chris: yes starred and added to the discussion that it would be a great idea to add curved poly's or a function to pass to the drawing of the lines as well. On a sidenote, have you seen this issue? It's about InfoWindows disappearing in Safari after a particular zoom level. I think it's pretty serious but am puzzled why it's not picked up yet by you guys...

Thanks people for the wonderful feedback you've given me. I'm going to look into all the options and report to you what my findings are in the near future.

On Monday, March 12, 2012 11:49:42 PM UTC+1, Chris Broadfoot (Google Employee) wrote:

I suggest using Berry's approach: