5

I've created a web map using the ArcGIS Javascript API, but I need my map to have a fixed rotation of 1.76.

The street grid of the map doesn't totally align with the cardinal directions, so it looks slightly off without the rotation.

I've searched through the API reference, but haven't had any luck so far.

Does anyone know how to do this?

Improve this question
4
  • 1
    I don't know if it's changed since then (July 2010), but this posting on an ArcGIS forum states that there is no rotation capability available in the Javascript API.
    – Michael Todd
    Commented Nov 15, 2010 at 4:15
  • Can you elaborate? What projection are you using? I vaguely remember seeing a css3 demo rotating an esri JS map but it was more of a "look at this neat thing I can do" rather than something that you would actually use...
    – Derek Swingley
    Commented Nov 15, 2010 at 16:40
  • 2
    You can in ARCGIS FLEX API but that not the answer you are looking for. Same as Google maps JavaScript no rotation but the FLEX version of the API allows it easily.
    – Mapperz ♦
    Commented Nov 15, 2010 at 19:14
  • 1
    As does the Silverlight API. It's odd that all but the JS API would allow for rotation. Must be an inherent limitation in JS functionality, i.e. it would probably require a third-party method to rotate the map.
    – Michael Todd
    Commented Nov 19, 2010 at 18:42

2 Answers 2

Reset to default
7

As of v3.2 of the ArcGIS Javascript API, there's no internal method of rotating the map, like there is in the Flex and Silverlight API's. You can perform some CSS3 transformations on your map. Here's an example of the CSS you could use:

#map
{
    -moz-transform:rotate(1.76deg);
    -webkit-transform:rotate(1.76deg);
    -o-transform:rotate(1.76deg);
    -ms-transform:rotate(1.76deg);
}

Or through JavaScript (using dojo):

var mapdiv = dojo.byId("map");
dojo.setStyle(mapdiv, "mozTransform", "rotate(1.76deg)");
dojo.setStyle(mapdiv, "webkitTransform", "rotate(1.76deg)");
dojo.setStyle(mapdiv, "oTransform", "rotate(1.76deg)");
dojo.setStyle(mapdiv, "msTransform", "rotate(1.76deg)");

One word of warning. If you use an extreme rotation, then try to navigate your map, you'll notice some weird behavior. For instance, maps will not pan in the direction you drag, but in the direction you would be dragging if the map wasn't rotated.

Improve this answer
1

As of 2023, in the ArcGIS Maps SDK for JavaScript v4, map rotation is built-in and easy to set using mapView.rotation:

view.rotation = 180;
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.