How to draw a thick polyline?

[gordon zhao]

I want to draw a polyline that has strokeWeight larger than 10px. Do you guys know how to do it? Thank a lot!

[geoco...@gmail.com]

On Jan 4, 11:19 pm, gordon zhao <gord.z...@gmail.com> wrote:
> I want to draw a polyline that has strokeWeight larger than 10px. Do you
> guys know how to do it? Thank a lot!

I think this is the thread that resulted in that limitation, you might
find some ideas:
http://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/f67ac86e75d2ba/57a9612a828de30b?lnk=gst&q=polyline+width+10+#57a9612a828de30b

-- Larry

[gordon zhao]

On Jan 5, 5:59 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

> On Jan 4, 11:19 pm, gordon zhao <gord.z...@gmail.com> wrote:
>
> > I want to draw a polyline that has strokeWeight larger than 10px. Do you
> > guys know how to do it? Thank a lot!
>
> I think this is the thread that resulted in that limitation, you might

> find some ideas:http://groups.google.com/group/google-maps-js-api-v3/browse_frm/threa...
>
>   -- Larry

Thanks Larry. I did read this thread before, so I know there is a 10px
limitation. Since I really cannot figure it out then I post this
thread. I tried putting circles on the polyline to make it look like a
thick line, but cannot control the overlapped part opacity.

[geoco...@gmail.com]

If I remember what happened correctly the google engineers decided to
limit the size to 10px for performance reasons. I thought someone
created an enhancement request to allow thicker lines, if so you could
vote for that, if not you could create one. I also thought that
bratliff's polylib solved the problem, did you read it differently?
Did you try it and it didn't work for you?

--Larry

[bratliff]

I have build a simple demo:

http://www.polylib.us/polycluster/coast

It also demonstrates variable weights depending on zoom level which is
something you cannot do with the API. If the weights array is
incomplete, it will scale the last element of the array by successive
powers of two to match the zoom level. A bug restricting the weight
to not exceed the tile size (typically 256) is fixed.

[gordon zhao]

Thank you Larry. Bratliff's solution is perfect for me.

[gordon zhao]

Thanks bratliff, I really appreciate your help! Your work just save me.

Just want to remind people that the polycluster point is slightly different from latlng. You can use
var point = {x:latlng.lng(),y:latlng.lat()};
to convert it.

[gordon zhao]

Hi bratliff, I just have another silly question. How do I remove a polycluster from the map? If I set it invisible and draw another polycluster, it will show both of them. I know for other object I can use setMap(null) to remove it, and do you have similar function to do it? Thanks!

[bratliff]

Typically, you never discard the entire PolyCluster. You can purge
individual polys with:

cluster.setPaths({polyname0:[],polyname1:[] , ... });

or

cluster.setPaths({polyname0:null,polyname1:null , ... });

You can also reload a poly with a different path.

The API uses one object per poly each with a separate "setMap".

PolyCluster uses one OverlayView to manage many polys in the same
"setMap".

You are correct about:

var point = {x:latlng.lng(),y:latlng.lat()};

Requiring every point of every poly to execute a "new
google.maps.LatLng()" constructor is insane, especially for large
polys. The application has to construct it. The API has to
deconstruct it through methods. It serves no purpose except to impede
performance. I have been unable to convince Google to offer an
alternative.

[bratliff]

I have updated the demo to display eight individual island polys
rather than one poly for the entire state. I believe is was confusing
giving the impression every poly required its own PolyCluster.

[gordon zhao]

Hi bratliff, what you have done is great. I finished my function with
your PolyCluster class. Thank you again.

In http://www.polylib.us/polycluster/coast:

l=[];

z={fill:1,stroke:1,fillAlpha:0.4,strokeAlpha:0.6,weight:
[1,1,1,1,1,1,2,4,8,16,32,64]};

for (q in poly)
{
l[q]={fillColor:color[i],strokeColor:color[i]};

cluster.setStyle(l,z);

i=(i+1)%8;
}
you can see cluster.setStyle(l,z) line. l is not a poly line object or
string but a style object, however, it still work. If I change l to q
it works as well. It won't bother me since both ways work, but I think
it's better to let you know.

Also kindly remind people that polycluster.js should be loaded after
google maps js.

[bratliff]

On Jan 9, 2:23 pm, gordon zhao <gord.z...@gmail.com> wrote:
> Hi bratliff, what you have done is great. I finished my function with
> your PolyCluster class. Thank you again.
>

> Inhttp://www.polylib.us/polycluster/coast:

>
> l=[];
>
> z={fill:1,stroke:1,fillAlpha:0.4,strokeAlpha:0.6,weight:
> [1,1,1,1,1,1,2,4,8,16,32,64]};
>
> for (q in poly)
> {
> l[q]={fillColor:color[i],strokeColor:color[i]};
>
> cluster.setStyle(l,z);
>
> i=(i+1)%8;
> }
> you can see cluster.setStyle(l,z) line. l is not a poly line object or
> string but a style object, however, it still work. If I change l to q
> it works as well. It won't bother me since both ways work, but I think
> it's better to let you know.

I know the documentation is rather sparse. "setStyle" accepts several
sets of arguments.

String Scalar:

cluster.setStyle("Hawaii" , {private style object});

String Vector:

cluster.setStyle(["Hawaii","Oahu", ... ] , {shared style object});

Object (private):

cluster.setStyle({Hawaii:{private style object},Oahu:{private
style object}, ... });

Object (shared):

cluster.setStyle({Hawaii:{private style object},Oahu:{private
style object}, ... } , {shared style object});

If both "private" & "shared" style objects are specified, conflicts
are resolved in favor of the "private" style element.

The demo uses the final case. Color attributes are "private". Other
attributes are "shared".

If you call with "q", you are using the first form with all attributes
"private". If you call with "l", you are using the last form with
some attributes "private" & some attributes "shared".

Actually, the demo is wrong. I should have placed the "setStyle" call
outside the loop. It is more efficient to do it in one call than to
do it in several calls. Single updates are applied to the screen
immediately. Bulk updates are deferred. For just eight polys, it may
be irrelevant. I will change the demo.

> Also kindly remind people that polycluster.js should be loaded after
> google maps js.

You just did.

For what it is worth, I have CANVAS mouse events working. It is much
quicker than SVG. It has the added capability of reporting multiple
hits if the polys overlap I will roll it out tomorrow if it does not
break anything.