Skip to content

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

License

Notifications You must be signed in to change notification settings

iDerekLi/Leaflet.CustomLayer

Repository files navigation

Leaflet.CustomLayer

Build Status npm version npm downloads npm license

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)

Screenshot canvasLayer

Screenshot svgLayerLayer

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published