leaflet-advanced-heatmap

Advanced heat map plugin for Leaflet. Depends on heatmap module

Usage

new AdvancedHeatmapLayer(data, {
  heatmap: {
    smooth: 1.0
  }
}).addTo(map)

Example

import L from 'leaflet'

import { AdvancedHeatmapLayer } from 'leaflet-advanced-heatmap'

const numOfPoints = 1000

const width = 2
const height = 2

let x = width / 2
let y = height / 2

// Brownian (random) motion
const data = []
const step = 0.01
for (let i = 0; i < numOfPoints; i++) {
  x += step * Math.random() - step / 2
  y += step * Math.random() - step / 2
  if (x > width) {
    x -= width
  } else if (x < 0) {
    x += width
  }
  if (y > height) {
    y -= height
  } else if (y < 0) {
    y += height
  }
  data.push([
    x + 51.5 - width / 2,
    y - 0.09 - height / 2,
    50 * Math.random()//, 0.1 + 0.2 * Math.random()
  ])
}

const map = L.map('map').setView([51.505, -0.09], 13)

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)

new AdvancedHeatmapLayer(data, {
  heatmap: {
    smooth: 1.0
  }
}).addTo(map)

Architecture

Compare base options:

• Layer (base) just as it is

• GridLayer and

  • pros createTile method which we can use to create small canvas tile.
  • pros createTile method has old node.js style done method, for async
  • question we are getting coords.x, coords.y, coords.z in createTile how could we know canvas width and height? The answer is this.getTileSize()
  • TileLayer and
    • cons: its purpose to load and show images from url by customize by overwriting #getTileUrl

• Renderer

  • Canvas https://leafletjs.com/reference-1.4.0.html#canvas

Theory

• architecture of layers
• how to extend