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?

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;