Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question
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 Nov 15 '10 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 Nov 15 '10 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 Nov 15 '10 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 Nov 19 '10 at 18:42

1 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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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