Leaflet.TileLayer.Filter の適用 Pt. 1
Leaflet.TileLayer.Filter (Home · humangeo/leaflet-tilefilter Wiki · GitHub) を地理院タイルに適用してみました。
結果
http://handygeospatial.github.io/mapsites/2014/08/09/
画像をinvertするサンプルです。Safari や Chrome で見る限り、Leaflet.TileLayer.Filter の狙うところは問題なく適用されています。ただし、上記のサンプルで使用しているフィルタは、Firefox が対応していないので、Firefox では普通の地図としてしか表示されません。
コード
L.tileLayer の第二引数に filter を加えるだけです。
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/> <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> <script src="http://handygeospatial.github.io/mapsites/js/leaflet-hash.js"></script> <script src="http://handygeospatial.github.io/mapsites/js/TileLayer.GeoJSON.js"></script> <script src="http://handygeospatial.github.io/mapsites/js/TileLayer.Filter.min.js"></script> <style> body {padding: 0; margin: 0} html, body, #mapdiv {height: 100%; width: 100%;} .leaflet-container {background: #000;} </style> </head> <body> <div id="mapdiv"> <script> var std = L.tileLayer( 'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {attribution: "地理院タイル（標準地図）", filter: function() { new L.CSSFilter(this, {filters: ['invert(100%)']}).render(); }}); var map = L.map('mapdiv', { center: [35.3622222, 138.7313889], zoom: 5, layers: [std]}); var hash = L.hash(map); L.control.layers({'地理院タイル（標準地図）': std}).addTo(map); </script> </body> </html>
