convert Basemaps to grayscale

[darrenjohnson]

I am currently trying to find a way if its possible to use dojo or some javascript to convert a basemap image to grayscale.  I have successfully turn the entire map div to grayscale using the the following css class

.target {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)} 

the problem is the entire div turns gray when i only want the background image to turn grayscale.  I still want my dynamic layers to be color.

Any ideas or is there some imageparameter I can set??

[derekswingley1]

There was a cool demo from this year's UC that does exactly this:  http://na.arcgis.com/UCdemo/traffic.html

But it doesn't work in IE because it's using canvas to transform the full color tiles to a gray scale tiles. If you absolutely have to use IE, you might be able to use a shim like excanvas but then I'd be worried about performance... Google's Chrome Frame is also a solution if you absolutely have to run in IE.

[darrenjohnson]

Yes I must use IE.  Not ideal I know, but it must be.  I thought I might be getting somewhere with

img[src$=".jpg"]{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}

but i can't seem to find a way to set the image format for a ArcGISTiledMapServiceLayer layer.

[darrenjohnson]

#map_layer0{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) }

That little bit of css seems to be working.  Don't know if map_layer0 div is a constant though.

[derekswingley1]

Hmm...one problem is that URLs for tiles don't have a file extension, see:  http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/2/0/0

They are added via img tags though so you might be able to do this...here's an example of the HTML for a tile in a tiled service(taken from http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer?f=jsapi):

<img id="map_layer0_tile_2_0_1" 
    class="layerTile" style="left: 450px; top: -126px; width: 256px; height: 256px; visibility: visible; "     
    src="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/2/0/1"
>

[darrenjohnson]

Hmm...one problem is that URLs for tiles don't have a file extension, see:  http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/2/0/0

They are added via img tags though so you might be able to do this...here's an example of the HTML for a tile in a tiled service(taken from http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer?f=jsapi):

<img id="map_layer0_tile_2_0_1" 
    class="layerTile" style="left: 450px; top: -126px; width: 256px; height: 256px; visibility: visible; "     
    src="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/2/0/1"
>

we posted at the exact same time.  I'm not sure exactly why this is working but it seems to be.

      img[id*='map_layer'] {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) }
        .esriBasemapGalleryNode{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); font-size:small; }
        #map_layer0{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) }

[derekswingley1]

Glad you got it working!

[SarahNoakes1]

There was a cool demo from this year's UC that does exactly this:  http://na.arcgis.com/UCdemo/traffic.html

This link is broken - do you know if I can find this anywhere else?  I need a grayscale map that will work in all browsers - I've got it working in IE, but not Chrome or Firefox.

Thanks,

Sarah.

PS.  I've also just noticed that it only works in IE when zooming - panning around doesn't pull in the new tiles.  Back to the drawing board...

[ReneRubalcava]

For Firefox, you'll need to add an svg filter to your page.
http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

And then the way I do it as I give my layers an "id", so something like

osm = new esri.layers.OpenStreetMapLayer({
id: 'osmLayer'
}); 

Then in the CSS you can do this.

#map_osmLayer img
{
filter: url(filters.svg#grayscale) !important; /* Firefox 3.5+ - notice the svg from above */
filter: gray !important; /* IE5+ */
-webkit-filter: grayscale(1) !important; /* Webkit Nightlies; Chrome Canary */
} 

That way you get control of individual layers, which is pretty cool.

If you have chrome, there is a whole suite of cool css filters you could play with for your basemaps.
http://www.odoe.net/apps/mapstyler/

[AdrianMarsden]

Apparently IE10 doesn't do DXImageTransform - so has anyone got any ideas how to do this in IE10 ?

Cheers

ACM