@hpcc-js/map 3.5.4 → 3.5.6

package/src/CanvasPins.ts

@@ -1,397 +1,397 @@
-import { CanvasWidget } from "@hpcc-js/common";
-import { quadtree as d3quadtree } from "d3-quadtree";
-
-export interface CanvasPinRow {
-    0: number;
-    1: number;
-    is_cluster: boolean;
-    already_flagged: boolean;
-    weight: number;
-    fillStyle: string;
-    strokeStyle: string;
-    overlap_arr: CanvasPinRow[];
-}
-
-interface Rect {
-    left: number;
-    right: number;
-    top: number;
-    bottom: number;
-}
-
-class Quadtree {
-    protected _pin_h = 0;
-    protected _pin_w = 0;
-    protected _tree: any;
-    constructor(extent: any, raw_data: any, pin_h: number, pin_w: number) {
-        this._pin_h = pin_h;
-        this._pin_w = pin_w;
-        this._tree = d3quadtree()
-            .extent(extent)
-            .addAll(raw_data);
-    }
-
-    searchRect(left: number, top: number, right: number, bottom: number): CanvasPinRow[] {
-        const ret: any = [];
-        this._tree.visit((node: any, x1: number, y1: number, x2: number, y2: number) => {
-            let next_exists = false;
-            do {
-                if (!node.length) {
-                    if (node.data && !node.data.already_flagged) {
-                        const is_overlapping = overlaps({ left, right, top, bottom }, node.data);
-                        if (is_overlapping) {
-                            node.data.already_flagged = true;
-                            ret.push(node.data);
-                        }
-                    }
-                }
-                next_exists = node = node.next;
-            } while (next_exists);
-            return x1 >= right || y1 >= bottom || x2 < left || y2 < top;
-        });
-        return ret;
-        function overlaps(r1: Rect, point: CanvasPinRow) {
-            return (point[0] < r1.right || point[0] > r1.left) && (point[1] < r1.bottom || point[1] > r1.top);
-        }
-    }
-    getTreeRects(): any {
-        const ret = [];
-        this._tree.visit((node: any, x1: number, y1: number, x2: number, y2: number) => {
-            ret.push([x1, y1, x2 - x1, y2 - y1]);
-        });
-        return ret;
-    }
-}
-
-export class CanvasPins extends CanvasWidget {
-    _quadtree_rect_arr;
-    _drawData;
-    _overlap_count = 0;
-    _sub_overlap_count = 0;
-
-    constructor() {
-        super();
-    }
-
-    enter(domNode, element) {
-        super.enter.apply(this, arguments);
-        this.resize(this._size);
-    }
-
-    update(domNode, element) {
-        super.update.apply(this, arguments);
-        this._ctx = this.element().node().getContext("2d");
-        const needs_data_skew = this.topLeftX_exists() && this.topLeftY_exists() && this.bottomRightX_exists() && this.bottomRightY_exists();
-        const _data = (needs_data_skew ? this.skewedData() : this.data())
-            .map(row => [...row])
-            .map(row => {
-                row.is_cluster = false;
-                row.already_flagged = false;
-                row.weight = row[2];
-                row.fillStyle = "#FFFFFF";
-                row.strokeStyle = "#000000";
-                row.overlap_arr = [];
-                return row;
-            });
-        this._ctx.clearRect(0, 0, this.width(), this.height());
-
-        this._drawData = this.enableClustering() ? this.applyClustering(_data) : _data;
-
-        this.draw(this._drawData);
-    }
-
-    applyClustering(_data: Readonly<CanvasPinRow[]>): Readonly<CanvasPinRow[]> {
-        const context = this;
-        this._overlap_count = 0;
-        const arrow_height = 8;
-        const pin_h = this.pinHeight();
-        const pin_w = this.pinWidth();
-        const half_w = pin_w / 2;
-        const half_h = pin_h / 2;
-        const qt = new Quadtree([[0, 0], [this.size().width, this.size().height]], _data, pin_h, pin_w);
-        this._quadtree_rect_arr = qt.getTreeRects();
-        switch (this.clusterMode()) {
-            case "default":
-                const defData = _data.map(row => {
-                    if (!row.already_flagged) {
-                        const mult = this.searchRectMult();
-                        const left = row[0] - half_w * mult;
-                        const top = row[1] - half_h * mult - arrow_height;
-                        const right = row[0] + half_w * mult;
-                        const bottom = row[1] + half_h * mult - arrow_height;
-                        row.overlap_arr = qt.searchRect(left, top, right, bottom).filter(n => n !== row);
-                        if (row.overlap_arr.length === 0) {
-                            row.already_flagged = false;
-                        }
-                    }
-                    return row;
-                });
-                defData.forEach(data_row => {
-                    if (data_row.already_flagged && data_row.overlap_arr.length) {
-                        defData.push(cluster_arr([data_row, ...data_row.overlap_arr]));
-                    }
-                });
-                return defData;
-            case "grid":
-                const gridData = [..._data];
-                const grid_cell_w = this.gridCellSize();
-                const grid_cell_h = this.gridCellSize();
-                const grid_row_count = Math.ceil(this.size().width / grid_cell_w);
-                const grid_col_count = Math.ceil(this.size().height / grid_cell_h);
-                for (let _col = 0; _col < grid_col_count; _col++) {
-                    for (let _row = 0; _row < grid_row_count; _row++) {
-                        const left = grid_cell_w * _row;
-                        const top = grid_cell_h * _col;
-                        const right = grid_cell_w * (_row + 1);
-                        const bottom = grid_cell_h * (_col + 1);
-                        const overlap_arr = qt.searchRect(left, top, right, bottom);
-                        if (overlap_arr.length > 1) {
-                            const x = left + (grid_cell_w / 2);
-                            const y = top + (grid_cell_h / 2);
-                            gridData.push(cluster_arr(overlap_arr, x, y));
-                        }
-                    }
-                }
-                return gridData;
-        }
-        return _data;
-
-        function cluster_arr(arr: CanvasPinRow[], x?: number, y?: number): CanvasPinRow {
-            const arr_weight = arr.reduce((a, b) => {
-                b.already_flagged = true;
-                return a + b[2];
-            }, 0);
-            const _x = typeof x !== "undefined" ? x : context.useAveragePos() ? arr.reduce((a, b) => a + b[0] * b[2], 0) / arr_weight : arr[0][0];
-            const _y = typeof y !== "undefined" ? y : context.useAveragePos() ? arr.reduce((a, b) => a + b[1] * b[2], 0) / arr_weight : arr[0][1];
-            return {
-                0: _x,
-                1: _y,
-                weight: arr.reduce((a, b) => a + b[2], 0),
-                is_cluster: true,
-                already_flagged: false,
-                fillStyle: "#FFFFFF",
-                strokeStyle: "#000000",
-                overlap_arr: []
-            };
-        }
-    }
-
-    drawQuadtree() {
-        if (!this._quadtree_rect_arr) return;
-        this._ctx.strokeStyle = "#000000";
-        this._quadtree_rect_arr.forEach(n => {
-            this._ctx.strokeRect(n[0], n[1], n[2], n[3]);
-        });
-    }
-    draw(data_arr) {
-        const context = this;
-        const ctx = this._ctx;
-        if (this.showQuadtree()) this.drawQuadtree();
-        const arrow_height = this.arrowHeight();
-        const arrow_width = this.arrowWidth();
-        const pin_h = this.pinHeight();
-        const pin_w = this.pinWidth();
-        const weight_bonus: number = this.radiusWeightMult();
-        let heaviest_cluster = 0;
-        if (this.useWeightedRadius()) {
-            data_arr.filter(n => n.is_cluster).forEach(n => {
-                if (heaviest_cluster < n.weight) {
-                    heaviest_cluster = n.weight;
-                }
-            });
-        }
-        data_arr
-            .filter(n => !n.already_flagged)
-            .sort((a, b) => a[1] > b[1] ? 1 : -1)
-            .forEach(d => {
-                if (d.is_cluster || this.allCircles()) {
-                    let _radius = pin_w / 2;
-                    if (this.useWeightedRadius()) {
-                        _radius += pin_w * (weight_bonus * d.weight / heaviest_cluster);
-                    }
-                    drawCirclePin({
-                        icon: d.weight,
-                        left: Math.floor(d[0] - _radius) + 0.5,
-                        top: Math.floor(d[1] - _radius - arrow_height) + 0.5,
-                        radius: _radius,
-                        arrow_height,
-                        arrow_width
-                    });
-                } else {
-                    drawSquarePin({
-                        fillStyle: d.fillStyle,
-                        strokeStyle: d.strokeStyle,
-                        icon: d.weight,
-                        left: Math.floor(d[0] - (pin_w / 2)) + 0.5,
-                        top: Math.floor(d[1] - pin_h - arrow_height) + 0.5,
-                        width: pin_w,
-                        height: pin_h,
-                        arrow_height,
-                        arrow_width
-                    });
-                }
-            });
-
-        function drawCirclePin(p: any) {
-            p.width = p.radius * 2;
-            p.height = p.width;
-            ctx.fillStyle = "#FFFFFF";
-            ctx.strokeStyle = "#000000";
-            ctx.beginPath();
-            ctx.arc(p.left + (p.width / 2), p.top + (p.height / 2), p.radius, 0, 2 * Math.PI);
-            ctx.closePath();
-            ctx.fill();
-            ctx.stroke();
-            drawPinText(p);
-        }
-        function drawSquarePin(p: any) {
-            ctx.fillStyle = p.fillStyle;
-            ctx.strokeStyle = "#000000";
-            ctx.fillRect(p.left, p.top, p.width, p.height);
-            ctx.strokeRect(p.left, p.top, p.width, p.height);
-            drawArrow(p);
-            drawPinText(p);
-        }
-        function drawArrow(p: any, is_offset?: boolean) {
-            const a_x0 = p.left + (p.width / 2) - (p.arrow_width / 2);
-            const a_x1 = p.left + (p.width / 2);
-            const a_x2 = p.left + (p.width / 2) + (p.arrow_width / 2);
-            let a_y0 = p.top + p.height;
-            let a_y1 = a_y0 + p.arrow_height;
-            let a_y2 = a_y0;
-            if (!is_offset) {
-                ctx.fillStyle = "#FFFFFF";
-                ctx.strokeStyle = "#000000";
-            } else {
-                ctx.fillStyle = "#FFFFFF";
-                ctx.strokeStyle = "#FFFFFF";
-                a_y0 -= 2;
-                a_y1 -= 2;
-                a_y2 -= 2;
-            }
-            ctx.beginPath();
-            ctx.moveTo(a_x0, a_y0);
-            ctx.lineTo(a_x1, a_y1);
-            ctx.lineTo(a_x2, a_y2);
-            ctx.lineTo(a_x0, a_y0);
-            ctx.closePath();
-            ctx.stroke();
-            ctx.fill();
-            if (!is_offset) drawArrow(p, true);
-        }
-        function drawPinText(p: any) {
-            ctx.font = `${context.pinFontSize()}px '${context.pinFontFamily()}'`;
-            const x = p.left + (p.width / 2);
-            const y = p.top + (p.height / 2);
-            ctx.textAlign = "center";
-            ctx.textBaseline = "middle";
-            ctx.fillStyle = "#000000";
-            let size_dec = 0;
-            let txt_w = ctx.measureText(p.icon).width;
-            while (txt_w > p.width || !context.shrinkFontToPin()) {
-                size_dec++;
-                ctx.font = `${context.pinFontSize() - size_dec}px '${context.pinFontFamily()}'`;
-                txt_w = ctx.measureText(p.icon).width;
-            }
-            ctx.fillText(p.icon, x, y);
-        }
-    }
-
-    skewedData() {
-        const context = this;
-        const retArr = [];
-        const arr = this.data();
-        const box = this.size();
-
-        const coordsWidth = this.bottomRightX() - this.topLeftX();
-        const coordsHeight = this.bottomRightY() - this.topLeftY();
-
-        const pixelValueX = coordsWidth / box.width;
-        const pixelValueY = coordsHeight / box.height;
-
-        arr.forEach(function (n) {
-            const left = Math.abs(n[0] - context.topLeftX());
-            const top = Math.abs(n[1] - context.topLeftY());
-
-            const newX = left / pixelValueX;
-            const newY = top / pixelValueY;
-
-            retArr.push([newX, newY, n[2]]);
-        });
-
-        return retArr;
-    }
-}
-CanvasPins.prototype._class += " map_CanvasPins";
-
-export interface CanvasPins {
-    clusterMode(): any;
-    clusterMode(_: any): CanvasPins;
-    gridCellSize(): number;
-    gridCellSize(_: number): CanvasPins;
-
-    allCircles(): boolean;
-    allCircles(_: boolean): CanvasPins;
-    showQuadtree(): boolean;
-    showQuadtree(_: boolean): CanvasPins;
-    useAveragePos(): boolean;
-    useAveragePos(_: boolean): CanvasPins;
-    useWeightedRadius(): boolean;
-    useWeightedRadius(_: boolean): CanvasPins;
-    radiusWeightMult(): number;
-    radiusWeightMult(_: number): CanvasPins;
-    shrinkFontToPin(): boolean;
-    shrinkFontToPin(_: boolean): CanvasPins;
-    enableClustering(): boolean;
-    enableClustering(_: boolean): CanvasPins;
-    searchRectMult(): number;
-    searchRectMult(_: number): CanvasPins;
-    bottomRightX(): number;
-    bottomRightX(_: number): CanvasPins;
-    bottomRightX_exists(): boolean;
-    bottomRightY(): number;
-    bottomRightY(_: number): CanvasPins;
-    bottomRightY_exists(): boolean;
-    topLeftX(): number;
-    topLeftX(_: number): CanvasPins;
-    topLeftX_exists(): boolean;
-    topLeftY(): number;
-    topLeftY(_: number): CanvasPins;
-    topLeftY_exists(): boolean;
-
-    pinHeight(): number;
-    pinHeight(_: number): CanvasPins;
-    pinWidth(): number;
-    pinWidth(_: number): CanvasPins;
-    pinFontFamily(): string;
-    pinFontFamily(_: string): CanvasPins;
-    pinFontSize(): number;
-    pinFontSize(_: number): CanvasPins;
-    arrowHeight(): number;
-    arrowHeight(_: number): CanvasPins;
-    arrowWidth(): number;
-    arrowWidth(_: number): CanvasPins;
-}
-
-CanvasPins.prototype.publish("clusterMode", "default", "set", "clusterMode", ["defualt", "grid"], { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("gridCellSize", 80, "number", "gridCellSize", null, { tags: ["Basic"], optional: true });
-
-CanvasPins.prototype.publish("allCircles", false, "boolean", "allCircles", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("showQuadtree", false, "boolean", "showQuadtree", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("useAveragePos", false, "boolean", "useAveragePos", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("shrinkFontToPin", true, "boolean", "shrinkFontToPin", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("enableClustering", true, "boolean", "enableClustering", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("useWeightedRadius", false, "boolean", "useWeightedRadius", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("radiusWeightMult", 0.5, "number", "radiusWeightMult", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("searchRectMult", 3, "number", "searchRectMult", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("bottomRightX", null, "number", "Bottom right x-value", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("bottomRightY", null, "number", "Bottom right y-value", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("topLeftX", null, "number", "Top left x-value", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("topLeftY", null, "number", "Top left y-value", null, { tags: ["Basic"], optional: true });
-
-CanvasPins.prototype.publish("pinHeight", 20, "number", "pinHeight", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("pinWidth", 20, "number", "pinWidth", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("pinFontFamily", "Arial", "string", "pinFontFamily", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("pinFontSize", 14, "number", "pinFontSize", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("arrowHeight", 8, "number", "arrowHeight", null, { tags: ["Basic"], optional: true });
-CanvasPins.prototype.publish("arrowWidth", 8, "number", "arrowWidth", null, { tags: ["Basic"], optional: true });
+import { CanvasWidget } from "@hpcc-js/common";
+import { quadtree as d3quadtree } from "d3-quadtree";
+
+export interface CanvasPinRow {
+    0: number;
+    1: number;
+    is_cluster: boolean;
+    already_flagged: boolean;
+    weight: number;
+    fillStyle: string;
+    strokeStyle: string;
+    overlap_arr: CanvasPinRow[];
+}
+
+interface Rect {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+
+class Quadtree {
+    protected _pin_h = 0;
+    protected _pin_w = 0;
+    protected _tree: any;
+    constructor(extent: any, raw_data: any, pin_h: number, pin_w: number) {
+        this._pin_h = pin_h;
+        this._pin_w = pin_w;
+        this._tree = d3quadtree()
+            .extent(extent)
+            .addAll(raw_data);
+    }
+
+    searchRect(left: number, top: number, right: number, bottom: number): CanvasPinRow[] {
+        const ret: any = [];
+        this._tree.visit((node: any, x1: number, y1: number, x2: number, y2: number) => {
+            let next_exists;
+            do {
+                if (!node.length) {
+                    if (node.data && !node.data.already_flagged) {
+                        const is_overlapping = overlaps({ left, right, top, bottom }, node.data);
+                        if (is_overlapping) {
+                            node.data.already_flagged = true;
+                            ret.push(node.data);
+                        }
+                    }
+                }
+                next_exists = node = node.next;
+            } while (next_exists);
+            return x1 >= right || y1 >= bottom || x2 < left || y2 < top;
+        });
+        return ret;
+        function overlaps(r1: Rect, point: CanvasPinRow) {
+            return (point[0] < r1.right || point[0] > r1.left) && (point[1] < r1.bottom || point[1] > r1.top);
+        }
+    }
+    getTreeRects(): any {
+        const ret = [];
+        this._tree.visit((node: any, x1: number, y1: number, x2: number, y2: number) => {
+            ret.push([x1, y1, x2 - x1, y2 - y1]);
+        });
+        return ret;
+    }
+}
+
+export class CanvasPins extends CanvasWidget {
+    _quadtree_rect_arr;
+    _drawData;
+    _overlap_count = 0;
+    _sub_overlap_count = 0;
+
+    constructor() {
+        super();
+    }
+
+    enter(domNode, element) {
+        super.enter.apply(this, arguments);
+        this.resize(this._size);
+    }
+
+    update(domNode, element) {
+        super.update.apply(this, arguments);
+        this._ctx = this.element().node().getContext("2d");
+        const needs_data_skew = this.topLeftX_exists() && this.topLeftY_exists() && this.bottomRightX_exists() && this.bottomRightY_exists();
+        const _data = (needs_data_skew ? this.skewedData() : this.data())
+            .map(row => [...row])
+            .map(row => {
+                row.is_cluster = false;
+                row.already_flagged = false;
+                row.weight = row[2];
+                row.fillStyle = "#FFFFFF";
+                row.strokeStyle = "#000000";
+                row.overlap_arr = [];
+                return row;
+            });
+        this._ctx.clearRect(0, 0, this.width(), this.height());
+
+        this._drawData = this.enableClustering() ? this.applyClustering(_data) : _data;
+
+        this.draw(this._drawData);
+    }
+
+    applyClustering(_data: Readonly<CanvasPinRow[]>): Readonly<CanvasPinRow[]> {
+        const context = this;
+        this._overlap_count = 0;
+        const arrow_height = 8;
+        const pin_h = this.pinHeight();
+        const pin_w = this.pinWidth();
+        const half_w = pin_w / 2;
+        const half_h = pin_h / 2;
+        const qt = new Quadtree([[0, 0], [this.size().width, this.size().height]], _data, pin_h, pin_w);
+        this._quadtree_rect_arr = qt.getTreeRects();
+        switch (this.clusterMode()) {
+            case "default":
+                const defData = _data.map(row => {
+                    if (!row.already_flagged) {
+                        const mult = this.searchRectMult();
+                        const left = row[0] - half_w * mult;
+                        const top = row[1] - half_h * mult - arrow_height;
+                        const right = row[0] + half_w * mult;
+                        const bottom = row[1] + half_h * mult - arrow_height;
+                        row.overlap_arr = qt.searchRect(left, top, right, bottom).filter(n => n !== row);
+                        if (row.overlap_arr.length === 0) {
+                            row.already_flagged = false;
+                        }
+                    }
+                    return row;
+                });
+                defData.forEach(data_row => {
+                    if (data_row.already_flagged && data_row.overlap_arr.length) {
+                        defData.push(cluster_arr([data_row, ...data_row.overlap_arr]));
+                    }
+                });
+                return defData;
+            case "grid":
+                const gridData = [..._data];
+                const grid_cell_w = this.gridCellSize();
+                const grid_cell_h = this.gridCellSize();
+                const grid_row_count = Math.ceil(this.size().width / grid_cell_w);
+                const grid_col_count = Math.ceil(this.size().height / grid_cell_h);
+                for (let _col = 0; _col < grid_col_count; _col++) {
+                    for (let _row = 0; _row < grid_row_count; _row++) {
+                        const left = grid_cell_w * _row;
+                        const top = grid_cell_h * _col;
+                        const right = grid_cell_w * (_row + 1);
+                        const bottom = grid_cell_h * (_col + 1);
+                        const overlap_arr = qt.searchRect(left, top, right, bottom);
+                        if (overlap_arr.length > 1) {
+                            const x = left + (grid_cell_w / 2);
+                            const y = top + (grid_cell_h / 2);
+                            gridData.push(cluster_arr(overlap_arr, x, y));
+                        }
+                    }
+                }
+                return gridData;
+        }
+        return _data;
+
+        function cluster_arr(arr: CanvasPinRow[], x?: number, y?: number): CanvasPinRow {
+            const arr_weight = arr.reduce((a, b) => {
+                b.already_flagged = true;
+                return a + b[2];
+            }, 0);
+            const _x = typeof x !== "undefined" ? x : context.useAveragePos() ? arr.reduce((a, b) => a + b[0] * b[2], 0) / arr_weight : arr[0][0];
+            const _y = typeof y !== "undefined" ? y : context.useAveragePos() ? arr.reduce((a, b) => a + b[1] * b[2], 0) / arr_weight : arr[0][1];
+            return {
+                0: _x,
+                1: _y,
+                weight: arr.reduce((a, b) => a + b[2], 0),
+                is_cluster: true,
+                already_flagged: false,
+                fillStyle: "#FFFFFF",
+                strokeStyle: "#000000",
+                overlap_arr: []
+            };
+        }
+    }
+
+    drawQuadtree() {
+        if (!this._quadtree_rect_arr) return;
+        this._ctx.strokeStyle = "#000000";
+        this._quadtree_rect_arr.forEach(n => {
+            this._ctx.strokeRect(n[0], n[1], n[2], n[3]);
+        });
+    }
+    draw(data_arr) {
+        const context = this;
+        const ctx = this._ctx;
+        if (this.showQuadtree()) this.drawQuadtree();
+        const arrow_height = this.arrowHeight();
+        const arrow_width = this.arrowWidth();
+        const pin_h = this.pinHeight();
+        const pin_w = this.pinWidth();
+        const weight_bonus: number = this.radiusWeightMult();
+        let heaviest_cluster = 0;
+        if (this.useWeightedRadius()) {
+            data_arr.filter(n => n.is_cluster).forEach(n => {
+                if (heaviest_cluster < n.weight) {
+                    heaviest_cluster = n.weight;
+                }
+            });
+        }
+        data_arr
+            .filter(n => !n.already_flagged)
+            .sort((a, b) => a[1] > b[1] ? 1 : -1)
+            .forEach(d => {
+                if (d.is_cluster || this.allCircles()) {
+                    let _radius = pin_w / 2;
+                    if (this.useWeightedRadius()) {
+                        _radius += pin_w * (weight_bonus * d.weight / heaviest_cluster);
+                    }
+                    drawCirclePin({
+                        icon: d.weight,
+                        left: Math.floor(d[0] - _radius) + 0.5,
+                        top: Math.floor(d[1] - _radius - arrow_height) + 0.5,
+                        radius: _radius,
+                        arrow_height,
+                        arrow_width
+                    });
+                } else {
+                    drawSquarePin({
+                        fillStyle: d.fillStyle,
+                        strokeStyle: d.strokeStyle,
+                        icon: d.weight,
+                        left: Math.floor(d[0] - (pin_w / 2)) + 0.5,
+                        top: Math.floor(d[1] - pin_h - arrow_height) + 0.5,
+                        width: pin_w,
+                        height: pin_h,
+                        arrow_height,
+                        arrow_width
+                    });
+                }
+            });
+
+        function drawCirclePin(p: any) {
+            p.width = p.radius * 2;
+            p.height = p.width;
+            ctx.fillStyle = "#FFFFFF";
+            ctx.strokeStyle = "#000000";
+            ctx.beginPath();
+            ctx.arc(p.left + (p.width / 2), p.top + (p.height / 2), p.radius, 0, 2 * Math.PI);
+            ctx.closePath();
+            ctx.fill();
+            ctx.stroke();
+            drawPinText(p);
+        }
+        function drawSquarePin(p: any) {
+            ctx.fillStyle = p.fillStyle;
+            ctx.strokeStyle = "#000000";
+            ctx.fillRect(p.left, p.top, p.width, p.height);
+            ctx.strokeRect(p.left, p.top, p.width, p.height);
+            drawArrow(p);
+            drawPinText(p);
+        }
+        function drawArrow(p: any, is_offset?: boolean) {
+            const a_x0 = p.left + (p.width / 2) - (p.arrow_width / 2);
+            const a_x1 = p.left + (p.width / 2);
+            const a_x2 = p.left + (p.width / 2) + (p.arrow_width / 2);
+            let a_y0 = p.top + p.height;
+            let a_y1 = a_y0 + p.arrow_height;
+            let a_y2 = a_y0;
+            if (!is_offset) {
+                ctx.fillStyle = "#FFFFFF";
+                ctx.strokeStyle = "#000000";
+            } else {
+                ctx.fillStyle = "#FFFFFF";
+                ctx.strokeStyle = "#FFFFFF";
+                a_y0 -= 2;
+                a_y1 -= 2;
+                a_y2 -= 2;
+            }
+            ctx.beginPath();
+            ctx.moveTo(a_x0, a_y0);
+            ctx.lineTo(a_x1, a_y1);
+            ctx.lineTo(a_x2, a_y2);
+            ctx.lineTo(a_x0, a_y0);
+            ctx.closePath();
+            ctx.stroke();
+            ctx.fill();
+            if (!is_offset) drawArrow(p, true);
+        }
+        function drawPinText(p: any) {
+            ctx.font = `${context.pinFontSize()}px '${context.pinFontFamily()}'`;
+            const x = p.left + (p.width / 2);
+            const y = p.top + (p.height / 2);
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillStyle = "#000000";
+            let size_dec = 0;
+            let txt_w = ctx.measureText(p.icon).width;
+            while (txt_w > p.width || !context.shrinkFontToPin()) {
+                size_dec++;
+                ctx.font = `${context.pinFontSize() - size_dec}px '${context.pinFontFamily()}'`;
+                txt_w = ctx.measureText(p.icon).width;
+            }
+            ctx.fillText(p.icon, x, y);
+        }
+    }
+
+    skewedData() {
+        const context = this;
+        const retArr = [];
+        const arr = this.data();
+        const box = this.size();
+
+        const coordsWidth = this.bottomRightX() - this.topLeftX();
+        const coordsHeight = this.bottomRightY() - this.topLeftY();
+
+        const pixelValueX = coordsWidth / box.width;
+        const pixelValueY = coordsHeight / box.height;
+
+        arr.forEach(function (n) {
+            const left = Math.abs(n[0] - context.topLeftX());
+            const top = Math.abs(n[1] - context.topLeftY());
+
+            const newX = left / pixelValueX;
+            const newY = top / pixelValueY;
+
+            retArr.push([newX, newY, n[2]]);
+        });
+
+        return retArr;
+    }
+}
+CanvasPins.prototype._class += " map_CanvasPins";
+
+export interface CanvasPins {
+    clusterMode(): any;
+    clusterMode(_: any): CanvasPins;
+    gridCellSize(): number;
+    gridCellSize(_: number): CanvasPins;
+
+    allCircles(): boolean;
+    allCircles(_: boolean): CanvasPins;
+    showQuadtree(): boolean;
+    showQuadtree(_: boolean): CanvasPins;
+    useAveragePos(): boolean;
+    useAveragePos(_: boolean): CanvasPins;
+    useWeightedRadius(): boolean;
+    useWeightedRadius(_: boolean): CanvasPins;
+    radiusWeightMult(): number;
+    radiusWeightMult(_: number): CanvasPins;
+    shrinkFontToPin(): boolean;
+    shrinkFontToPin(_: boolean): CanvasPins;
+    enableClustering(): boolean;
+    enableClustering(_: boolean): CanvasPins;
+    searchRectMult(): number;
+    searchRectMult(_: number): CanvasPins;
+    bottomRightX(): number;
+    bottomRightX(_: number): CanvasPins;
+    bottomRightX_exists(): boolean;
+    bottomRightY(): number;
+    bottomRightY(_: number): CanvasPins;
+    bottomRightY_exists(): boolean;
+    topLeftX(): number;
+    topLeftX(_: number): CanvasPins;
+    topLeftX_exists(): boolean;
+    topLeftY(): number;
+    topLeftY(_: number): CanvasPins;
+    topLeftY_exists(): boolean;
+
+    pinHeight(): number;
+    pinHeight(_: number): CanvasPins;
+    pinWidth(): number;
+    pinWidth(_: number): CanvasPins;
+    pinFontFamily(): string;
+    pinFontFamily(_: string): CanvasPins;
+    pinFontSize(): number;
+    pinFontSize(_: number): CanvasPins;
+    arrowHeight(): number;
+    arrowHeight(_: number): CanvasPins;
+    arrowWidth(): number;
+    arrowWidth(_: number): CanvasPins;
+}
+
+CanvasPins.prototype.publish("clusterMode", "default", "set", "clusterMode", ["defualt", "grid"], { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("gridCellSize", 80, "number", "gridCellSize", null, { tags: ["Basic"], optional: true });
+
+CanvasPins.prototype.publish("allCircles", false, "boolean", "allCircles", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("showQuadtree", false, "boolean", "showQuadtree", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("useAveragePos", false, "boolean", "useAveragePos", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("shrinkFontToPin", true, "boolean", "shrinkFontToPin", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("enableClustering", true, "boolean", "enableClustering", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("useWeightedRadius", false, "boolean", "useWeightedRadius", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("radiusWeightMult", 0.5, "number", "radiusWeightMult", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("searchRectMult", 3, "number", "searchRectMult", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("bottomRightX", null, "number", "Bottom right x-value", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("bottomRightY", null, "number", "Bottom right y-value", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("topLeftX", null, "number", "Top left x-value", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("topLeftY", null, "number", "Top left y-value", null, { tags: ["Basic"], optional: true });
+
+CanvasPins.prototype.publish("pinHeight", 20, "number", "pinHeight", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("pinWidth", 20, "number", "pinWidth", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("pinFontFamily", "Arial", "string", "pinFontFamily", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("pinFontSize", 14, "number", "pinFontSize", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("arrowHeight", 8, "number", "arrowHeight", null, { tags: ["Basic"], optional: true });
+CanvasPins.prototype.publish("arrowWidth", 8, "number", "arrowWidth", null, { tags: ["Basic"], optional: true });