Is it possible to access the Bing Maps "dark" mode in the ArcGIS JS API?

I don't know the ins-and-outs of the ArcGIS JS API but I can tell you that the MSNBC Hurricane Map uses Flash's ColorMatrixFilter and ColorTransform to invert and desaturate the Bing tiles on the fly.

I'm pretty sure that's not possible with JS in a cross-browser way. You might have some success if the Bing tiles are served with cross-domain (CORS) permissions and if the ArcGIS API allows you to render tiles using the HTML canvas element. Or perhaps you could proxy the tiles and modify them server-side, but you'd have to check the Bing terms before doing that, of course.


Inverting and Desaturating images is certainly possible in JS. Check out the Pixastic library.

And the specific code: Invert and Desaturate

The trick will be intercepting the Bing Map images in JS and applying the two effects to them. Certainly possible, but not easily accomplished. All the images you are interested in are in a div with id of map_layerX, where X is the layer ID (in the case of a simple map with only the Bing maps layer, it'll be map_layer0). That's assuming the id of your map div is "map". Firebug will be your friend.


Here's a JS API app that was shown at this year's Esri User Conference demoing similar functionality: http://na.arcgis.com/UCdemo/traffic.html

I'm not sure how or if it works in IE.

Basemap tiles are loaded from the ArcGIS Online Streets basemap and then converted to grayscale. This is also the app that uses Canvas referenced in slide 7 of the presentation Mike L linked to.