ILayer

Represents an object attached to a particular location (or a set of locations) on a map. Implemented by tile layers, markers, popups, image overlays, vector layers and layer groups.

Methods

Implementing Custom Layers

The most important things know about when implementing custom layers are Map viewreset event and latLngToLayerPoint method. viewreset is fired when the map needs to reposition its layers (e.g. on zoom), and latLngToLayerPoint is used to get coordinates for the layer's new position.

Another event often used in layer implementations is moveend which fires after any movement of the map (panning, zooming, etc.).

Another thing to note is that you'll usually need to add leaflet-zoom-hide class to the DOM elements you create for the layer so that it hides during zoom animation. Implementing zoom animation for custom layers is a complex topic and will be documented separately in future, but meanwhile you can take a look at how it's done for Leaflet layers (e.g. ImageOverlay) in the source.

Custom Layer Example

Here's how a custom layer implementation usually looks:

var MyCustomLayer = L.Class.extend({

	initialize: function (latlng) {
		// save position of the layer or any options from the constructor
		this._latlng = latlng;
	},

	onAdd: function (map) {
		this._map = map;

		// create a DOM element and put it into one of the map panes
		this._el = L.DomUtil.create('div', 'my-custom-layer leaflet-zoom-hide');
		map.getPanes().overlayPane.appendChild(this._el);

		// add a viewreset event listener for updating layer's position, do the latter
		map.on('viewreset', this._reset, this);
		this._reset();
	},

	onRemove: function (map) {
		// remove layer's DOM elements and listeners
		map.getPanes().overlayPane.removeChild(this._el);
		map.off('viewreset', this._reset, this);
	},

	_reset: function () {
		// update layer's position
		var pos = this._map.latLngToLayerPoint(this._latlng);
		L.DomUtil.setPosition(this._el, pos);
	}
});

map.addLayer(new MyCustomLayer(latlng));