nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

AdrianMarsden

Still no-one got any ideas for IE10+

AdrianMarsden

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

Cheers

ACM

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/

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

derekswingley1

Glad you got it working!

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

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

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

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.

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.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.