I built a map page using tile layers, but the layer colors specified in the requirements are the ones in the image below:
The initial color of the implemented layer is now as shown in the figure:
Use the following code to convert the color:
.tileLayer{
filter: invert(100%);
}
As shown below:
A bit far from the required color.
I tried the following code
filter: hue-rotate(100deg);
Still can't meet the desired color. I wonder if there is a way to achieve the hue shift in requirement. Use filter or other methods will do. I hope you can provide an example of a solution.
var map = L.map('map', {
layers: [
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
className: 'tileLayer',
})
],
center: [10, 0],
zoom: 14
});
var canvasRenderer = L.canvas();
function createWavingCircle(latlng, color, fromRadius, toRadius) {
var circle = L.circle(latlng, {
radius: fromRadius,
color,
renderer: canvasRenderer
}).addTo(map);
var nextCircle;
var interval = setInterval(() => {
var radius = circle.getRadius() + 1;
if (radius <= toRadius) {
circle.setRadius(radius);
if (Math.round((radius / toRadius) * 100) >= 30 && !nextCircle) {
nextCircle = createWavingCircle(latlng, color, fromRadius, toRadius);
}
} else {
if (nextCircle && nextCircle.getRadius() >= toRadius) {
circle.remove();
clearInterval(interval);
}
}
}, 1)
return circle;
}
createWavingCircle(map.getCenter(), 'red', 10, 400);body {
margin: 0;
}
html,
body,
#map {
height: 100%
}
.tileLayer {
filter: invert(100%);
}<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
