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のインスタンスの作成は

var layer = new L.LeafletLayerTemplate();

または

var layer = L.LeafletLayerTemplate();

で作成される。

引数に座標を指定すると関数initializeに座標が渡る。
この引数についてはoptions以外も指定が可能。
例えばlatとlngをそれぞれ渡してもよい。
例）

initialize: function(lat, lng) {
}

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

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

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

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);
};

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

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