maptalks - TileLayer's CSS filter

TileLayer's CSS filter

Layer's cssFilter can be used to style layer with css filter.

You can refer to this filter table for some common used css filters.

This feature is unique to canvas, if you add the tilelayer to GroupGLLayer, because of the webgl rendering, this feature will be disabled, we suggest using the next example to handle the tile customization

index.html

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TileLayer and Geo-Projections - TileLayer&#x27;s CSS filter</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
  </style>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <body>
    <div id="map" class="container"></div>

    <script>
      var map = new maptalks.Map('map', {
        center: [105.08052356963802, 36.04231948670001],
        zoom: 5,
        minZoom:1,
        maxZoom:19,
        baseLayer: new maptalks.TileLayer('base', {
          urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          subdomains: ["a","b","c","d"],
          attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>',

          // css filter
          cssFilter : 'sepia(100%) invert(90%)'
        })
      });

    </script>
  </body>
</html>