[OpenLayers-Dev] Map Rotation

Gregers Gram Rygg gregersrygg at gmail.com
Mon Dec 21 09:02:39 EST 2009


On Thu, Dec 17, 2009 at 11:41 PM, Christopher Schmidt
<crschmidt at metacarta.com> wrote:
>  1. In Javascript/Images/DOM (ignoring Canvas for the moment), there is
>    no way to make an image exist on an angle.

That depends on what browsers you want to support ;) Most major
browsers now have support for CSS3 transformations that allow us to
rotate to any angle on the client side. Safari, Firefox, Chrome, and a
fall-back option for IE. Hopefully we could find a way to detect the
transform-capability by checking currentStyle or similar, and only
show the control for supported browsers.

I guess we still have to re-write some parts of OpenLayers. Like how
to calculate the map extent, modify getLonLatFromViewPortPx, rewrite
the layers to resize/load tiles when rotated, etc... but we'll get the
caching-benefits of tiling. And we don't have to do anything server
side. Except for labels :/ Which I guess might be a show stopper for
some. Theoretically I guess it would be possible to have several
rotated label-layers, and let the controller decide which is closest
to the current rotation. I.e. label-layer rotated (on map-server) to
North, East, South and West. Then the labels would never be more than
45 degrees off. Another option could be to add labels client-side. But
I don't know much about map-servers, so I'll leave that for others to
discuss.

WebKit (-webkit-transform) has supported rotations for a while:
http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transforms/Transforms.html

Firefox got -moz-transform in 3.5:
http://developer.mozilla.org/En/CSS/Using_CSS_transforms

Fall-back for IE (filters *ugh*), but it should work. MIT/GPL, so
could easily be ported to fit OpenLayers:
http://paulbakaus.com/2008/08/16/bringing-css-transform-to-internet-explorer/

Couldn't find any info about Opera, but they're working on CSS3, and
transformations is in the CSS3 draft
(http://www.w3.org/TR/css3-2d-transforms/). So I guess it's only a
matter of time.

Just a wild thought...
Merry Christmas to everyone!

Gregers



More information about the Dev mailing list