Leafletでとりあえず500mメッシュを表示させたいと思いL.Layerからの派生を調査。
※jsonやwmsは何も使わずに！

Leafletでは個々のMarkerもL.Layerから派生されている。

L.Layerからの派生したクラスを作成するにはGithubのleafletjs-plugin-templatesを改造するのが最短コース。
LeafletLayerTemplate.jsをダウンロードして眺めればどのように作成すればよいのか、分かり易い。

以下はダウンロードしたLeafletLayerTemplateのコメントを削除したソース。

LeafletLayerTemplateはMarkerと同様の動作を意識して各関数内に実装がされている。

関数initialize
L.LeafletLayerTemplateのインスタンス作成時に呼ばれる関数
L.LeafletLayerTemplateのインスタンスの作成は
[code]
var layer = new L.LeafletLayerTemplate();
[/code]
または
[code]
var layer = L.LeafletLayerTemplate();
[/code]
で作成される。

引数に座標を指定すると関数initializeに座標が渡る。
この引数についてはoptions以外も指定が可能。
例えばlatとlngをそれぞれ渡してもよい。
例）
[code]
initialize: function(lat, lng) {
}
[/code]

関数onAdd
レイヤをmapに追加すると呼ばれる関数。
以下ではdivを作成しmap.getPanes().overlayPaneに追加。
map.on(‘viewreset’, this._updatePosition, this);
は地図の移動時にthis._updatePositionをリスナーとして登録。
※現在はviewresetは機能しないためmoveやmoveendなどを使用する必要がある。
その後、強制的に_updatePositionを呼び出して位置を設定
※_updatePositionはユーザー関数

関数_updatePosition
mapの位置にあわせてdivの位置を移動。

関数onRemove
リスナーを削除し、divを削除

[code]
L.LeafletLayerTemplate = L.Layer.extend({

initialize: function(options) {
this._latLng = options.latLng;
},

onAdd: function(map) {
this._map = map;
var layerElementTag = ‘div’;
var layerElementClasses = ‘.leaflet-layer-template leaflet-zoom-hide’;
this._layerElement = L.DomUtil.create(layerElementTag, layerElementClasses);
map.getPanes().overlayPane.appendChild(this._layerElement);
map.on(‘viewreset’, this._updatePosition, this);
this._updatePosition();
},

_updatePosition: function() {
var position = this._map.latLngToLayerPoint(this._latLng);
L.DomUtil.setPosition(this._layerElement, position);
},

onRemove: function(map) {
map.getPanes().overlayPane.removeChild(this._layerElement);
map.off(‘viewreset’, this._updatePosition, this);
}

});
L.leafletLayerTemplate = function(options) {
return new L.LeafletLayerTemplate(options);
};
[/code]

もちろん独自レイヤだからといって必ずしもdivを作成してdomを操作する必要もない。
L.Polygonなどを使用してレイヤの描画を行うのも正しい。

以下は500ｍメッシュを描画する独自レイヤ