heatmap.js

https://www.patrick-wied.at/static/heatmapjs
Admin
heatmap.js is an advanced heat map visualization library for the web with a lightweight footprint...
Tokens:10,149
Snippets:109
Trust Score:9.5
Update:6 months ago
Show doc for...
Tokens:
Raw
### Leaflet Heatmap Layer Plugin Example Usage

Source: https://www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html

A complete JavaScript example demonstrating how to initialize and use the Leaflet Heatmap Layer Plugin.

```APIDOC
## Example
Check out the live example.
```javascript
// don't forget to include leaflet-heatmap.js
var testData = {
  max: 8,
  data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...]
};

var baseLayer = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '...', 
    maxZoom: 18
  }
);

var cfg = {
  // radius should be small ONLY if scaleRadius is true (or small radius is intended)
  // if scaleRadius is false it will be the constant radius used in pixels
  "radius": 2,
  "maxOpacity": .8,
  // scales the radius based on map zoom
  "scaleRadius": true,
  // if set to false the heatmap uses the global maximum for colorization
  // if activated: uses the data maximum within the current map boundaries
  //   (there will always be a red spot with useLocalExtremas true)
  "useLocalExtrema": true,
  // which field name in your data represents the latitude - default "lat"
  latField: 'lat',
  // which field name in your data represents the longitude - default "lng"
  lngField: 'lng',
  // which field name in your data represents the data value - default "value"
  valueField: 'count'
};


var heatmapLayer = new HeatmapOverlay(cfg);

var map = new L.Map('map-canvas', {
  center: new L.LatLng(25.6586, -80.3568),
  zoom: 4,
  layers: [baseLayer, heatmapLayer]
});

heatmapLayer.setData(testData);
```
```

--------------------------------

### Create heatmap instance with configuration

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Examples of initializing a heatmap instance using a configuration object with standard or custom gradient settings.

```javascript
// create configuration object
var config = {
  container: document.getElementById('heatmapContainer'),
  radius: 10,
  maxOpacity: .5,
  minOpacity: 0,
  blur: .75
};
// create heatmap with configuration
var heatmapInstance = h337.create(config);
```

```javascript
// create configuration object
var config = {
  container: document.getElementById('heatmapContainer'),
  radius: 10,
  maxOpacity: .5,
  minOpacity: 0,
  blur: .75,
  gradient: {
    // enter n keys between 0 and 1 here
    // for gradient color customization
    '.5': 'blue',
    '.8': 'red',
    '.95': 'white'
  }
};
var heatmapInstance = h337.create(config);
```

--------------------------------

### Gmaps Heatmap Layer Plugin Example

Source: https://www.patrick-wied.at/static/heatmapjs/plugin-gmaps-layer.html

A practical example demonstrating how to use the Gmaps Heatmap Layer Plugin with Google Maps.

```APIDOC
## Example
Check out the live example.

```javascript
// don't forget to add gmaps-heatmap.js
var myLatlng = new google.maps.LatLng(25.6586, -80.3568);
// map options,
var myOptions = {
  zoom: 3,
  center: myLatlng
};
// standard map
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// heatmap layer
heatmap = new HeatmapOverlay(map,
  {
    // radius should be small ONLY if scaleRadius is true (or small radius is intended)
    "radius": 2,
    "maxOpacity": 1,
    // scales the radius based on map zoom
    "scaleRadius": true,
    // if set to false the heatmap uses the global maximum for colorization
    // if activated: uses the data maximum within the current map boundaries
    //   (there will always be a red spot with useLocalExtremas true)
    "useLocalExtrema": true,
    // which field name in your data represents the latitude - default "lat"
    latField: 'lat',
    // which field name in your data represents the longitude - default "lng"
    lngField: 'lng',
    // which field name in your data represents the data value - default "value"
    valueField: 'count'
  }
);

var testData = {
  max: 8,
  data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...]
};

heatmap.setData(testData);
```
```

--------------------------------

### Gmaps Heatmap Layer Plugin Setup and Configuration

Source: https://www.patrick-wied.at/static/heatmapjs/plugin-gmaps-layer.html

Instructions on how to set up and configure the Gmaps Heatmap Layer Plugin, including available configuration options.

```APIDOC
## Setup
Add the **gmaps-heatmap.js** right under the heatmap.js (either in the header or right before closing the body). A **HeatmapOverlay** instance takes two parameters: the map instance, and a configuration option object.

### Configuration Options
Configuration options are passed to the plugin in a configuration object.

* **scaleRadius** (boolean) - optional - default false
whether the radius should be scaled to accordingly to zoom level.

* **radius** (integer) - optional - default 15
defines the radius of your datapoints. **Important:** If scaleRadius is false, radius is measured in pixels. If scaleRadius is true it's measured in the scale of the map.

* **useLocalExtrema** (boolean) - optional - default false
this defines whether the heatmap should use a global extrema set via setData/addData OR a local extrema (the maximum and minimum of the currently displayed viewport)
```

--------------------------------

### Leaflet Heatmap Layer Plugin Setup and Configuration

Source: https://www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html

Instructions on how to set up the Leaflet Heatmap Layer Plugin and its configuration options.

```APIDOC
## Setup
Add the **leaflet-heatmap.js** right under the heatmap.js (either in the header or right before closing the body). A **HeatmapOverlay** instance takes two parameters: the map instance, and a configuration option object.

### Configuration Options
Configuration options are passed to the plugin in a configuration object.

- **scaleRadius** (boolean) - optional - default false
  whether the radius should be scaled to accordingly to zoom level.

- **radius** (integer) - optional - default 15
  defines the radius of your datapoints. **Important:** If scaleRadius is false, radius is measured in pixels. If scaleRadius is true it's measured in the scale of the map.

- **useLocalExtrema** (boolean) - optional - default false
  this defines whether the heatmap should use a global extrema set via setData/addData OR a local extrema (the maximum and minimum of the currently displayed viewport)
```

--------------------------------

### Get heatmap data URL

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Returns a base64 encoded dataURL string of the current heatmap canvas.

```javascript
heatmapInstance.getDataURL(); // data:image/png;base64...
// ready for saving locally or on the server
```

--------------------------------

### Get value at specific coordinate

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Retrieves the interpolated value at a given point, even if the point is not explicitly in the store.

```javascript
heatmapInstance.addData({ x: 10, y: 10, value: 100});
// get the value at x=10, y=10
heatmapInstance.getValueAt({ x: 10, y: 10 }); // returns 100
```

--------------------------------

### Create Mouse Movement Heatmap Instance

Source: https://www.patrick-wied.at/static/heatmapjs/example-mousemove-heatmap.html

Initializes a heatmap.js instance and sets up an event listener for mouse movements to add data points to the heatmap.

```javascript
// create instance
var heatmapInstance = h337.create({
  container: document.querySelector('.heatmap'),
  radius: 90
});
document.querySelector('.demo-wrapper').onmousemove = function(ev) {
  heatmapInstance.addData({
    x: ev.layerX,
    y: ev.layerY,
    value: 1
  });
};
// that's it... yay right? ;)
```

--------------------------------

### Initialize and Populate Heatmap Instance

Source: https://www.patrick-wied.at/static/heatmapjs/example-minimal-config.html

Creates a heatmap instance with a container and populates it with a generated dataset. Ensure the container element has defined width and height dimensions.

```javascript
// minimal heatmap instance configuration
var heatmapInstance = h337.create({
  // only container is required, the rest will be defaults
  container: document.querySelector('.heatmap')
});

// now generate some random data
var points = [];
var max = 0;
var width = 840;
var height = 400;
var len = 200;

while (len--) {
  var val = Math.floor(Math.random()*100);
  max = Math.max(max, val);
  var point = {
    x: Math.floor(Math.random()*width),
    y: Math.floor(Math.random()*height),
    value: val
  };
  points.push(point);
}
// heatmap data format
var data = {
  max: max,
  data: points
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);
```

--------------------------------

### Initialize Leaflet Heatmap Layer

Source: https://www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html

Demonstrates how to initialize a heatmap layer with custom configuration options and add it to a Leaflet map. Ensure leaflet-heatmap.js is included.

```javascript
var testData = {
  max: 8,
  data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...]
};

var baseLayer = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '...', 
    maxZoom: 18
  }
);

var cfg = {
  // radius should be small ONLY if scaleRadius is true (or small radius is intended)
  // if scaleRadius is false it will be the constant radius used in pixels
  "radius": 2,
  "maxOpacity": .8,
  // scales the radius based on map zoom
  "scaleRadius": true,
  // if set to false the heatmap uses the global maximum for colorization
  // if activated: uses the data maximum within the current map boundaries
  //   (there will always be a red spot with useLocalExtremas true)
  "useLocalExtrema": true,
  // which field name in your data represents the latitude - default "lat"
  latField: 'lat',
  // which field name in your data represents the longitude - default "lng"
  lngField: 'lng',
  // which field name in your data represents the data value - default "value"
  valueField: 'count'
};


var heatmapLayer = new HeatmapOverlay(cfg);

var map = new L.Map('map-canvas', {
  center: new L.LatLng(25.6586, -80.3568),
  zoom: 4,
  layers: [baseLayer, heatmapLayer]
});

heatmapLayer.setData(testData);
```

--------------------------------

### Initialize and populate a heatmap

Source: https://www.patrick-wied.at/static/heatmapjs

Create a heatmap instance within a DOM element and set the initial data points.

```javascript
var heatmap = h337.create({
  container: domElement
});

heatmap.setData({
  max: 5,
  data: [{ x: 10, y: 15, value: 5}, ...]
});
```

--------------------------------

### Initialize and update heatmap with click events

Source: https://www.patrick-wied.at/static/heatmapjs/example-click-heatmap.html

Creates a heatmap instance and attaches a click listener to the container to add data points dynamically.

```javascript
// create instance
var heatmapInstance = h337.create({
  container: document.querySelector('.heatmap'),
  radius: 90
});
document.querySelector('.demo-wrapper').onclick = function(ev) {
  heatmapInstance.addData({
    x: ev.layerX,
    y: ev.layerY,
    value: 1
  });
};
// that's it... yay right? ;)
```

--------------------------------

### Initialize heatmap with dataset

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Replaces the current dataset with a new one. Requires min, max, and data properties.

```javascript
var data = {
  max: 100,
  min: 0,
  data: [
    dataPoint, dataPoint, dataPoint, dataPoint
  ]
};
heatmapInstance.setData(data);
```

--------------------------------

### Initialize Google Maps and Heatmap Overlay

Source: https://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html

This snippet initializes a Google Map and configures the HeatmapOverlay from heatmap.js. Ensure 'gmaps-heatmap.js' is included. Configure radius, opacity, and data field names as needed.

```javascript
// don't forget to add gmaps-heatmap.js
var myLatlng = new google.maps.LatLng(25.6586, -80.3568);
// map options,
var myOptions = {
  zoom: 3,
  center: myLatlng
};
// standard map
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// heatmap layer
heatmap = new HeatmapOverlay(map,
  {
    // radius should be small ONLY if scaleRadius is true (or small radius is intended)
    "radius": 2,
    "maxOpacity": 1,
    // scales the radius based on map zoom
    "scaleRadius": true,
    // if set to false the heatmap uses the global maximum for colorization
    // if activated: uses the data maximum within the current map boundaries
    //   (there will always be a red spot with useLocalExtremas true)
    "useLocalExtrema": true,
    // which field name in your data represents the latitude - default "lat"
    latField: 'lat',
    // which field name in your data represents the longitude - default "lng"
    lngField: 'lng',
    // which field name in your data represents the data value - default "value"
    valueField: 'count'
  }
);

var testData = {
  max: 8,
  data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...]
};

heatmap.setData(testData);
```

--------------------------------

### Create Customized Heatmap Instance

Source: https://www.patrick-wied.at/static/heatmapjs/example-full-customization.html

Configure a heatmap instance with custom background color, gradient, and opacity settings. Any minOpacity greater than 0 will result in visible point impact boundaries without gradient fading.

```javascript
// customized heatmap configuration
var heatmapInstance = h337.create({
  // required container
  container: document.querySelector('.heatmap'),
  // backgroundColor to cover transparent areas
  backgroundColor: 'rgba(0,0,0,.95)',
  // custom gradient colors
  gradient: {
    // enter n keys between 0 and 1 here
    // for gradient color customization
    '.5': 'blue',
    '.8': 'red',
    '.95': 'white'
  },
  // the maximum opacity (the value with the highest intensity will have it)
  maxOpacity: .9,
  // minimum opacity. any value > 0 will produce
  // no transparent gradient transition
  minOpacity: .3
});
```

--------------------------------

### Initialize Heatmap with Legend Callback

Source: https://www.patrick-wied.at/static/heatmapjs/example-legend-tooltip.html

Initializes a heatmap instance and configures it to call the 'updateLegend' function whenever the data's minimum or maximum values change.

```javascript
var heatmapInstance = h337.create({
  container: document.querySelector('.heatmap'),
  // onExtremaChange will be called whenever there's a new maximum or minimum
  onExtremaChange: function(data) {
    updateLegend(data);
  }
});
```

--------------------------------

### h337.create(configObject)

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Creates a new heatmap instance based on the provided configuration object.

```APIDOC
## h337.create(configObject)

### Description
Creates a new heatmap instance. The heatmap will be appended to the specified container.

### Parameters
#### Request Body
- **container** (DOMNode) - Required - A DOM node where the heatmap canvas should be appended.
- **backgroundColor** (string) - Optional - Background color (hex, name, or rgb(a)).
- **gradient** (object) - Optional - Object representing the gradient (number string [0,1] : color string).
- **radius** (number) - Optional - The radius each datapoint will have.
- **opacity** (number) - Optional - Global opacity [0,1].
- **maxOpacity** (number) - Optional - Maximal opacity for the highest value [0,1].
- **minOpacity** (number) - Optional - Minimum opacity for the lowest value [0,1].
- **onExtremaChange** (function) - Optional - Callback for extrema change updates.
- **blur** (number) - Optional - Blur factor [0,1].
- **xField** (string) - Optional - Property name of x coordinate.
- **yField** (string) - Optional - Property name of y coordinate.
- **valueField** (string) - Optional - Property name of value.

### Request Example
{
  "container": "document.getElementById('heatmapContainer')",
  "radius": 10,
  "maxOpacity": 0.5
}
```

--------------------------------

### heatmapInstance.configure

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Reconfigures an existing heatmap instance.

```APIDOC
## heatmapInstance.configure(configObject)

### Description
Reconfigures a heatmap instance after it has been initialized. Triggers a complete rerendering.

### Parameters
- **configObject** (object) - Required - Configuration object containing properties like radius, maxOpacity, minOpacity, and blur.

### Request Example
var nuConfig = { radius: 10, maxOpacity: .5, minOpacity: 0, blur: .75 };
heatmapInstance.configure(nuConfig);
```

--------------------------------

### Initialize heatmap.js and Generate Data with Custom Radii

Source: https://www.patrick-wied.at/static/heatmapjs/example-point-config.html

Initializes a heatmap instance and generates random data points, each with a unique value and radius. Use this when you need datapoints with different radiuses of influence.

```javascript
// minimal heatmap instance configuration
var heatmapInstance = h337.create({
  // only container is required, the rest will be defaults
  container: document.querySelector('.heatmap')
});

// now generate some random data
var points = [];
var max = 0;
var width = 840;
var height = 400;
var len = 300;

while (len--) {
  var val = Math.floor(Math.random()*100);
  // now also with custom radius
  var radius = Math.floor(Math.random()*70);

  max = Math.max(max, val);
  var point = {
    x: Math.floor(Math.random()*width),
    y: Math.floor(Math.random()*height),
    value: val,
    // radius configuration on point basis
    radius: radius
  };
  points.push(point);
}
// heatmap data format
var data = {
  max: max,
  data: points
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);
```

--------------------------------

### Implement Heatmap AnimationPlayer

Source: https://www.patrick-wied.at/static/heatmapjs/example-heatmap-animation.html

A wrapper class to manage heatmap cycling logic, including play/pause functionality and timeline navigation. Requires an array of heatmap data objects as input.

```javascript
// creating a class to wrap the heatmap cycling logic
function AnimationPlayer(options) {
  this.heatmap = options.heatmap;
  this.data = options.data;
  this.interval = null;
  this.animationSpeed = options.animationSpeed || 300;
  this.wrapperEl = options.wrapperEl;
  this.isPlaying = false;
  this.init();
};
// define the prototype functions
AnimationPlayer.prototype = {
  init: function() {
    var dataLen = this.data.length;
    this.wrapperEl.innerHTML = '';
    var playButton = this.playButton = document.createElement('button');
    playButton.onclick = function() {
      if (this.isPlaying) {
        this.stop();
      } else {
        this.play();
      }
      this.isPlaying = !this.isPlaying;
    }.bind(this);
    playButton.innerText = 'play';

    this.wrapperEl.appendChild(playButton);

    var events = document.createElement('div');
    events.className = 'heatmap-timeline';
    events.innerHTML = '';

    for (var i = 0; i < dataLen; i++) {

      var xOffset = 100/(dataLen - 1) * i;

      var ev = document.createElement('div');
      ev.className = 'time-point';
      ev.style.left = xOffset+'%';

      ev.onclick = (function(i) {
        return function() {
          this.isPlaying = false;
          this.stop();
          this.setFrame(i);
        }.bind(this);
      }.bind(this))(i);

      events.appendChild(ev);

    }
    this.wrapperEl.appendChild(events);
    this.setFrame(0);
  },
  play: function() {
    var dataLen = this.data.length;
    this.playButton.innerText = 'pause';
    this.interval = setInterval(function() {
      this.setFrame(++this.currentFrame%dataLen);
    }.bind(this), this.animationSpeed)
  },
  stop: function() {
    clearInterval(this.interval);
    this.playButton.innerText = 'play';
  },
  setFrame: function(frame) {
    this.currentFrame = frame;
    var snapshot = this.data[frame];
    this.heatmap.setData(snapshot);
    var timePoints = $('.heatmap-timeline .time-point');
    for (var i = 0; i < timePoints.length; i++) {
      timePoints[i].classList.remove('active');
    }
    timePoints[frame].classList.add('active');
  },
  setAnimationData: function(data) {
    this.isPlaying = false;
    this.stop();
    this.data = data;
    this.init();
  },
  setAnimationSpeed: function(speed) {
    this.isPlaying = false;
    this.stop();
    this.animationSpeed = speed;
  }
};

var heatmapInstance = h337.create({
  container: document.querySelector('.heatmap')
});

// animationData contains an array of heatmap data objects
var animationData = [];

// generate some heatmap data objects
for (var i = 0; i < 20; i++) {
  animationData.push(generateRandomData(300));
}

var player = new AnimationPlayer({
  heatmap: heatmapInstance,
  wrapperEl: document.querySelector('.timeline-wrapper'),
  data: animationData,
  animationSpeed: 100
});
```

--------------------------------

### Generate and Set Heatmap Data

Source: https://www.patrick-wied.at/static/heatmapjs/example-full-customization.html

Generate random data points with varying values and radii, then set this data to the heatmap instance. Use `setData` for initial data loading.

```javascript
// now generate some random data
var points = [];
var max = 0;
var width = 840;
var height = 400;
var len = 300;

while (len--) {
  var val = Math.floor(Math.random()*100);
  var radius = Math.floor(Math.random()*70);

  max = Math.max(max, val);
  var point = {
    x: Math.floor(Math.random()*width),
    y: Math.floor(Math.random()*height),
    value: val,
    radius: radius
  };
  points.push(point);
}
// heatmap data format
var data = {
  max: max,
  data: points
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);
```

--------------------------------

### Leaflet Heatmap Layer Configuration and Initialization

Source: https://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html

Includes the necessary JavaScript code to initialize a Leaflet map with a heatmap.js layer. Ensure leaflet-heatmap.js is included. Configuration options like radius, opacity, and data field names are customizable.

```javascript
// don't forget to include leaflet-heatmap.js
var testData = {
  max: 8,
  data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...]
};

var baseLayer = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '...', 
    maxZoom: 18
  }
);

var cfg = {
  // radius should be small ONLY if scaleRadius is true (or small radius is intended)
  // if scaleRadius is false it will be the constant radius used in pixels
  "radius": 2,
  "maxOpacity": .8,
  // scales the radius based on map zoom
  "scaleRadius": true,
  // if set to false the heatmap uses the global maximum for colorization
  // if activated: uses the data maximum within the current map boundaries
  //   (there will always be a red spot with useLocalExtremas true)
  "useLocalExtrema": true,
  // which field name in your data represents the latitude - default "lat"
  latField: 'lat',
  // which field name in your data represents the longitude - default "lng"
  lngField: 'lng',
  // which field name in your data represents the data value - default "count"
  valueField: 'count'
};


var heatmapLayer = new HeatmapOverlay(cfg);

var map = new L.Map('map-canvas', {
  center: new L.LatLng(25.6586, -80.3568),
  zoom: 4,
  layers: [baseLayer, heatmapLayer]
});

heatmapLayer.setData(testData);
```

--------------------------------

### Initialize AngularJS Heatmap Directive

Source: https://www.patrick-wied.at/static/heatmapjs/example-angular-heatmap.html

Configures an AngularJS module with a controller that generates random heatmap data and sets configuration parameters.

```javascript
// add <heatmap></heatmap> somewhere
angular.module('heatmapApp', ['heatmap'])
  .controller('HeatmapCtrl', ['$scope', '$heatmap', function($scope, $heatmap) {
  // $heatmap is the service that makes heatmap instances accessible by name
  // e.g. $heatmap.getInstance('heatmapId') will return the heatmap.js instance to access it manually
    function generateRandomData(len) {
      var max = 100;
      var min = 1;
      var maxX = document.body.clientWidth;
      var maxY = document.body.clientHeight;
      var data = [];
      while (len--) {
        data.push({
          x: ((Math.random() * maxX) >> 0),
          y: ((Math.random() * maxY) >> 0),
          value: ((Math.random() * max + min) >> 0),
          radius: ((Math.random() * 50 + min) >> 0)
        });
      }
      return {
        max: max,
        min: min,
        data: data
      }
    };
    // data can be set manually with the heatmap data attribute
    $scope.heatmapData = generateRandomData(1000);
    // the config attribute will configure the heatmap directive instance
    $scope.heatmapConfig = {
      blur: .9,
      opacity:.5
    };
  })
  .run();
```

--------------------------------

### Reconfigure heatmap instance

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Updates the configuration of an existing heatmap instance and triggers a rerender.

```javascript
var nuConfig = {
  radius: 10,
  maxOpacity: .5,
  minOpacity: 0,
  blur: .75
};
heatmapInstance.configure(nuConfig);
```

--------------------------------

### heatmapInstance.setData(object)

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Initializes or resets the heatmap instance with a full dataset.

```APIDOC
## heatmapInstance.setData(object)

### Description
Initializes a heatmap instance with a dataset. Removes all previously existing points.

### Parameters
#### Request Body
- **max** (number) - Required - The maximum value in the dataset.
- **min** (number) - Required - The minimum value in the dataset.
- **data** (array) - Required - Array of datapoint objects.

### Request Example
{
  "max": 100,
  "min": 0,
  "data": [{"x": 10, "y": 10, "value": 50}]
}
```

--------------------------------

### heatmapInstance.getData

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Exports the current heatmap data.

```APIDOC
## heatmapInstance.getData()

### Description
Returns a persistable and reimportable JSON object representing the current heatmap data.

### Response
- **data** (object) - A JSON object that can be used with setData to restore the heatmap state.
```

--------------------------------

### Usage of the heatmap directive

Source: https://www.patrick-wied.at/static/heatmapjs/plugin-angular-heatmap.html

The directive automatically reacts to changes in the data and config objects. Instances can be accessed manually via the $heatmap service.

```javascript
// full example directive usage
// <heatmap id="myHeatmapInstance" data="myHeatmapData" config="myHeatmapCfg"></heatmap>

// => the heatmap directive will react to changes to myHeatmapData & myHeatmapCfg automatically!
// => you can manually access the heatmap instance by $heatmap.getInstance('myHeatmapInstance')
```

--------------------------------

### heatmapInstance.repaint

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Forces a repaint of the heatmap canvas.

```APIDOC
## heatmapInstance.repaint()

### Description
Repaints the whole heatmap canvas.
```

--------------------------------

### heatmapInstance.getDataURL

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Exports the heatmap as a base64 data URL.

```APIDOC
## heatmapInstance.getDataURL()

### Description
Returns the base64 encoded dataURL of the heatmap instance.

### Response
- **dataURL** (string) - The base64 encoded image string.
```

--------------------------------

### Leaflet Heatmap Layer Plugin API Methods

Source: https://www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html

Details on the available API methods for interacting with the Leaflet Heatmap Layer Plugin.

```APIDOC
## API

- **addData**
  behaves just like the standard heatmap.js addData

- **setData**
  also behaves like the standard heatmap.js setData
```

--------------------------------

### Export and import heatmap data

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Retrieves the current state as a JSON object that can be used to initialize a new instance.

```javascript
var currentData = heatmapInstance.getData();
// now let's create a new instance and set the data
var heatmap2 = h337.create(config);
heatmap2.setData(currentData); // now both heatmap instances have the same content
```

--------------------------------

### heatmapInstance.addData(object|array)

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Adds one or more data points to the heatmap instance.

```APIDOC
## heatmapInstance.addData(object|array)

### Description
Adds a single or multiple datapoints to the heatmaps' datastore. Use this for adding points on the fly.

### Parameters
#### Request Body
- **data** (object|array) - Required - A single datapoint object or an array of datapoint objects.

### Request Example
{
  "x": 5,
  "y": 5,
  "value": 100
}
```

--------------------------------

### Generate Random Heatmap Data

Source: https://www.patrick-wied.at/static/heatmapjs/example-legend-tooltip.html

Generates an array of random data points with values, maximum, and minimum, suitable for setting the heatmap data. Note that 'getValueAt(x, y)' returns interpolated values if not querying exact datapoint coordinates.

```javascript
// generate some random data
var points = [];
var max = 0;
var min = 1234;
var width = 840;
var height = 400;
var len = 200;

while (len--) {
  var val = Math.floor(Math.random()*1234);
  max = Math.max(max, val);
  min = Math.min(min, val);
  var point = {
    x: Math.floor(Math.random()*width),
    y: Math.floor(Math.random()*height),
    value: val
  };
  points.push(point);
}
var data = { max: max, min:min, data: points };
heatmapInstance.setData(data);
```

--------------------------------

### Handle Mouse Movement for Tooltip Display

Source: https://www.patrick-wied.at/static/heatmapjs/example-legend-tooltip.html

Attaches a mousemove event listener to the heatmap container to display a tooltip showing the value at the cursor's position. It uses 'getValueAt' and 'updateTooltip'.

```javascript
demoWrapper.onmousemove = function(ev) {
  var x = ev.layerX;
  var y = ev.layerY;
  // getValueAt gives us the value for a point p(x/y)
  var value = heatmapInstance.getValueAt({
    x: x,
    y: y
  });
  tooltip.style.display = 'block';
  updateTooltip(x, y, value);
};
// hide tooltip on mouseout
demoWrapper.onmouseout = function() {
  tooltip.style.display = 'none';
};
```

--------------------------------

### Angular Heatmap Service API

Source: https://www.patrick-wied.at/static/heatmapjs/plugin-angular-heatmap.html

The $heatmap service provides methods to retrieve and manage heatmap instances created by the directive.

```APIDOC
## $heatmap.getInstance(id)

### Description
Retrieves a specific heatmap instance by its unique identifier.

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier assigned to the heatmap directive.

### Response
- **instance** (Object) - The heatmap instance associated with the provided ID.

## $heatmap.getAllInstances()

### Description
Retrieves all existing heatmap instances currently managed by the plugin.

### Response
- **instances** (Array) - A collection of all active heatmap instances.
```

--------------------------------

### Gmaps Heatmap Layer Plugin API

Source: https://www.patrick-wied.at/static/heatmapjs/plugin-gmaps-layer.html

Details on the API methods available for the Gmaps Heatmap Layer Plugin.

```APIDOC
## API

* **addData**
behaves just like the standard heatmap.js addData

* **setData**
also behaves like the standard heatmap.js setData
```

--------------------------------

### Add data points to heatmap

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Adds single or multiple data points to an existing heatmap instance. Use this for dynamic updates rather than initial data loading.

```javascript
// a single datapoint
var dataPoint = {
  x: 5, // x coordinate of the datapoint, a number
  y: 5, // y coordinate of the datapoint, a number
  value: 100 // the value at datapoint(x, y)
};
heatmapInstance.addData(dataPoint);

// multiple datapoints (for data initialization use setData!!)
var dataPoints = [dataPoint, dataPoint, dataPoint, dataPoint];
heatmapInstance.addData(dataPoints);
```

--------------------------------

### heatmapInstance.getValueAt

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Retrieves the value at a specific coordinate.

```APIDOC
## heatmapInstance.getValueAt(object)

### Description
Returns the value at a specific datapoint position. The returned value is an interpolated value based on the gradient blending if the point is not in the store.

### Parameters
- **object** (object) - Required - Object containing x and y coordinates.

### Response
- **value** (number) - The interpolated value at the specified position.
```

--------------------------------

### heatmapInstance.setDataMin

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Sets the lower bound of the dataset and triggers a rerender.

```APIDOC
## heatmapInstance.setDataMin(number)

### Description
Changes the lower bound of your dataset and triggers a complete rerendering.

### Parameters
- **number** (number) - Required - The new minimum value for the dataset.

### Request Example
heatmapInstance.setDataMin(10);
```

--------------------------------

### heatmapInstance.setDataMax(number)

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Updates the upper bound of the dataset and triggers a rerender.

```APIDOC
## heatmapInstance.setDataMax(number)

### Description
Changes the upper bound of your dataset and triggers a complete rerendering.

### Parameters
#### Request Body
- **max** (number) - Required - The new maximum value.
```

--------------------------------

### Update Tooltip Position and Content

Source: https://www.patrick-wied.at/static/heatmapjs/example-legend-tooltip.html

Updates the position and content of a tooltip element based on the cursor's coordinates (x, y) and the heatmap value at that point. The tooltip is offset by 15 pixels.

```javascript
/* tooltip code start */
var demoWrapper = document.querySelector('.demo-wrapper');
var tooltip = document.querySelector('.tooltip');
function updateTooltip(x, y, value) {
  // + 15 for distance to cursor
  var transl = 'translate(' + (x + 15) + 'px, ' + (y + 15) + 'px)';
  tooltip.style.webkitTransform = transl;
  tooltip.innerHTML = value;
};
/* tooltip code end */
```

--------------------------------

### Set heatmap minimum value

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Updates the lower bound of the dataset and triggers a full rerender.

```javascript
heatmapInstance.setDataMin(10);
// setting the minimum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMin(0);
```

--------------------------------

### Update Legend with Extrema Changes

Source: https://www.patrick-wied.at/static/heatmapjs/example-legend-tooltip.html

This function updates the legend's displayed min/max values and regenerates the gradient image when data extrema change. It relies on the 'onExtremaChange' callback from heatmap.js.

```javascript
/*  start legend code */
// we want to display the gradient, so we have to draw it
var legendCanvas = document.createElement('canvas');
legendCanvas.width = 100;
legendCanvas.height = 10;
var min = document.querySelector('#min');
var max = document.querySelector('#max');
var gradientImg = document.querySelector('#gradient');
var legendCtx = legendCanvas.getContext('2d');
var gradientCfg = {};
function updateLegend(data) {
  // the onExtremaChange callback gives us min, max, and the gradientConfig
  // so we can update the legend
  min.innerHTML = data.min;
  max.innerHTML = data.max;
  // regenerate gradient image
  if (data.gradient != gradientCfg) {
    gradientCfg = data.gradient;
    var gradient = legendCtx.createLinearGradient(0, 0, 100, 1);
    for (var key in gradientCfg) {
      gradient.addColorStop(key, gradientCfg[key]);
    }
    legendCtx.fillStyle = gradient;
    legendCtx.fillRect(0, 0, 100, 10);
    gradientImg.src = legendCanvas.toDataURL();
  }
};
/* legend code end */
```

--------------------------------

### Update heatmap maximum value

Source: https://www.patrick-wied.at/static/heatmapjs/docs.html

Updates the upper bound of the dataset, which triggers a full re-render of the heatmap.

```javascript
heatmapInstance.setDataMax(200);
// setting the maximum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMax(100);
```
Tokens:
Raw