Tuesday, August 11, 2009

Images on v3 map

BoundsBox extension was used for drawing rectangles on map a few posts ago.

The new version of BoundsBox (1.0) has option to insert images inside (visible or invisible) rectangles. The image is attached in a draggable pane of map. So it pans with map. It scales when map is zoomed. It is attached below markers, so it doesn't eat marker clicks. The behavior is equal to GGroundOverlay of v2 api.

A few more options and methods were introduced with the new version. They mainly serve image handling like opacity and z-index. Events 'imageloaded' and 'imageloaderror' are also provided.

See an example with a table of options and methods.

Update v1.1

The most latest version provides also an alternative constructor KmBox(). Instead of LatLngBounds it takes LatLng and kmX, kmY dimensions as its parameters. As a side product we got LatLng.destinationLatLng(bearing, distance) method. That calculates LatLng 'that many kilometers from this LatLng to that compass bearing'.


Mario said...

can you add an IE .png fix for that like John D. Coryat did on this file?


didnt get it to work on my own...

Esa said...

I don't have IE6 available now.

A separate PNG Fix CSS behavior file is a simple solution.

Try this one.

Mario said...

its not only IE6 - using IE8

anyway, successfully implemented the png fix you suggested by adding a class to img
(image.className = this.opts.cssClass || this.opts.className || 'pane_image';)

now image shows correctly in IE only after zoom has changed but not on first load


Esa said...

Adding CSS class to img is a great idea.

Nice example. I will look into it very soon.

Mario said...

for some odd reason it only fails on my pc at work - at home everything works as aspected

anyway - thx again for your help and great examples