javascriptopenlayersopenlayers-5

Openlayers 5 Darken the Map

I want to have a dark map just like in the photo in order to make the other features inside the other layers more visible. What is the best approach to achieving this?

  map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({
          wrapX: false
        })
      }),
      trackLayer,
      circleMarkerLayer,
      missionLayer,
      planeLayer,
      vesselLayer
    ],
    target: 'map',
    controls: ol.control.defaults({
      attributionOptions: {
        collapsible: false
      },
      attribution: false
    }),
    loadTilesWhileAnimating: true,
    view: view
  });

Result example

Solution

  • You can look at the ol-ext lib to apply color filters on layers.
    See example online: https://viglino.github.io/ol-ext/examples/filter/map.filter.colorize.html
    coloris filter