Setting map rotation in ArcGIS API for Javascript?

Question

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?

• Michael Todd: 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.
• Derek Swingley: 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...
• Mapperz: 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.
• Michael Todd: 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.

Answer 1

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.

Answer 2

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;