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/[email protected]/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