Polyline thickness and zoom

[Enrico]

Hi,
I start to play with API v3 and I have a conceptual problem:
I need something like traffic overlay but with own data.
Basically I need to print two line (one for every direction of a
street) and dynamically change the color.

The main problem is what can I use for this: polyline or polygons?
- with polyline the thickness of it is the same in every zoom level
so, if i see two lines in zoom level 8, i see only one on 15 because
they are overlapped.
- with polygon on zoom 15 (f.e.) i can't see them because are too
small (i try to print a path with thickness 1 and printed like a
street)

I try to understand what use google in traffic but I can't.

Any help?

I will use javascript API v3

Thank!

[Ben Appleton]

It sounds like you need your 2 Polylines to stay a minimum distance apart as you zoom out, so they don't merge into 1 line.  A simple hack would be to render a thin opaque black Polyline down the middle of the road with a higher zIndex - that would divide the 2 Polylines.  Another alternative would be to offset the 2 Polylines in JS, but that would be complex and slower.

Good luck!
Ben

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
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.

[Enrico]

Thank you for your fast reply Ben,

I think that the solution of black poly is easy but I try it in a
small page that I have in local to pick the coords of polyline paths,
and when I have a closest zoom the two lines are too far and not seem
a two directions streets. furthermore if i use a large zoom, they
merge into 1 (and the black separator is over the only that I see).

I see that it's possible to trigger the change zoom level on map, so I
think to control it and change the thickness of lines or change the
offset, but y have a lot of small polyline (like traffic, each one
with different color) and i must change all. I think in an array of
polyline and a for to change alls, but it seems a very expansive
process...

I just find an example of drawing parallel lines (http://
wtp2.appspot.com/ParallelLines.htm) and I think that i can use the
alghoritm to calculate the coords of one of two polylines every time
that i change zoom. I think it can work but it seems more expansive
that the other.

In traffic seems that they use polygons, not polyline, but seems that
they can control the thickness.
Any idea?

Thank!

On 8 jul, 10:50, Ben Appleton <apple...@google.com> wrote:
> It sounds like you need your 2 Polylines to stay a minimum distance apart as
> you zoom out, so they don't merge into 1 line.  A simple hack would be to
> render a thin opaque black Polyline down the middle of the road with a
> higher zIndex - that would divide the 2 Polylines.  Another alternative
> would be to offset the 2 Polylines in JS, but that would be complex and
> slower.
>
> Good luck!
> Ben
>

> On 8 Jul 2010 18:28, "Enrico" <enrico.giro...@gmail.com> wrote:
> Hi,
> I start to play with API v3 and I have a conceptual problem:
> I need something like traffic overlay but with own data.
> Basically I need to print two line (one for every direction of a
> street) and dynamically change the color.
>
> The main problem is what can I use for this: polyline or polygons?
> - with polyline the thickness of it is the same in every zoom level
> so, if i see two lines in zoom level 8, i see only one on 15 because
> they are overlapped.
> - with polygon on zoom 15 (f.e.) i can't see them because are too
> small (i try to print a path with thickness 1 and printed like a
> street)
>
> I try to understand what use google in traffic but I can't.
>
> Any help?
>
> I will use javascript API v3
>
> Thank!
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Maps JavaScript API v3" group.
> 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> .

[Ben Appleton]

In traffic they use parallel lines, but these are rendered as image tiles by a server.  I would be curious to see how fast parallel lines could be in javascript.  You may want to try changing your polyline coordinates on map event zoom_changed.

> To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.

[Enrico]

The sample that i find is made using v2 of API.
I want to try to rewrite it for v3 because i like the idea of an
object child of parallel line but with the possibility to add an
offset to paint like a parallel of other poly.
I think to add something to change the thickness with the zoom.
I will try it to see results in velocity and effects

thank for help!

On 8 jul, 12:43, Ben Appleton <apple...@google.com> wrote:
> In traffic they use parallel lines, but these are rendered as image tiles by
> a server.  I would be curious to see how fast parallel lines could be in
> javascript.  You may want to try changing your polyline coordinates on map
> event zoom_changed.
>

> >> google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com><google-maps-js-api-v3%2B

[Enrico]

Hi, i have a little problem but i think is a javascript knowledge
problem:

I normally use Java, so I think will be a good idea define an "object"
like parallelPolyline that is a "child" of google.maps.polyline.
I try to find how do something like "extends" in Java because i need
only to add a parameter and re-write a method.

I know that javascript isn't java, but you know if is possible? Any
usefull link?

Thank!

[William]

On Jul 9, 12:48 am, Enrico <enrico.giro...@gmail.com> wrote:
>
> I normally use Java, so I think will be a good idea define an "object"
> like parallelPolyline that is a "child" of google.maps.polyline.
> I try to find how do something like "extends" in Java because i need
> only to add a parameter and re-write a method.
>
> I know that javascript isn't java, but you know if is possible? Any
> usefull link?
>

javascript objects are based on prototypes, which are different to
java classes, for details see this link:

https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Details_of_the_Object_Model

...

[Enrico]

Thank you very much, very interesting link.

Finally i used the same method of
http://wtp2.appspot.com/ParallelLines.htm
that is an implementation of google.maps.OverlayView() and it work.

Thank to everybody

> https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Details_of...
>
> ...

[William]

On Jul 9, 6:20 pm, Enrico <enrico.giro...@gmail.com> wrote:
> Thank you very much, very interesting link.
>

> Finally i used the same method ofhttp://wtp2.appspot.com/ParallelLines.htm

> that is an implementation of google.maps.OverlayView() and it work.
>

For the parallel algorithm, I translated some old C code I wrote years
ago into javascript, and made a Centerline class which can calculate a
parallel path using a MVCArray. This array is updated on the map's
zoom_changed event, which updates the polyline:

http://www.william-map.com/20100710/1/parallel.htm

but with 350 street center lines it is *very* slow in IE:
http://www.william-map.com/20100710/1/adelaide.htm

...

[bratliff]

It seems to me you will have to determine the tangent at each vertex
in order to have a fixed displacement from each vertex along the
perpendicular to the tangent. It requires interpolation along each of
two line segments connecting each vertex with its two immediate
neighbors in order to have two equidistant verticies from which the
tangent can be determined. It is feasible. It is a lot of overhead
for JavaScript.

[William]

On Jul 12, 1:40 am, bratliff <bratl...@umich.edu> wrote:
> It seems to me you will have to determine the tangent at each vertex
> in order to have a fixed displacement from each vertex along the
> perpendicular to the tangent.  It requires interpolation along each of
> two line segments connecting each vertex with its two immediate
> neighbors in order to have two equidistant verticies from which the
> tangent can be determined.  It is feasible.  It is a lot of overhead
> for JavaScript.

yeah that's what the example does, but the fixed displacement is in
mercator units (map pixels) and the polylines are stored in latlngs,
so there's large overhead reprojecting the data. To remove the
reprojection overhead, I'll do an example with the data in mercator
using raw SVG/VML.

This will also give a performance comparison with the V3
google.maps.Polyline, which is a heavyweight implementation. I am sure
that javascript will be quick enough for the parallel calculations.

[William]

I have done some testing with all streets as SVG/VML on a single
OverlayView, using data in mercator coordinates.

The data is approximately 350 lines with a total of around 1000
vertices.

Performance test: average time taken in OverlayView.draw() method for
3 redraws.

Test 1. Draw Street Center Lines
http://www.william-map.com/20100715/1/streets.htm
IE 6: 808ms
IE 8: 271ms
FF 3.6: 94ms
Chrome 5.0: 28ms
Safari 5.0: 32ms
Opera 10.6: 27ms
iPhone 3GS: 326ms

Test 2. Draw Parallel Lines
http://www.william-map.com/20100715/1/parallel_streets.htm
IE 6: 1703ms
IE 8: 312ms
FF 3.6: 100ms
Chrome 5.0: 31ms
Safari 5.0: 34ms
Opera 10.6: 33ms
iPhone 3GS: 365ms

Difference: due to Parallel calculations
IE 6: 895ms
IE 8: 41ms
FF 3.6: 6ms
Chrome 5.0: 3ms
Safari 5.0: 2ms
Opera 10.6: 6ms
iPhone 3GS: 39ms

The IE6 time was doubled, but others were around 10 percent worse.
IE8 is similar to iPhone performance!

Test 3. Complex lines: 4 Parallel and Center (total of approx 5000
vertices)
http://www.william-map.com/20100715/1/multiple_streets.htm

this test shows that complex SVG/VML rendering with parallel
calculations is possible in javascript on modern browsers.

[bratliff]

You may have to determine the centroid for the shape in order to
always displace away / toward the center of gravity. Otherwise,
transitions from convex to concave will cause the parallel line to
cross the original line.

[William]

On Jul 15, 10:49 pm, bratliff <bratl...@umich.edu> wrote:
> You may have to determine the centroid for the shape in order to
> always displace away / toward the center of gravity.  Otherwise,
> transitions from convex to concave  will cause the parallel line to
> cross the original line

yeah that's a good idea. And I suppose it's wrong to use individual
polylines as the basic geometry type, because it's actually a road
network, and I would need to consider all intersections of paths on
the network.

...