CapacitorHeatmap

If this project has been useful to you and you want to help me to keep contributing to the open source with projects, examples, plugins,... collaborate and buy me a coffee.

Capacitor Heatmap is a custom Native Capacitor plugin to show Heatmap on Web, IOS and Android platforms.

Currently you can choose from four types of heatmaps with only one plugin :) (only WEB at this moment):

Simple Heatmap

Google Maps Heatmap

Leaflet Maps Heatmap

Capacitor

Capacitor is a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom Native plugins that your app might need. Additionally, Capacitor provides first-class Progressive Web App support so you can write one app and deploy it to the app stores, and the mobile web.

Capacitor is being designed by the Ionic Framework team as an eventual alternative to Cordova, though backwards compatibility with Cordova plugins is a priority and is actively being worked on. Capacitor can be used without Ionic Framework, but soon it'll become a core part of the Ionic developer experience.

Capacitor also comes with a Plugin API for building native plugins. On iOS, first-class Swift support is available, and much of the iOS Capacitor runtime is written in Swift. Plugins may also be written in Objective-C. On Android, support for writing plugins with Java and Kotlin is supported.

Capacitor Heatmap WEB Interfaces & Types

INTERFACES & TYPES

/**
 * Description [Interface to define heatmap logs.]
 *
 * @author abrito
 * @version 0.0.1
 *
 * @interface
*/
export interface IHeatmapLog {
    log(primaryMessage: string, ...supportingData: any[]): void;
    debug(primaryMessage: string, ...supportingData: any[]): void;
    warn(primaryMessage: string, ...supportingData: any[]): void;
    error(primaryMessage: string, ...supportingData: any[]): void;
    info(primaryMessage: string, ...supportingData: any[]): void;
}

/**
 * Description [Interface to define simple heatmap initialize options.]
 *
 * @author abrito
 * @version 0.0.1
 *
 * @interface
*/
export interface IHeatmapOptions {
    element: string;
    type: IHeatmapType;
    data?: HeatmapData;
    debug?: boolean;
    showColorScale?: boolean;
}

/**
 * Description [Interface to define simple heatmap point.]
 *
 * @author abrito
 * @version 0.0.1
 *
 * @interface
*/
export interface IHeatmapPosition {
    x: number;
    y: number;
}

/**
 * Description [Interface to define simple heatmap point.]
 *
 * @author abrito
 * @version 0.0.1
 *
 * @interface
*/
export interface IHeatmapPoint {
    x: number;
    y: number;
    thickness: number;
}

export enum IHeatmapType {
    Simple = 'simple',
    GoogleMaps = 'googlemaps',
    LeafletMaps = 'leafletmaps'
}

/**
 * Description [Interface to define heatmap draw options.]
 *
 * @author abrito
 * @version 0.0.1
 *
 * @interface
*/
export interface IHeatmapDrawOptions {
    opacity?: number,
    radius?: number,
    gradient?: HeatmapGradient | GMHeatmapGradient
    data?:  HeatmapData | GMHeatmapData | LMHeatmapData
}

export type HeatmapGradient = Record<number, string>;
export type HeatmapPoint = Array<number> | IHeatmapPoint;
export type HeatmapPosition = Array<number> | IHeatmapPosition;
export type HeatmapData = Array<Array<number> | IHeatmapPoint>;

/**
 * Description [Interface to define google maps heatmap initialize options.]
 *
 * @author abrito
 * @version 0.0.1
 *
 * @interface
*/
export interface IGMHeatmapOptions {
    map: google.maps.Map;
    type: IHeatmapType;
    data?: GMHeatmapData;
    debug?: boolean;
}

export type GMHeatmapGradient = string[];
export type GMHeatmapPoint = google.maps.LatLng | google.maps.visualization.WeightedLocation;
export type GMHeatmapCoordinate = google.maps.LatLng;
export type GMHeatmapData = google.maps.MVCArray<google.maps.LatLng | google.maps.visualization.WeightedLocation>;


/**
 * Description [Interface to define leaflet maps heatmap initialize options.]
 *
 * @author abrito
 * @version 0.0.1
 *
 * @interface
*/
export interface ILMHeatmapOptions {
    map: Map;
    type: IHeatmapType;
    data?: LMHeatmapData;
    debug?: boolean;
}

export type LMHeatmapData = Array<LatLngExpression>;
export type LMHeatmapPoint = LatLngExpression;
export type LMHeatmapCoordinate = LatLngTuple;

Capacitor Heatmap WEB public API methods.

initialize(options: IHeatmapOptions | IGMHeatmapOptions | ILMHeatmapOptions): Promise<{value: HTMLCanvasElement | google.maps.visualization.HeatmapLayer}>

Initialize heatmap.

async initializeHeatmap() {
    const options = {element: 'your-element-id', debug: true}};
    const result = await Heatmap.initialize(options);
    console.log('result', result);
}

Returns

Type: Promise<{value: HTMLCanvasElement | google.maps.visualization.HeatmapLayer}>

destroy(): Promise<{value: HTMLCanvasElement | google.maps.visualization.HeatmapLayer}>

Destroy heatmap.

async destroyHeatmap() {
    const result = await Heatmap.destroy();
    console.log('result', result);
}

Methods for handling heatmap data.

setData(data: HeatmapData | GMHeatmapData | LMHeatmapData): Promise<{value: HeatmapData | GMHeatmapData | LMHeatmapData}>

Set heatmap data of [[x, y, thickness], ...] or [{x: value, y: value, thickness: value},...] format.

const d = await Heatmap.setData(this.data);

Returns

Type: Promise<{value: HeatmapData | GMHeatmapData}>

getData(): Promise<{value: HeatmapData | GMHeatmapData | LMHeatmapData}>

Get heatmap data of [[x, y, thickness], ...] format.

const d = await Heatmap.getData();

Returns

Type: Promise<{value: HeatmapData | GMHeatmapData}>

getValueAt(position: HeatmapPosition | GMHeatmapCoordinate | LMHeatmapCoordinate): Promise<{value: number}>

Returns value at datapoint position.

const result = await Heatmap.getValueAt([10, 10]); // x = 10 & y = 10

Returns

Type: Promise<{value: number}>

clearData(): Promise<{value: HeatmapData | GMHeatmapData | LMHeatmapData}>

Clear heatmap data.

const d = await Heatmap.clearData();

Returns

Type: Promise<{value: HeatmapData | GMHeatmapData}>

addPoint(point: HeatmapPoint | GMHeatmapPoint | LMHeatmapPoint): Promise<{value: HeatmapData | GMHeatmapData | LMHeatmapData}>

Add new point to heatmap data.

canvas.onmousemove = (e) => {
    const rect = canvas.getBoundingClientRect();
    const resultAddPoint = Heatmap.addPoint([e.clientX - rect.left, e.clientY - rect.top, 18]);
    window.requestAnimationFrame(this.drawHeatmap);
};

Returns

Type: Promise<{value: HeatmapData | GMHeatmapData}>

setMax(max: number): Promise<{value: number}>

Set max data value (1 by default).

const newMax = Heatmap.setMax(18);

Methods for rendering heatmap.

draw(options: IHeatmapDrawOptions): Promise<{value: boolean}>

Draw heatmap.

async drawHeatmap(data) {
    const options = {data};
    const result = await Heatmap.draw(options);
}

Returns

Type: Promise<{value: boolean}>

Methods for handling heatmap appearance.

resize(options: {width: number, height: number}): Promise<{value: {newWidth: number, newHeight: number}}>

Resize heatmap canvas.

async resizeHeatmap(width: number, height: number) {
    const options = {width, height};
    const resultResize = await Heatmap.resize(options);
    console.log('result resize', resultResize);
}

Returns

Type: Promise<{value: {newWidth: number, newHeight: number}}>

gradient(grad: HeatmapGradient | GMHeatmapGradient): Promise<{value: Uint8ClampedArray | GMHeatmapGradient}>

Set gradient colors as HeatmapGradient.

const resultGradient = await Heatmap.gradient(grad);

Returns

Type: Promise<{value: Uint8ClampedArray | GMHeatmapGradient}>

opacity(opa: number): Promise<{value: number}>

Set the opacity of the heatmap, expressed as a number between 0 and 1.

const resultOpacity = await Heatmap.opacity(opa);

Returns

Type: Promise<{value: number}>

radius(rad: number): Promise<{value: number}>

Set the radius of the heatmap.

const resultRadius = await Heatmap.radius(rad);

Returns

Type: Promise<{value: number}>

Method to obtain the image of the canvas.

getDataURL(type: string, imageQuality: number): Promise<{value: string}>

Returns dataURL string. The returned value is the base64 encoded dataURL of the heatmap instance.

const resultDataUrl = await Heatmap.getDataURL('image/jpeg', 0.5);

Returns

Type: Promise<{value: string}>

TODO

• Simple Heatmap, Google Maps Heatmap & Leaflet Maps Heaptmap for ANDROID.
• Simple Heatmap, Google Maps Heatmap & Leaflet Maps Heaptmap for IOS.