leafletを鍛える。その3

#概要
leafletを鍛えてみた。
canvasに、書いてみた。

#写真

#サンプルコード

var map = new L.Map('map', {
    center: [38, 140],
    zoom: 2
});
var tiles = new L.GridLayer();
tiles.createTile = function(coords) {
    var tile = L.DomUtil.create('canvas', 'leaflet-tile');
    var ctx = tile.getContext('2d');
    var size = this.getTileSize();
    tile.width = size.x;
    tile.height = size.y;
    var nwPoint = coords.scaleBy(size);
    var nw = map.unproject(nwPoint, coords.z);
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, size.x, 50);
    ctx.fillStyle = 'black';
    ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 20, 20);
    ctx.fillText('lat: ' + nw.lat + ', lon: ' + nw.lng, 20, 40);
    ctx.strokeStyle = 'red';
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(size.x - 1, 0);
    ctx.lineTo(size.x - 1, size.y - 1);
    ctx.lineTo(0, size.y - 1);
    ctx.closePath();
    ctx.stroke();
    return tile;
}
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
}).addTo(map)
tiles.addTo(map)

#成果物

以上。