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

Finde mehr Beiträge mit dem Tag

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.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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