8

Stamen Designs have made a beautiful Hurricane Tracker application which uses a "dark" mode of the Bing Maps backdrop.

enter image description here

This is perfect for directing people's attention to the overlay rather than the background.

Is it possible to access this "dark" version of Bing Maps within the ArcGIS Server JS API?

Improve this question
1
  • I'm not sure about javascript, but with silverlight you might be able to darken the tile when the TileLoading event fires.
    – Kirk Kuykendall
    Commented Aug 26, 2011 at 13:28

5 Answers 5

Reset to default
4

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.

Improve this answer
1
  • 1
    Hurricane Map uses Flash's ColorMatrixFilter and ColorTransform to invert and desaturate the Bing tiles on the fly - that's good to know, thanks.
    – Stephen Lead
    Commented Aug 26, 2011 at 1:58
3

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.

Improve this answer
0
3

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.

Improve this answer
6
  • To save you some time: na.arcgis.com/UCdemo/common/greyScaleMapLayer.js
    – Sasa Ivetic
    Commented Aug 26, 2011 at 16:55
  • @Sasa thanks! Probably should have included that in my post...
    – Derek Swingley
    Commented Aug 26, 2011 at 17:00
  • This is great, thanks. It doesn't work in IE8, but at least it degrades gracefully - the basemap is still shown, but in colour
    – Stephen Lead
    Commented Aug 29, 2011 at 2:00
  • @Stephen: I played around with the code today, and noticed they're actually proxying the images in order to allow the code to work. If you don't proxy the VE map tiles through your local server (namely if the image elements do not appear to come from the same domain), you will NOT be able to get this to work properly. The getImageData/toDataUrl() functions will throw security exceptions when they are called. IMO, since proxying is already required, I'd do image processing in the proxy method and not in JavaScript.
    – Sasa Ivetic
    Commented Aug 30, 2011 at 19:37
  • FWIW you can get it to work in IE simply enough by extending the VETiledLayer and setting the css filter on the map tile (does NOT work in any other browser .. sorry about ugly JS): (function(){ dojo.declare("GreyScaleVELayer", esri.virtualearth.VETiledLayer, { _tileLoadHandler: function(evt) { evt.currentTarget.style.filter = "gray invert"; this.inherited(arguments); } }); })();
    – Sasa Ivetic
    Commented Aug 30, 2011 at 20:33
1

I have actually seen an Esri example of them doing this at one of the Technical Sessions during the UC. Unfortunately it was just a picture in a slide so I can't point you to any source code. Follow the link below and take a look at slide 7. It appears that they are using the HTML5 Canvas to change the tone of the images.

http://proceedings.esri.com/library/userconf/proc11/uc/tw-ppts/tw_1463.ppt

Hope this helps you in the right direction.

Improve this answer
1
  • Thanks for sharing this PPT. In case you hadn't noticed it yet, there are hyperlinks on many of the images in this PPT. The "canvas" image on slide 7 links to the demo.
    – Stephen Lead
    Commented Aug 30, 2011 at 23:02
0

In the years since I posted this question, Esri have released their own version of the dark gray basemap which you can easily add to any ArcGIS JS API maps.

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.