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 | Mapbox Maps Heatmap |
 |
 |
 |
 |
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.
INTERFACES & TYPES
/**
* Description [Interface to define heatmap logs.]
*
* @author abrito
* @version 0.0.1
*
* @interface
*/
export interface HeatmapLog {
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 color scale options.]
*
* @author abrito
* @version 0.0.1
*
* @interface
*/
export interface ColorScale {
show: boolean;
position?: {
vertical: VerticalPosition;
horizontal: HorizontalPosition;
};
boxShadow?: string;
text?: {
start?: string;
end?: string;
color?: string;
},
background?: string;
gradientColorMode?: 'original' | 'inverted'
}
/**
* Description [Interface to define color scale styles.]
*
* @author abrito
* @version 0.0.1
*
* @interface
*/
export interface ColorScaleStyles {
width: number;
height: number;
borderRadius: string;
position: string;
zIndex: string;
marginTop: string;
margin: string;
padding: string;
boxShadow: string;
fillTextStart: string;
fillTextEnd: string;
fillTextColor: string;
background: string;
}
/**
* Description [Interface to define simple heatmap initialize options.]
*
* @author abrito
* @version 0.0.1
*
* @interface
*/
export interface HeatmapOptions {
element: string;
type: HeatmapType;
data?: HeatmapData;
debug?: boolean;
colorScale?: ColorScale;
}
/**
* Description [Interface to define simple heatmap point.]
*
* @author abrito
* @version 0.0.1
*
* @interface
*/
export interface Coordinate {
x: number;
y: number;
}
/**
* Description [Interface to define simple heatmap point.]
*
* @author abrito
* @version 0.0.1
*
* @interface
*/
export interface Point {
x: number;
y: number;
thickness: number;
}
export enum HeatmapType {
Simple = 'simple',
GoogleMaps = 'googlemaps',
LeafletMaps = 'leafletmaps',
MapboxMaps = 'mapboxmaps'
}
/**
* Description [Interface to define heatmap draw options.]
*
* @author abrito
* @version 0.0.1
*
* @interface
*/
export interface HeatmapDrawOptions {
opacity?: number,
radius?: number,
gradient?: HeatmapGradient | GMHeatmapGradient
data?: HeatmapData | GMHeatmapData | LMHeatmapData | MapboxHeatmapData
}
export type HeatmapGradient = Record<number, string>;
export type HeatmapPoint = number[] | Point;
export type HeatmapPosition = number[] | Coordinate;
export type HeatmapData = (number[] | Point)[];
/**
* Description [Interface to define google maps heatmap initialize options.]
*
* @author abrito
* @version 0.0.1
*
* @interface
*/
export interface GMHeatmapOptions {
map: google.maps.Map;
type: HeatmapType;
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 LMHeatmapOptions {
map: Map;
type: HeatmapType;
data?: LMHeatmapData;
debug?: boolean;
}
export type LMHeatmapData = LatLngExpression[];
export type LMHeatmapPoint = LatLngExpression;
export type LMHeatmapCoordinate = LatLngTuple;
/**
* Description [Interface to define mapbox maps heatmap initialize options.]
*
* @author abrito
* @version 0.0.1
*
* @interface
*/
export interface MapboxHeatmapOptions {
map: mapboxgl.Map;
type: HeatmapType;
data?: MapboxHeatmapData;
debug?: boolean;
}
/**
* Description [Interface to define location.]
*
* @author abrito
* @version 0.0.1
*
* @interface
*/
export interface Location {
lat: number;
long: number;
thickness?: number;
}
export type MapboxHeatmapData = (number[] | Location)[];
export type MapBoxHeatmapPoint = Location;
export type MapboxHeatmapCoordinate = [number, number] | Location;
initialize(options: IHeatmapOptions | IGMHeatmapOptions | ILMHeatmapOptions | MapboxHeatmapOptions): Promise<{value: HTMLCanvasElement | google.maps.visualization.HeatmapLayer | mapboxgl.Map}>
Initialize heatmap.
async initializeHeatmap() {
const options = {element: 'your-element-id', debug: true}};
const result = await Heatmap.initialize(options);
console.log('result', result);
}
Type: Promise<{value: HTMLCanvasElement | google.maps.visualization.HeatmapLayer | mapboxgl.Map}>
Destroy heatmap.
async destroyHeatmap() {
const result = await Heatmap.destroy();
console.log('result', result);
}
setData(data: HeatmapData | GMHeatmapData | LMHeatmapData | MapboxHeatmapData): Promise<{value: HeatmapData | GMHeatmapData | LMHeatmapData | MapboxHeatmapData}>
Set heatmap data of [[x, y, thickness], ...] or [{x: value, y: value, thickness: value},...] format.
const d = await Heatmap.setData(this.data);
Type: Promise<{value: HeatmapData | GMHeatmapData | LMHeatmapData | MapboxHeatmapData}>
Get heatmap data of [[x, y, thickness], ...] format.
const d = await Heatmap.getData();
Type: Promise<{value: HeatmapData | GMHeatmapData | LMHeatmapData | MapboxHeatmapData}>
getValueAt(position: HeatmapPosition | GMHeatmapCoordinate | LMHeatmapCoordinate | MapboxHeatmapCoordinate): Promise<{value: number}>
Returns value at datapoint position.
const result = await Heatmap.getValueAt([10, 10]); // x = 10 & y = 10
Type: Promise<{value: number}>
Clear heatmap data.
const d = await Heatmap.clearData();
Type: Promise<{value: HeatmapData | GMHeatmapData | LMHeatmapData | MapboxHeatmapData}>
addPoint(point: HeatmapPoint | GMHeatmapPoint | LMHeatmapPoint | MapBoxHeatmapPoint): Promise<{value: HeatmapData | GMHeatmapData | LMHeatmapData | MapboxHeatmapData}>
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);
};
Type: Promise<{value: HeatmapData | GMHeatmapData | LMHeatmapData | MapboxHeatmapData}>
Set max data value (1 by default).
const newMax = Heatmap.setMax(18);
Draw heatmap.
async drawHeatmap(data) {
const options = {data};
const result = await Heatmap.draw(options);
}
Type: Promise<{value: boolean}>
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);
}
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);
Type: Promise<{value: Uint8ClampedArray | GMHeatmapGradient}>
Set the opacity of the heatmap, expressed as a number between 0 and 1.
const resultOpacity = await Heatmap.opacity(opa);
Type: Promise<{value: number}>
Set the radius of the heatmap.
const resultRadius = await Heatmap.radius(rad);
Type: Promise<{value: number}>
Returns dataURL string. The returned value is the base64 encoded dataURL of the heatmap instance.
const resultDataUrl = await Heatmap.getDataURL('image/jpeg', 0.5);
Type: Promise<{value: string}>
- Simple Heatmap, Google Maps Heatmap, Leaflet Maps Heaptmap & Mapbox Maps Heatmap for ANDROID.
- Simple Heatmap, Google Maps Heatmap, Leaflet Maps Heaptmap & Mapbox Maps Heatmap for IOS.