Extend MapImageLayer

[Ranga_Tolapi]

I am looking for the possible ways to extend MapImageLayer to return a greyscale map image (using TypeScript). Or any other way to get the greyscale image from a map service? Any suggestions/samples please.

Your support is sincerely appreciated.

Rene Rubalcava‌ Matt Driscoll Juan Carlos Franco Esri Technical Support

arcgis api for javascript 4.x‌ greyscale typescript mapimagelayer canvas

HTML5, CSS, JavaScript, and JavaScript Frameworks

[TanuHoque]

Hi Ranga,

The source of a mapImage layer is always a dynamic map service. When dynamic map service is enabled with 'dynamicLayers' capability (which is the case by default since may be 10.3), a client can pass in a drawinInfo (i.e. renderer) in an export request to ask the map service to draw features using the drawingInfo client passes.

Please let me know if I misunderstood what you asked for.

Thanks.

Tanu

[Ranga_Tolapi]

Hi Tanu,

Thanks for the reply.

To elaborate, we got a colourful map service which is being used as a Basemap in our JavaScript based application. We got a new scenario where Basemap need to be shown also in Greyscale. We are exploring the possible and probably the best ways to achieve this.

Time being, we created an additional Greyscale map service. But don’t want to maintain 2 map services.

Note: We are not looking for solutions based out of CSS based filters for browser.

Thank you

[Noah-Sager]

Tanu already explained how you can achieve this with the MapImageLayer, which is to override the default renderer.

Take a look at this example: MapImageLayer - set renderer on sublayers

Another option is just to use a light or dark gray vector basemap.

[Ranga_Tolapi]

Our custom Basemap contains 500+ layers including group layers, made with all type of geometries (Point, Line, Polygon and Annotation) and complex symbology was used. Can I apply “only color” through rendering across all the layers at once for every request to the MapImageLayer?

[Ranga_Tolapi · Accepted solution]

It's perfectly feasible with ArcGIS API for JavaScript v4.18 (and above), need to use effect property for MapImageLayer.

var layer = new MapImageLayer({
  url: "...",
  effect: "grayscale(100%)",
});