Monday, July 20, 2009

Drawing rectangles with V3

The experimental API v3 does not support polylines yet. We don't need polyline support for drawing simple rectangles. We can make browser to draw them.

BoundsBox for v3 is an extension that takes LatLngBounds object as an argument and draws the bounds on map. A DIV is created and made an OverlayView overlay object.

Styling of the rectangle is made with CSS. You can put text content also and even a background image. 'click' event is available, 'mouseover' is easily attached.

See the example that visualizes bounds that v3 geocoder returns.

6 comments:

jeanine said...

I used your bounding box code to make lines. What I really need is the pixel values of latlng objects. The application (a geography/place finding game) works, somewhat crudely. It doesn't work the first time! What I do is set the src of an image tag to 1 of 4 choices of gifs. Two of the gifts are diagonal lines with the rest transparent. Any suggestions would be appreciated. I need a better explanation of draw.
The file is at http://newmedia.purchase.edu/~Jeanine/games/maps/mapxmlnextarrow.html
My muddied version of your code is called getpixels.js.

jeanine said...

I used your bounding box code to make lines. What I really need is the pixel values of latlng objects. The application (a geography/place finding game) works, somewhat crudely. It doesn't work the first time! What I do is set the src of an image tag to 1 of 4 choices of gifs. Two of the gifts are diagonal lines with the rest transparent. Any suggestions would be appreciated. I need a better explanation of draw.
The file is at http://newmedia.purchase.edu/~Jeanine/games/maps/mapxmlnextarrow.html
My muddied version of your code is called getpixels.js.

Esa said...

Brilliant idea to draw lines by scaling a diagonal line image.

Yes, OverlayView object is the only known way to access projection and make LatLng to pixel transformations in v3.

jeanine said...

Well, I uploaded what I have but it is pretty kludgy. For one thing, it doesn't work the first time and it is slow.
You can get to it by the previous link or from my examples page:
http://newmedia.purchase.edu/~Jeanine/jsexamples.html

I have versions of place finding using Processing and Flash. These use acquired maps.

Any help would be most appreciated.

Anonymous said...

I used KmBox to draw an opaque circle around a search area. I simply convert the search miles to kilometers, then convert it from radius to circumference.. and it looks great in chrome, firefox, and safari.

IE does not seem to handle .PNGs very well, and I ended up disabling the code for IE. I tested IE6 & 7 only.

Do you have any suggestions for using BoundsBox / KmBox overlays in IE?

Jerome said...

Esa,

I really appreciate all the maps work you have posted - great stuff.

On this one, in v1.1b,
http://koti.mbnet.fi/ojalesa/boundsbox/kmbox.htm

I like that you have created the kmBox option. I am not sure your last line to "Clone all the methods of BoundsBox()" is working as intended.

ln 284: KmBox.prototype = BoundsBox.prototype;

I tried setting opacity with myKmBox.setOpacity(0.7);...
and my opacity stays the same (as set in constructor) value.


Jerome