Merge pull request #3066 from lookuptable/heatmap.js

Add type definitions for heatmap.js

CONTRIBUTORS.md

@@ -141,6 +141,7 @@ All definitions files include a header with the author and editors, so at some p
 * [HashMap](https://github.com/flesler/hashmap) (by [Rafał Wrzeszcz](https://wrzasq.pl))
 * [HashSet](http://www.timdown.co.uk/jshashtable/jshashset.html) (by [Sergey Gerasimov](https://github.com/gerich-home))
 * [Hashtable](http://www.timdown.co.uk/jshashtable/) (by [Sergey Gerasimov](https://github.com/gerich-home))
+* [heatmap.js](https://github.com/pa7/heatmap.js/) (by [Yang Guan](https://github.com/lookuptable))
 * [HelloJS](http://adodson.com/hello.js) (by [Pavel Zika](https://github.com/PavelPZ))
 * [Highcharts](http://www.highcharts.com/) (by [damianog](https://github.com/damianog))
 * [Highland](http://highlandjs.org/) (by [Bart van der Schoor](https://github.com/Bartvds/))

heatmap.js/heatmap-tests.ts

@@ -0,0 +1,42 @@
+/// <reference path="heatmap.d.ts" />
+
+var baseLayer = L.tileLayer(
+    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
+        maxZoom: 18
+     });
+
+var testData: HeatmapData = {
+    max: 8,
+    data: [
+        {
+            lat: 24.6408,
+            lng:46.7728,
+            count: 3
+        }, {
+            lat: 50.75,
+            lng: -1.55,
+            count: 1
+        }
+    ]
+};
+
+var config : HeatmapConfiguration = {
+    radius: 2,
+    maxOpacity: .8,
+    scaleRadius: true,
+    useLocalExtrema: true,
+    latField: 'lat',
+    lngField: 'lng',
+    valueField: 'count'
+};
+
+var heatmapLayer = new HeatmapOverlay(config);
+
+var map = new L.Map('map-canvas', {
+    center: new L.LatLng(25.6586, -80.3568),
+    zoom: 4,
+    layers: [baseLayer, heatmapLayer]
+});
+
+heatmapLayer.setData(testData);

heatmap.js/heatmap.d.ts

@@ -0,0 +1,134 @@
+// Type definitions for heatmap.js v2.0
+// Project: https://github.com/pa7/heatmap.js/
+// Definitions by: Yang Guan <https://github.com/lookuptable>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+/// <reference path="../leaflet/leaflet.d.ts" />
+
+/*
+ * Configuration object of a heatmap
+ */
+interface HeatmapConfiguration {
+
+    /*
+     * A background color string in form of hexcode, color name, or rgb(a)
+     */
+    backgroundColor?: string;
+
+    /*
+     * The blur factor that will be applied to all datapoints. The higher the
+     * blur factor is, the smoother the gradients will be
+     * Default value: 0.85
+     */
+    blur?: number;
+
+    /*
+     * An object that represents the gradient
+     */
+    gradient?: any;
+
+    /*
+     * The property name of your latitude coordinate in a datapoint
+     * Default value: 'x'
+     */
+    latField?: string;
+
+    /*
+     * The property name of your longitude coordinate in a datapoint
+     * Default value: 'y'
+     */
+    lngField?: string;
+
+    /*
+     * The maximal opacity the highest value in the heatmap will have. (will be
+     * overridden if opacity set)
+     * Default value: 0.6
+     */
+    maxOpacity?: number;
+
+    /*
+     * The minimum opacity the lowest value in the heatmap will have (will be
+     * overridden if opacity set)
+     */
+    minOpacity?: number;
+
+    /*
+     * A global opacity for the whole heatmap. This overrides maxOpacity and
+     * minOpacity if set
+     */
+    opacity?: number;
+
+    /*
+     * The radius each datapoint will have (if not specified on the datapoint
+     * itself)
+     */
+    radius?: number;
+
+    /*
+     * Indicate whether the heatmap should use a global extrema or a local
+     * extrema (the maximum and minimum of the currently displayed viewport)
+     */
+    useLocalExtrema?: boolean;
+
+    /*
+     * The property name of the value/weight in a datapoint
+     */
+    valueField: string;
+}
+
+/*
+ * A single data point on a heatmap. The keys are specified by
+ * HeatmapConfig.latField, HeatmapConfig.lngField and HeatmapConfig.valueField
+ */
+interface HeatmapDataPoint {
+    [index: string]: number;
+}
+
+/*
+ * An object representing the set of data points on a heatmap
+ */
+interface HeatmapData {
+
+    /*
+     * An array of HeatmapDataPoints
+     */
+    data: HeatmapDataPoint[];
+
+    /*
+     * Max value of the valueField
+     */
+    max?: number;
+
+    /*
+     * Min value of the valueField
+     */
+    min?: number;
+}
+
+/*
+ * The overlay layer to be added onto leaflet map
+ */
+declare class HeatmapOverlay {
+
+    /*
+     * Initialization function
+     */
+    constructor(configuration: HeatmapConfiguration)
+
+    /*
+     * Create DOM elements for an overlay, adding them to map panes and puts
+     * listeners on relevant map events
+     */
+    onAdd(map: L.Map): void;
+
+    /*
+     * Remove the overlay's elements from the DOM and remove listeners
+     * previously added by onAdd()
+     */
+    onRemove(map: L.Map): void;
+
+    /*
+     * Initialize a heatmap instance with the given dataset
+     */
+    setData(data: HeatmapData): void;
+}