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.

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?

Thanks

share|improve this question
    
I'm not sure about javascript, but with silverlight you might be able to darken the tile when the TileLoading event fires. –  Kirk Kuykendall Aug 26 '11 at 13:28
add comment

4 Answers

up vote 3 down vote accepted

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.

share|improve this answer
    
To save you some time: na.arcgis.com/UCdemo/common/greyScaleMapLayer.js –  Sasa Ivetic Aug 26 '11 at 16:55
    
@Sasa thanks! Probably should have included that in my post... –  Derek Swingley Aug 26 '11 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 Aug 29 '11 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 Aug 30 '11 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 Aug 30 '11 at 20:33
show 2 more comments

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.

share|improve this answer
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 Aug 26 '11 at 1:58
add comment

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.

share|improve this answer
    
excellent, thanks so much for this –  Stephen Lead Aug 29 '11 at 2:03
add comment

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.

share|improve this answer
    
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 Aug 30 '11 at 23:02
    
Thanks Stephen, I hadn't noticed that. –  Mike Long Aug 31 '11 at 17:40
add comment

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.