topic Re: convert Basemaps to grayscale in ArcGIS JavaScript Maps SDK Questions

convert Basemaps to grayscale

darrenjohnson — Thu, 28 Jul 2011 15:08:56 GMT

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??

Re: convert Basemaps to grayscale

derekswingley1 — Thu, 28 Jul 2011 15:38:32 GMT

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.

Re: convert Basemaps to grayscale

darrenjohnson — Thu, 28 Jul 2011 15:53:43 GMT

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.

Re: convert Basemaps to grayscale

darrenjohnson — Thu, 28 Jul 2011 16:59:06 GMT

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

Re: convert Basemaps to grayscale

derekswingley1 — Fri, 10 Dec 2021 22:26:19 GMT

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"
>

Re: convert Basemaps to grayscale

darrenjohnson — Fri, 10 Dec 2021 22:26:21 GMT

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) }

Re: convert Basemaps to grayscale

derekswingley1 — Thu, 28 Jul 2011 20:10:50 GMT

Glad you got it working!

Re: convert Basemaps to grayscale

SarahNoakes1 — Tue, 19 Feb 2013 08:25:51 GMT

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

Re: convert Basemaps to grayscale

ReneRubalcava — Fri, 10 Dec 2021 22:26:24 GMT

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/

Re: convert Basemaps to grayscale

AdrianMarsden — Fri, 19 Jul 2013 12:56:19 GMT

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

Cheers

ACM

Re: convert Basemaps to grayscale

AdrianMarsden — Thu, 10 Oct 2013 14:06:47 GMT

Still no-one got any ideas for IE10+