leaflet-customlayer v2.1.0

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

Methods

Util Methods

Events

License

MIT