0.2.159 • Published 7 months ago

leaflet.webgl-temperature-map-forked v0.2.159

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

Leaflet.WebglTemperatureMap

A simple and fast Leaflet Library to draw temperature maps (heat maps) using WebGL in pure Javascript. Except a O(N) pre-process step which is done in Javascipt, all calculations and drawing are done with shaders in WebGL, so it is pretty fast.

Inspired by temperature-map-gl

Triangulation of mask powered by earcut

In plans rewrite hole package to pixi or three.js (or may be pts) from naked webGL

Demo

Basic Usage

    npm i --save leaflet.webgl-temperature-map
import L from 'leaflet';
import 'leaflet.webgl-temprature-map';

const map = L.map(); // creates map

const tempMap = L.webGlTemperatureMapLayer().addTo(map);

tempMap.setPoints([
  [2630.0850293955414, 7132.896936250415, 64.16567943765965],
  [4065.465306828053, 600.8491068712285, 41.28007958055719],
  [4559.413280590601, 6877.027363962465, 30.497164030229907]
]);

points are in this format:

// x, y - can be lat lng (must set second param in setPoints as { isLatLng: true}), or screen coords
const points = [[x0, y0, v0], [x1, y1, v1], ...[xN, yN, vN]];

Requirements

Reference

L.webGlTemperatureMapLayer(options)

Return Object of class

Options

  • All options from Leaflet setOptions
  • idwOptions - options to temperature map: {
    • p: 5,
    • canvas: null,
    • zIndex: 10,
    • opacity: 0.35,
    • range_factor: 0.00390625,
    • gamma: 2.2,
    • debug_points: false, // work only for debug - not right position on zoom after move
    • framebuffer_factor: 1,
    • isNullColorized: true, // to transparent background set false
    • point_text:
      let v;
      if (val < 1) v = val.toFixed(2);
      else if (val < 10) v = val.toFixed(1);
      else v = Math.round(val);
      return v;
      }
    }

Methods

  • onAdd(map): Sets temperature map to leaflet map.
  • setPoints(points: x, y, value, options: { isLatLng: false }): Adds array of points to the temperature map and draws it. X, y - can be lat lng, or screen coords.
  • needRedraw(): Redraws the temperature map.

Callbacks

  • onDrawLayer({ layer, canvas, bounds, size, zoom, center, ce, ce_b, corner }): Call when layer did redraw.
  • onLayerWillUnmount(): Call when layer will unmount.
  • onLayerDidMount(): Call when layer did mount.

Changelog

0.1.0 July 05, 2020

  • Fix default options

0.1.0 July 05, 2020

  • Add options to temperature map.
  • Add ability to set background transparent
  • Add ability to set points as lat,lng or L.Point

0.0.1 May 06, 2020

  • Initial release.

License

MIT License

Technical explanation

Values are calculated using 'Inverse Distance Weighting (IDW)' algorithm:

Wikipedia - Inverse Distance Weighting

The rest of the explanation makes sense only in the context of the wikipedia article above...

For every point, we perform a render pass to a texture. Using IDW, we calculate the point "influence" to every fragment using a fragment shader. We store the ui*wi at the r channel of the texture and w_i at the g channel. Using blending with "accumulator" configuration, we end end up with a texture, where we have the top sum of IDW in r channel, and the bottom sum at the g channel. Since channels WebGL are clamped in 0,1, we multiply both channels with range_factor to avoid clamping.

At last, we perform a last pass where we get the IDW value by reading the calculation texture and do a r/g at every fragment. We then use this value to determine the color of the fragment.

0.2.159

7 months ago

0.2.158

7 months ago

0.2.157

7 months ago

0.2.156

7 months ago

0.2.155

7 months ago

0.2.154

7 months ago

0.2.153

7 months ago

0.2.152

7 months ago

0.2.151

7 months ago

0.2.150

7 months ago

0.2.149

7 months ago

0.2.148

7 months ago

0.2.147

7 months ago

0.2.146

7 months ago

0.2.145

7 months ago

0.2.144

7 months ago

0.2.143

7 months ago

0.2.142

7 months ago

0.2.141

7 months ago

0.2.140

7 months ago

0.2.139

7 months ago

0.2.138

7 months ago

0.2.137

7 months ago

0.2.136

7 months ago

0.2.135

7 months ago

0.2.134

7 months ago

0.2.133

7 months ago

0.2.132

7 months ago

0.2.131

7 months ago

0.2.130

7 months ago

0.2.129

7 months ago

0.2.128

7 months ago

0.2.127

7 months ago

0.2.126

7 months ago

0.2.125

7 months ago

0.2.124

7 months ago

0.2.123

7 months ago

0.2.122

7 months ago

0.2.121

7 months ago

0.2.120

7 months ago

0.2.119

7 months ago

0.2.118

7 months ago

0.2.117

7 months ago

0.2.116

7 months ago

0.2.115

7 months ago

0.2.114

7 months ago

0.2.113

7 months ago

0.2.112

7 months ago

0.2.111

7 months ago

0.2.110

7 months ago

0.2.109

7 months ago

0.2.108

7 months ago

0.2.107

7 months ago

0.2.106

7 months ago

0.2.105

7 months ago

0.2.104

7 months ago

0.2.103

7 months ago

0.2.102

7 months ago

0.2.101

7 months ago

0.2.100

7 months ago

0.2.99

7 months ago

0.2.98

7 months ago

0.2.97

7 months ago

0.2.96

7 months ago

0.2.95

7 months ago

0.2.94

7 months ago

0.2.93

7 months ago

0.2.92

7 months ago

0.2.91

7 months ago

0.2.90

7 months ago

0.2.89

7 months ago

0.2.88

7 months ago

0.2.87

7 months ago

0.2.86

7 months ago

0.2.85

7 months ago

0.2.84

7 months ago

0.2.83

7 months ago

0.2.82

7 months ago

0.2.81

7 months ago

0.2.80

7 months ago

0.2.79

7 months ago

0.2.78

7 months ago

0.2.77

7 months ago

0.2.76

7 months ago

0.2.75

7 months ago

0.2.74

7 months ago

0.2.73

7 months ago

0.2.72

7 months ago

0.2.71

7 months ago

0.2.70

7 months ago

0.2.69

7 months ago

0.2.68

7 months ago

0.2.67

7 months ago

0.2.66

7 months ago

0.2.65

7 months ago

0.2.64

7 months ago

0.2.63

7 months ago

0.2.62

7 months ago

0.2.61

7 months ago

0.2.60

7 months ago

0.2.59

7 months ago

0.2.57

7 months ago

0.2.56

7 months ago

0.2.55

7 months ago

0.2.54

7 months ago

0.2.53

7 months ago

0.2.52

7 months ago

0.2.51

7 months ago

0.2.50

7 months ago

0.2.49

7 months ago

0.2.48

7 months ago

0.2.47

7 months ago

0.2.46

7 months ago

0.2.45

7 months ago

0.2.44

7 months ago

0.2.43

7 months ago

0.2.42

7 months ago

0.2.41

7 months ago

0.2.40

7 months ago

0.2.39

7 months ago

0.2.38

7 months ago

0.2.37

7 months ago

0.2.36

7 months ago

0.2.35

7 months ago

0.2.34

7 months ago

0.2.33

7 months ago

0.2.32

7 months ago

0.2.31

7 months ago

0.2.30

7 months ago

0.2.29

7 months ago

0.2.28

7 months ago

0.2.27

7 months ago

0.2.26

7 months ago

0.2.25

7 months ago

0.2.24

7 months ago

0.2.23

7 months ago

0.2.22

7 months ago

0.2.21

7 months ago

0.2.20

7 months ago

0.2.19

7 months ago

0.2.18

7 months ago

0.2.17

7 months ago

0.2.16

7 months ago

0.2.15

7 months ago

0.2.14

7 months ago

0.2.13

7 months ago

0.2.12

7 months ago

0.2.11

7 months ago

0.2.10

7 months ago

0.2.9

7 months ago

0.2.8

7 months ago

0.2.7

7 months ago

0.2.6

7 months ago

0.2.5

7 months ago

0.2.4

7 months ago

0.2.3

7 months ago

0.2.2

7 months ago

0.2.1

7 months ago

0.2.0

7 months ago