M.Sc. Jonas Lukasczyk - PhD Student

Plugin Free Leaflet WebGL-Layer

Unfortunately, the Leaflet JavaScript library does not support a canvas overlay out of the box. There are libraries available that augment Leaflet maps with canvas overlays (e.g., Sumbera’s Canvas Overlay), however, it is possible to use a simple trick to create a canvas overlay without needing additional plugins. I call this the "Cuckoo's Egg Hack", which works as follows:

  1. Setup the Leaflet map and the WebGL canvas
  2. Create an empty ImageOverlay
  3. Exchange the image element of the ImageOverlay with the canvas element
  4. Force Leaflet to initially adjust the canvas size and position, e.g., by changing the zoom level

Afterwards, Leaflet takes care of adjusting the canvas while panning and zooming.

Source Code

Valid HMLT 5! Valid CSS!