CSS3で白黒タイル


手抜き、CSS3は画像をセピア色にしたり白黒にしたりできる。
白黒は背景用として使えるかもと言う事でleafletで試してみた。

gray-map
無駄にマウス地点だけ色付きギミック。

CSS

html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0px;
}

.sample {
-webkit-filter: grayscale(100%);
}
.sample:hover {
-webkit-filter: grayscale(0%);
}
var map = L.map('map').setView([36, 140], 13);

var TestGray = L.TileLayer.extend({
    _createTile: function () {
        var tile = L.TileLayer.prototype._createTile.call(this);
        tile.className += " sample";
        return tile;
    }
});

(new TestGray('http://{s}.tile.osm.org/{z}/{x}/{y}.png')).addTo(map);
カテゴリー: 開発 タグ: パーマリンク