0

I am trying to invert the toner layer here, and maybe add a color tint to it as well as you can see here on Map Stack : http://mapstack.stamen.com/edit.html#toner[invert=1,tint=$1e88e5@100]/11/37.7547/-122.3513

Although, I'm not sure how would I use that url as a parameter since I don't see it reflect on the map instance.

The API in OpenLayers has no information on how to manipulate the Stamen map.

The Code

<TileLayer
id="nightmode"
title="Night Mode"
source={
  new Stamen({
     layer: 'toner',
     params: {
     layers: "",
     format: "image/png",
     tiled: true
   }
 })
}
/>
Inexperienced_Burger
  • 23
  • 3

1 Answers1

1

In OpenLayers 6 similar to the grayscale OSM in this example https://openlayers.org/en/main/examples/semi-transparent-layer.html you could specify a className for the layer and use an invert css filter https://codesandbox.io/s/gifted-newton-mk9th?file=/main.js

An alternative would be to use a globalCompositeOperation similar to https://codesandbox.io/s/globalcompositeoperation-fktwf

Mike
  • 16,042
  • 2
  • 14
  • 30