I like to use openlayers map with dark and light styles. so how can I change map color or map style? My friend(Dear morteza) found a simple way that I answered in this post. my html file is:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=".github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 50%;
}
</style>
<script src=".github.io@master/en/v6.1.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
// function applies greyscale to every pixel in canvas
</script>
</body>
</html>I like to use openlayers map with dark and light styles. so how can I change map color or map style? My friend(Dear morteza) found a simple way that I answered in this post. my html file is:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 50%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
// function applies greyscale to every pixel in canvas
</script>
</body>
</html>5 Answers
Reset to default 8const tile = new TileLayer({
source: new OSM()
});
tile.on('prerender', (evt) => {
// return
if (evt.context) {
const context = evt.context as CanvasRenderingContext2D;
context.filter = 'grayscale(80%) invert(100%) ';
context.globalCompositeOperation = 'source-over';
}
});
tile.on('postrender', (evt) => {
if (evt.context) {
const context = evt.context as CanvasRenderingContext2D;
context.filter = 'none';
}
});
Before the tile layer rendered set the canvas filter and reset back to none after the rendering, by doing this, the following layers will not be affected in any way, Here is the effect:
openlayes shows maps in <canvas>. and <canvas> will be add to <div> container with openlayers library. So add bellow codes to add map and change it's color:
var map = new ol.Map({
target: 'map',//div with map id
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([61.2135, 28.2331]),
zoom: 13
})
});
//change map color
map.on('postcompose',function(e){
document.querySelector('canvas').style.filter="invert(90%)";
});
you can also test other filters
The answer of Guichi works well but I recommend other filters invert(100%) hue-rotate(180deg) to keep green and blue colors:
The ol-ext library lets you set filters on openlayers layers. It uses canvas composite operations to achieve the effects.
See code sample online: https://viglino.github.io/ol-ext/examples/filter/map.filter.colorize.html
Grate answers, but u don't need to subscribe to some map events, like 'postcompose'. Just add filter in your css code like this
html.dark #map canvas {
filter: invert(100%) hue-rotate(180deg);
}