Introducing the Map Label utility library

[Chris Broadfoot]

Hi all,

A few of you who had watched my Google I/O talk* were wondering when we were going to release the Map Label utility library... wonder no more.

So, a quick introduction for this utility library:

 - Dynamic rendering of map labels using Canvas 2D*

 - Lots of rendering options — font size, font face, color, alignment

 - Control over zoom levels where the label is rendered

This library essentially came out of the work Luke & I did for this year's interactive I/O map: http://www.google.com/events/io/2011/embed.html

Demo:

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/examples/maplabel.html

Reference docs:

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/docs/reference.html

Source code:

http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/ 

Let us know how you go with it!

Chris

* Shameless plug: http://youtu.be/ATfdi-oYWzw

* Obviously, it only works in browsers that support Canvas :)

--
http://twitter.com/broady

[Joseph Elfelt]

For those that do not know (I had to look it up), IE9 is the first
version that supports canvas.

If you want to include labels in your app but you need to support non-
canvas browsers, then check out this post by Marc Ridley:
http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html

[Thoern]

Good work! that is a great funcionality

[Gary Little]

Chris, Luke,

What happens when you try to use this library with a browser that does
not support <canvas>? Does it gracefully switch to using a different
technique, fail, or...?

Gary

On May 24, 12:05 am, Chris Broadfoot <c...@google.com> wrote:
> Hi all,
>
> A few of you who had watched my Google I/O talk* were wondering when we were
> going to release the Map Label utility library... wonder no more.
>
> So, a quick introduction for this utility library:
>  - Dynamic rendering of map labels using Canvas 2D*
>  - Lots of rendering options — font size, font face, color, alignment
>  - Control over zoom levels where the label is rendered
>
> This library essentially came out of the work Luke & I did for this year's
> interactive I/O map:http://www.google.com/events/io/2011/embed.html
>

> Demo:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplab...
>
> Reference docs:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplab...
>
> Source code:http://code.google.com/p/google-maps-utility-library-v3/source/browse...

[Gary Little]

You can also create map labels using the InfoBox class in the V3
utilities library:

http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/

These labels don't use <canvas> so if you have a lot of labels on the
map performance may not be as fast as with Map Label. On the other
hand, it should work with those pesky old IE browsers.

Gary

> canvas browsers, then check out this post by Marc Ridley:http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps....

[Chris Broadfoot]

On Thu, May 26, 2011 at 2:18 AM, Gary Little <ga...@luxcentral.com> wrote:

What happens when you try to use this library with a browser that does
not support <canvas>? Does it gracefully switch to using a different
technique, fail, or...?

To be honest, I haven't tried. I'm guessing the browser will fail on the "getContext" method.

There's a few routes to go here:

1. Fail hard (current) 

2. Show no label on non-supported browsers

3. Throw a useful JS event (similar to current, I guess.)

4. Provide a method like "MapLabel.isBrowserSupported" so that the labels can be switched out for something else

5. Fall back to non-Canvas labels

To me, 3 and 5 are probably the most appealing. I'd like to hear others' thoughts on the subject.

Chris

--
http://twitter.com/broady

[Nianwei Liu]

Any plan to address polygon (find the be point inside the poly) label,
or even polyline to label along the line?

On May 25, 9:23 pm, Chris Broadfoot <c...@google.com> wrote:

[Chris Broadfoot]

No plans thus far Nianwei. It really came down to the 80/20 rule.

I'd love to see some smart logic that determines which labels to show based on an importance factor, though.

--
http://twitter.com/broady