firemap.js

Site | NPM Module | GitHub Repo

firemap.js is the official npm module of Firemap.js, a free app for easily creating heatmaps in Node.js and the Browser.

🌐 Firemap.js Works in Node AND browser environments

Yes, this module works in both Node and browser environments, including compatibility with Webpack and Browserify!

🦄 Features

• Easily create heatmaps in Node.js and the Browser

📦 Install Firemap.js

Option 1: Install via npm

Install with npm if you plan to use firemap.js in a Node project or in the browser.

# Install the package
npm install firemap.js

# Rebuild native modules (this module uses 'canvas', which is a native module)
npm rebuild

If you plan to use firemap.js in a browser environment, you will probably need to use Webpack, Browserify, or a similar service to compile it.

const Firemap = require('firemap.js');
const firemap = new Firemap({
  width: 1000,
  height: 1000,
});

Option 2: Install via CDN

Install with CDN if you plan to use firemap.js only in a browser environment.

<script src="https://cdn.jsdelivr.net/npm/firemap.js@latest/dist/index.min.js"></script>
<script type="text/javascript">
  var firemap = new Firemap({
    width: 1000,
    height: 1000,
  });
</script>

⚡️ Usage

Creating an Instance

See a simple example of creating a new instance of Firemap.js with the required options width and height.

const Firemap = require('firemap.js');
const firemap = new Firemap({
  // Set the size of the heatmap
  width: 1000, height: 1000,
});

Creating an Instance (full options)

See a full example of creating a new instance of Firemap.js with all available options.

const Firemap = require('firemap.js');
const firemap = new Firemap({
  // Set the size of the heatmap
  width: 1000, height: 1000,

  // Set the maximum intensity of each data point
  maxIntensity: 1.0,

  // Set the radius and blur of the data points
  radius: 10, blur: 5,

  // Set the gradient of the heatmap (from cold to hot)
  gradient: {
    0.4: 'blue',
    0.6: 'cyan',
    0.7: 'lime',
    0.8: 'yellow',
    1.0: 'red',
  },

  // Set the background image of the heatmap (as a buffer)
  backgroundImage: null,

  // Data to be added to the heatmap
  data: [
    { x: 100, y: 150, intensity: 0.5 },
    { x: 200, y: 250, intensity: 0.8 },
    { x: 250, y: 50, intensity: 1.0 },
  ],
});

Adding Data Points

Adding data points to the heatmap is easy. Just add them one by one. The intensity value should be between 0 and 1 and represents the intensity of the data point.

Intensity values closer to 1 are hotter, while intensity values closer to 0 are colder.

The intensity values are cumulative. This means that if you add two data points with the same x and y values, the intensity of the data point will be the sum of the two intensity values.

firemap.add({ x: 100, y: 100, intensity: 0.5 });
firemap.add({ x: 200, y: 200, intensity: 0.5 });
firemap.add({ x: 100, y: 100, intensity: 0.5 }); // This will add to the intensity of the first data point

Setting Maximum Intensity

You can adjust the maximum intensity of the heatmap. This sets the relative intensity of the hottest data point.

firemap.setMaxIntensity(1.0);
// Or automatically determine the maximum intensity
firemap.setMaxIntensity('auto');

Setting Radius and Blur

You can adjust the radius and blur of the data points.

firemap.setRadius(20, 10);

Setting Gradient

You can adjust the gradient of the heatmap. The gradient is an object with keys as intensity values and values as colors.

The intensity values should be between 0 and 1 and represent the intensity of the data point.

Intensity values closer to 1 are hotter, while intensity values closer to 0 are colder.

firemap.setGradient({
  0.4: 'blue',
  0.6: 'cyan',
  0.7: 'lime',
  0.8: 'yellow',
  1.0: 'red'
});

Drawing the Heatmap

Render the heatmap to the canvas.

firemap.draw();

Clearing Data

You can clear all data points from the heatmap.

firemap.clear();

Resizing the Canvas

You can resize the canvas of the heatmap.

firemap.resize({
  // Set the new size of the heatmap
  width: 2000, height: 2000,
});

Setting Background Image

You can set the background image of the heatmap. The image should be a buffer.

const fs = require('fs');
const imageBuffer = fs.readFileSync('path/to/background.jpg');
firemap.setBackgroundImage(imageBuffer);

Getting the Buffer

You can get the buffer of the heatmap. This is useful for saving the heatmap as an image.

const buffer = firemap.getBuffer('image/png');

// In Node.js, you can save the buffer to a file
const fs = require('fs');
fs.writeFileSync('heatmap.png', buffer);

📘 Using Firemap.js

After you have followed the install step, you can start using firemap.js to enhance your project.

For a more in-depth documentation of this library and the Firemap.js service, please visit the official Firemap.js website.

📝 What Can Firemap.js do?

The best way to create Heatmaps for any data

🗨️ Final Words

If you are still having difficulty, we would love for you to post a question to the Firemap.js issues page. It is much easier to answer questions that include your code and relevant files! So if you can provide them, we'd be extremely grateful (and more likely to help you find the answer!)

📚 Projects Using this Library

• ITW Creative Works
• Somiibo
• Slapform
• StudyMonkey
• DashQR
• Replyify
• SoundGrail
• Trusteroo

Ask us to have your project listed! :)