Tile Layer Overlay

[Chad Killingsworth]

For my v3 project, I needed a tile layer overlay. Since one didn't
exist, I wrote my own. I see questions about tile layers popping up
somewhat regularly, so I figured I'd share my class for others to use.

Tile Layer Script: http://search.missouristate.edu/map/mobile/examples/tileoverlay.js

Example Usage: http://search.missouristate.edu/map/mobile/examples/tileoverlay.htm

I fully expect (or maybe just hope) this class to be obsolete soon as
I anticipate that tile layer functionality will be part of the v3 api.

Chad Killingsworth

[bratliff]

On Nov 29, 6:58 am, Chad Killingsworth

Another option:

www.polyarc.us/sparsetile.js

www.polyarc.us/sparse
www.polyarc.us/road
www.polyarc.us/rail

It detects IE6 which requires AlphaImageLoader to display transparent
PNGs.

It compensates for getBounds errors at low numbered zoom levels for
which map wraping occurs, typically, just 0 & 1 unless the screen is
very large.

It adjusts out of range tile numbers near the International Date Line.

A single "Sparse Tile Layer Overlay" can handle multiple tile sets
without redundant OverlayViews with their redundant event listeners.

It is mapserver friendly. The "height" & "width" & "bbox" values
expected by mapserver are available to the "setUrl" method. The
traditional "x" & "y" & "z" tile values are also available to the
"setUrl" method.

xy.x = tile X offset
xy.y = tile Y offset
xy.X = tile width
xy.Y = tile height
xy.x0 = begin longitude
xy.y0 = begin latitude
xy.x1 = end longitude
xy.y1 = end latitude

It too is a stopgap unless the ability to manage multiple tile sets in
a single OverlayView is useful.

[Peter Dang]

Yes, I agree with Bratliff about your option, so we need to manage a multiple tile sets in
a single OverlayView.

 

Cheer, Thanks a lot Chad for your support in file js.

 

 

[Peter.MapTeam]

Hi Bratliff,

I try to apply to map server, but it didn't work..I don;t know the way
to use with map server, please help me.

Cheer,

[Chad Killingsworth]

I put 3 tile layers on a map each as their own OverlayView. I also put
the same 3 tile layers on a map in the same OverlayView. On an iPhone,
there is a pretty significant performance difference between a single
layer and 3 layers. However there was not a noticeable difference
between 3 layers in a single OverlayView or in multiple OverlayViews.
This may be due to the fact that I throttle the bounds_changed event
to only fire once a second. This leads me to believe that the vast
majority of the performance degradation with multiple layers comes
from the rendering and memory usage of that many DOMNodes and images
rather than from the events. Of course at much higher numbers of
layers there may indeed be a significant difference, however this
seems to be a pretty specialized optimization.

If I needed to display large numbers of tile layers simultaneously, I
personally would pursue a server side solution rather than having the
client render that many layers. Of course not everyone may have that
option.

Using my class, the performance of the map with 3 layers is
acceptable. Beyond that, your mileage may vary.

Chad Killingsworth

[bratliff]

On Nov 30, 2:27 pm, Chad Killingsworth

<chadkillingswo...@missouristate.edu> wrote:
> I put 3 tile layers on a map each as their own OverlayView. I also put
> the same 3 tile layers on a map in the same OverlayView. On an iPhone,
> there is a pretty significant performance difference between a single
> layer and 3 layers. However there was not a noticeable difference
> between 3 layers in a single OverlayView or in multiple OverlayViews.

The tile latency will mask the extra CPU usage, but, why compute
identical tile offsets in different OverlayViews ?

> This may be due to the fact that I throttle the bounds_changed event
> to only fire once a second.

Try using an "idle" event listener without timer interrupts.

> This leads me to believe that the vast
> majority of the performance degradation with multiple layers comes
> from the rendering and memory usage of that many DOMNodes and images
> rather than from the events.

The primary delay is the limited iPhone bandwidth.

> Of course at much higher numbers of
> layers there may indeed be a significant difference, however this
> seems to be a pretty specialized optimization.
>
> If I needed to display large numbers of tile layers simultaneously, I
> personally would pursue a server side solution rather than having the
> client render that many layers. Of course not everyone may have that
> option.

The tile sets may originate from different servers like:

www.polyarc.us/sparse

Even Google's own "HYBRID" tiles are split across hosts.

> Using my class, the performance of the map with 3 layers is
> acceptable. Beyond that, your mileage may vary.

A general solution ought to support Internet Explorer 6. It ought to
compensate for getBounds errors at low numbered zoom levels. It ought
to calculate tile offsets correctly for maps spanning the
International Date Line. The use of a timer interrupt just adds extra
overhead.

Peter,

Please provide a link, either V2 or V3, to what you are trying to do.
You ought to be able to build a proper URL for your server from the
examples.

[Chad Killingsworth]

> The tile latency will mask the extra CPU usage, but, why compute
> identical tile offsets in different OverlayViews ?

I did consider this while developing, but the math for the tile bounds
calculations isn't that intensive. I opted for ease of implementation
on options such as visibility, zindex and event handling as well as
trying to keep the code easy to understand. For each draw event on the
overlay, calculating the tile coordinates and bounds was taking around
12ms for the first time the code executed, then 1ms for each
subsequent draw event on an iPhone 3G (I used this because of the
slower processor and lower memory).

> Try using an "idle" event listener without timer interrupts.

That is an excellent suggestion. I just added the setTimeout
interrupts as a quick fix. I'll take a look at this.

> The primary delay is the limited iPhone bandwidth.

This should only be true on initial load. Once the images are cached,
I would expect processor and memory to be the constraints

> > If I needed to display large numbers of tile layers simultaneously, I
> > personally would pursue a server side solution rather than having the
> > client render that many layers. Of course not everyone may have that
> > option.
>
> The tile sets may originate from different servers like:
>
> www.polyarc.us/sparse

I was considering the option of having a server proxy requests and
dynamically composite the tiles together into a single image.

> A general solution ought to support Internet Explorer 6. It ought to
> compensate for getBounds errors at low numbered zoom levels. It ought
> to calculate tile offsets correctly for maps spanning the
> International Date Line.

All of these points are correct - and something I plan on looking
into. Although I'm not really that thrilled with spending a lot of
work on the IE6 support. It's less than 5% of my total traffic. But a
complete solution should handle it.

Thanks for the feedback,
Chad Killingsworth

[Peter Dang]

Hi Chad Killingsworth,

 

-  First of all, Thanks alot for your support in the title of google map API V3. I already applied your code and the TileOverlay.js file. It's work very good and  

untils now, I think your way is good and anyone want to add the tile layer like V2 can use this way in V3.

- Hope to work together with you in another way.

 

--

Thanks and Best Regards


Peter Dang
Professional Map team developer
------------------------------------------------------
Phone : +84 933 933 649
Axon Active Vietnam

[Peter Dang]

>
> Peter,
>
> Please provide a link, either V2 or V3, to what you are trying to do.
> You ought to be able to build a proper URL for your server from the
> examples.

Hi BratLiff,

 

It's work ok when I apply the code and inlude TileOverlay.js of Chad.

Thanks alot for your time, and please support this way to anyone who want to add overlay method like V2.

[bratliff]

On Nov 30, 8:39 pm, Chad Killingsworth

<chadkillingswo...@missouristate.edu> wrote:
> > The tile latency will mask the extra CPU usage, but, why compute
> > identical tile offsets in different OverlayViews ?
>
> I did consider this while developing, but the math for the tile bounds
> calculations isn't that intensive. I opted for ease of implementation
> on options such as visibility, zindex and event handling as well as
> trying to keep the code easy to understand. For each draw event on the
> overlay, calculating the tile coordinates and bounds was taking around
> 12ms for the first time the code executed, then 1ms for each
> subsequent draw event on an iPhone 3G (I used this because of the
> slower processor and lower memory).

For a handful of tile layer overlays, it may not matter. I am using
the same code for polys where it matters a lot. I cannot imagine the
overhead of separate OverlayViews with separate event listeners for
every state in the United States or even every province in Canada. I
cannot imagine the overhead of individual CANVAS elements for every
poly. A single common OverlayView enables polys to be combined in the
same CANVAS elements.

> > The tile sets may originate from different servers like:
>
> > www.polyarc.us/sparse
>
> I was considering the option of having a server proxy requests and
> dynamically composite the tiles together into a single image.

Great idea, especially if you have a campus WiFi network. You could
cache common combinations. You could bypass the AT&T network for
students on campus.

> > A general solution ought to support Internet Explorer 6. It ought to
> > compensate for getBounds errors at low numbered zoom levels. It ought
> > to calculate tile offsets correctly for maps spanning the
> > International Date Line.
>
> All of these points are correct - and something I plan on looking
> into. Although I'm not really that thrilled with spending a lot of
> work on the IE6 support. It's less than 5% of my total traffic. But a
> complete solution should handle it.

I agree, IE6 is a PITA but a lot of people still use it.

[Maps.Huge.Info (Google Maps API Guru)]

Very nice bit of work there.

I modified the tile overlay script to add an opacity.

Here's a test of this functionality:

http://www.usnaviguide.com/v3maps/v3tilelayer.htm

the js is at:

http://www.usnaviguide.com/v3maps/js/tileoverlay.js

-John Coryat

http://maps.huge.info

http://www.usnaviguide.com

http://www.zipmaps.net

http://www.radarnow.net - our most popular Android app: "Radar Now!"

[Chad Killingsworth]

I included the opacity in the main file. I've also now finished the
compilation using Closure-Compiler. The original file location is
referenced in the comments for those wanting the uncompressed version.

This version also only uses only calculates the tile coordinates and
viewport bounds once for a given map position and zoom.

Chad Killingsworth

On Jan 1, 3:55 pm, "Maps.Huge.Info (Google Maps API Guru)"

<cor...@gmail.com> wrote:
> Very nice bit of work there.
>
> I modified the tile overlay script to add an opacity.
>
> Here's a test of this functionality:
>
> http://www.usnaviguide.com/v3maps/v3tilelayer.htm
>
> the js is at:
>
> http://www.usnaviguide.com/v3maps/js/tileoverlay.js
>
> -John Coryat
>
> http://maps.huge.info
>
> http://www.usnaviguide.com
>
> http://www.zipmaps.net
>

> http://www.radarnow.net- our most popular Android app: "Radar Now!"

[Chad Killingsworth]

Tile Overlays now properly work on IE6 with one exception: opacity
does not work due to bugs when combined with absolute positioning.

Chad Killingsworth

On Jan 6, 1:42 pm, Chad Killingsworth

> >http://www.radarnow.net-our most popular Android app: "Radar Now!"

[John Coryat]

IE6 is a pain. Why is that dinosaur still bothering the world?

According stats
(http://www.w3schools.com/browsers/browsers_stats.asp), only 10% of
people use that browser any more. Perhaps adding a message like "Your
out of date browser will no longer work with our map. Please upgrade
to IE7 or use Firefox, Chrome or any other modern browser."

[Chad Killingsworth]

Personally, I don't care about IE6, but some people still are stuck
supporting it. It's less than 5% of my traffic.

Chad Killingsworth

[bratliff]

Old laptops cannot run Windows XP. Windows 98 cannot run IE7 nor
Chrome.

The "alpha" filter can control opacity for transparent GIFs but not
for transparent PNGs. IE6 requires the "alphaImageLoader" filter to
display transparent PNGs . It is incompatable with the "alpha"
filter. You can use either one but not both. "absolute postioning"
has nothing to do with it.

I have updated:

http://www.polyarc.us/sparsetile.js

to avoid naming conflicts with the API's OverlayView prototype, also
to hide several support functions.

The file:

http://www.polyarc.us/sparse

demonstrates the use of multiple unrelated tile sets. The WMS "bbox"
parameters are generated automatically. Unfortunately, the USGS OGC
server is frequently unavailable.

[Chad Killingsworth]

I spoke too soon. I found a workaround for IE6 and opacity. It's now
supported as well.

Chad Killingsworth

On Jan 7, 10:33 am, Chad Killingsworth

[Chad Killingsworth]

Absolute positioning caused the container div to clip the absolute
positioned images inside it when filter:alpha(opacity=XX) was applied
to the container. I found quite a few other sites complaining about
this as well. The solution was on IE6 position a div absolutely and
apply the opacity to it, then inside that div specify the image (which
may or may not have the PNG filter fix applied).

IE7 supports transparent PNGs, so I was able to forgo the nesting and
apply the filter:alpha(opacity=XX) directly to the image. In both
cases, the opacity had to be applied to the positioned element, rather
than the container.

Chad Killingsworth

[Chad Killingsworth]

Most of the functionality for tile overlays is now part of the V3 API.
You can see an example of how to implement a Tile Overlay (called an
ImageMapType) at http://code.google.com/apis/maps/documentation/v3/overlays.html#ImageMapTypes

For those still needing the additional functionality of my script
(such as opacity), it is still accessible. However, no further
development with it is planned.

Chad Killingsworth

On Nov 29 2009, 12:58 am, Chad Killingsworth

[Chris Apolzon]

Is there any way to display a roadmap or terrain layer without the text layers? I have a client who would like the simplicity of the roadmap view without the google-provided text.

> --
> 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.
>
>

[Esa]

On Jan 19, 9:58 pm, Chris Apolzon <apol...@gmail.com> wrote:
> Is there any way to display a roadmap or terrain layer without the text layers?  I have a client who would like the simplicity of the roadmap view without the google-provided text.

There are no text layers but the texts are in the map images.

Google has some different image sets online. Some of them might suit
your needs. You can find them by trying different one-letter values to
'lyrs'-parameter of the tile image url.

I think you will need a paid license to use those.

[Chris Apolzon]

Esa-

  Thanks!  By paid license are you referring to an Enterprise API account, or something different?

[Esa]

On Jan 20, 4:07 pm, Chris Apolzon <apol...@gmail.com> wrote:
> Esa-
>   Thanks!  By paid license are you referring to an Enterprise API account,
> or something different?

I don't know. In any case you must be careful with terms when
accessing tilesets that are not natively offered by API.

However I studied those tilesets again and I am not sure if you are
satisfied with any of them. The only map tiles without any texts are
the Terrain base tiles (lyrs=t) but they don't have streets on them!

You can see them here:
http://koti.mbnet.fi/ojalesa/v3/osm_dual.htm

If Open Streetmap has good coverage in the area you need, you might
find suitable tiles from CloudMade. They serve OSM tiles with many
style options.
http://maps.cloudmade.com/editor

[Chris Apolzon]

Actually, that terrain map is pretty close to what I need. I actually don't care about roads and the project is based in Africa. So as long as I can get clean maps of Africa, I'm happy.
Thanks again for looking into this.

[jatorre]

Hi,

I am using the bratliff SparseTileLayerOverlay. The reason is that it
supports time line over tiles. I have lot of information on the
pacific and without this it looks really bad.

My biggest concern now is that I cant seem to be able to adjust the
opacity. I either can set alpha to 0 or to 1, but nothing
intermediate.

I am not that interested in supporting IE6, but IE7 is probably good
idea :(

Any idea how could I make it happen? I tried setting:

"filter:","alpha(opacity=20)"
"-moz-opacity","0.2"
"-khtml-opacity", "0.2"
"opacity", "0.2"

But did not get success.

Thanks in advance.

Javier.