Rendering Maps on devices where Dark Mode has been selected

Question

I am rendering OSM map tiles onto a web page using HTML canvas drawImage. However where an end user has selected dark mode, I would like to reduce the luminosity of these displayed maps, yet still allow them to make sense to the user.

So far I have had moderate success, as follows:

First plotting the map tile using drawImage
setting globalCompositeOperation to "difference"
over plotting the map tile with a white rectangle of the same size
setting globalCompositeOperation back to "source-over"

But this simple colour inversion is not perhaps the best solution. Does anyone have any other suggestions.

score 0 · Answer 1 · answered Dec 02 '19 at 10:28

0

You could switch to a different tile server with a different map style. Check for example "CartoDB.DarkMatter" from Leaflet Provider Demo or MapBox Light & Dark.

answered Dec 02 '19 at 10:28

scai

20,297
4
56
72

You don't necessarily need to use Leaflet or MapBox. These are just URLs to tile servers with dark styles in case your code supports TMS or Mapbox GL. – scai Dec 02 '19 at 14:26
This depends on the specific map library you are referring to. Vector tile based rendering engines don't have to invert any colour, they use a completely different style for dark themed maps. Raster tile based rendering engines instead have to either switch to a different tile set or perform some magic conversions which will necessarily lead to a reduced user experience. – scai Dec 03 '19 at 14:11

score 0 · Answer 2 · answered Dec 04 '19 at 13:08

I have found a pretty good solution to this and it is as follows:

First set the canvas context filter to "hue-rotate(180deg)"
Then plot the map tile on the canvas using drawImage
Then set the canvas context filter to "none"
The set canvas context globalCompositeOperation to "difference"
Then over plot the map tile with a white rectangle of the same size
Finally set canvas context globalCompositeOperation back to "source-over"

score 0 · Answer 3 · answered Jun 17 '21 at 20:54

Maybe someone will still find this useful, it's some code i'm using for this purpose in my tar1090 project. Negative and positive contrast are probably clear and dim is basically just a brightness modification with inverted sign.

toggle function:

function setDim(layer, state) {
    if (state) {
        layer.dimKey = layer.on('postrender', dim);
    } else {
        ol.Observable.unByKey(layer.dimKey);
    }
    OLMap.render();
}

postrender function:

function dim(evt) {
    const dim = mapDimPercentage * (1 + 0.25 * toggles['darkerColors'].state);
    const contrast = mapContrastPercentage * (1 + 0.1 * toggles['darkerColors'].state);
    if (dim > 0.0001) {
        evt.context.globalCompositeOperation = 'multiply';
        evt.context.fillStyle = 'rgba(0,0,0,'+dim+')';
        evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
    } else if (dim < -0.0001) {
        evt.context.globalCompositeOperation = 'screen';
        console.log(evt.context.globalCompositeOperation);
        evt.context.fillStyle = 'rgba(255, 255, 255,'+(-dim)+')';
        evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
    }
    if (contrast > 0.0001) {
        evt.context.globalCompositeOperation = 'overlay';
        evt.context.fillStyle = 'rgba(0,0,0,'+contrast+')';
        evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
    } else if (contrast < -0.0001) {
        evt.context.globalCompositeOperation = 'overlay';
        evt.context.fillStyle = 'rgba(255, 255, 255,'+ (-contrast)+')';
        evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
    }
    evt.context.globalCompositeOperation = 'source-over';
}

toggle function when using LayerSwitcher:

function setDimLayerSwitcher(state) {
    if (!state) {
        ol.control.LayerSwitcher.forEachRecursive(layers_group, function(lyr) {
                if (lyr.get('type') != 'base')
                return;
                ol.Observable.unByKey(lyr.dimKey);
                });
    } else {
        ol.control.LayerSwitcher.forEachRecursive(layers_group, function(lyr) {
                if (lyr.get('type') != 'base')
                return;
                lyr.dimKey = lyr.on('postrender', dim);
                });
    }
    OLMap.render();
}

Rendering Maps on devices where Dark Mode has been selected

3 Answers3