leaflet-customlayer

Leaflet.CustomLayer

Leaflet overlay plugin: L.CustomLayer - fully custom Layer.

Features

• A custom layer is a layer that develops a defined drawing method. (For example: Canvas\SVG\Image\Video\DIV Layer)

Installation

Using npm:

$ npm install leaflet-customlayer

or Yarn:

$ yarn add leaflet-customlayer

Using cdn:

<script type="text/javascript" src="https://unpkg.com/leaflet-customlayer@2.1.0/dist/Leaflet.CustomLayer.js"></script>

Example

var customLayer = new L.customLayer({
  container: document.createElement(element), // The DomElement object to display.
  minZoom: 0, // Minimum zoom level of the layer.
  maxZoom: 18, // Maximum zoom level of the layer.
  opacity: 1, // Opacity of the layer.
  visible: true, // Visible of the layer.
  zIndex: 100 // The explicit zIndex of the layer.
});

customLayer.on("layer-beforemount", function() {
  console.log("layerBeforeMount");
});

customLayer.on("layer-mounted", function() {
  console.log("layerMounted");
})

customLayer.on("layer-render", function() {
  console.log("layerRender");
});

customLayer.on("layer-beforedestroy", function() {
  console.log("layerBeforeDestroy");
});

customLayer.on("layer-destroyed", function() {
  console.log("layerDestroyed");
});

customLayer.addTo(map);

Custom canvas layer example

var canvasLayer = new L.CustomLayer({
  container: document.createElement("canvas"),
  padding: 0.1
});

canvasLayer.on("layer-render", function() {
  var canvas = this.getContainer();
  var dpr = L.Browser.retina ? 2 : 1;
  var size = this._bounds.getSize();
  var padding = this._padding;

  // set Size
  canvas.width = dpr * size.x;
  canvas.height = dpr * size.y;
  canvas.style.width = size.x + "px";
  canvas.style.height = size.y + "px";
    
  var ctx = canvas.getContext("2d");

  // HD adaptation
  if (L.Browser.retina) ctx.scale(dpr, dpr);
  ctx.translate(padding.x, padding.y);
  
  // draw
  var point = this._map.latLngToContainerPoint({
    lat: 39.910088,
    lng: 116.401601
  });
  ctx.fillStyle = "rgb(0, 100, 255)";
  ctx.fillRect(point.x, point.y, 100, 100);
});

canvasLayer.addTo(map);

setFullLayerBounds util usage

Automatically set the full screen container size using the setfulllayerBounds method.

var canvasLayer = new L.CustomLayer({
  container: document.createElement("canvas"),
  padding: 0.1
});

canvasLayer.on("layer-render", function() {
  var { ctx } = this.setFullLayerBounds();

  // draw
  var point = this._map.latLngToContainerPoint({
    lat: 39.910088,
    lng: 116.401601
  });
  ctx.fillStyle = "rgb(0, 100, 255)";
  ctx.fillRect(point.x, point.y, 100, 100);
});

canvasLayer.addTo(map);

The setfulllayerBounds method can automatically set the container size. However, due to conditional restrictions, when it is not satisfied with the usage scenario, manually set the container size.

API

CustomLayer

Leaflet overlay plugin: L.CustomLayer - fully custom Layer. Extends L.Layer.

Options

Option	Description	Type	Default
container	The DomElement object to display.	DomElement	-
minZoom	Minimum zoom level of the layer.	Number	*
maxZoom	Maximum zoom level of the layer.	Number	*
opacity	Opacity of the layer.	Number	1
visible	Visible of the layer.	Boolean	true
zIndex	The explicit zIndex of the layer.	Number	canvas: 100\ svg: 200\ other: 100
padding	How much to extend the clip area around the map view (relative to its size) e.g. 0.1 would be 10% of map view in each direction.	Number	0
tolerance	How much to extend click tolerance round a path/object on the map.	Number	0

Methods

Method	Description	Return
addTo()	layer add to the map
remove()	layer remove the map
getContainer()	Get the DomElement object	DomElement
setContainer(container)	Set the DomElement object	this
getOpacity()	Get the opacity of the layer.	Number
setOpacity(opacity)	Set the opacity of the layer.	this
getZIndex()	Get the zIndex of the layer.	Number
setZIndex(zIndex)	Set the zIndex of the layer.	this
show()	layer show	this
hide()	layer hide	this

Util Methods

Method	Description	Return
setFullLayerBounds()	set the full bounds of the layer.	{ container, [...] }

Events

Event	Data	Description
layer-beforemount	Event	Fired before the layer is mounting begins.
layer-mounted	Event	Fired after the layer is has been mounted.
layer-render	Event	Fired when the layer render its bounds, center and zoom, for example when its map has moved.
layer-beforedestroy	Event	Fired before the layer is destroyed.
layer-destroyed	Event	Fired after the layer is has been destroyed.

License

MIT