@hpcc-js/map 3.5.2 → 3.5.4

package/src/leaflet/ClusterCircles.ts

@@ -1,88 +1,88 @@
-import { extent as d3Extent, Palette } from "@hpcc-js/common";
-import { DivIcon, Map, Marker, Point } from "./leaflet-shim.ts";
-import { hsl as d3Hsl } from "d3-color";
-import { format as d3Format } from "d3-format";
-import { FeatureLayer } from "./FeatureLayer.ts";
-
-import "../../src/leaflet/ClusterCircles.css";
-
-export class ClusterCircles extends FeatureLayer {
-
-    _palette;
-
-    protected createIcon(childCount: number, backColor: string, format: (_: any) => any) {
-        const borderColor = d3Hsl(backColor);
-        borderColor.opacity = 0.5;
-        return new DivIcon({
-            className: "cluster-circle",
-            iconSize: new Point(40, 40),
-            html: `<div style='opacity:${this.opacity()};background-color:${borderColor.toString()}'><div style='background-color:${backColor}'><span style='color:${Palette.textColor(backColor)}'>${format(childCount)}</span></div></div>`
-        });
-    }
-
-    layerUpdate(map: Map) {
-        super.layerUpdate(map);
-        this._palette = this._palette.switch(this.paletteID());
-        if (this.useClonedPalette()) {
-            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
-        }
-
-        const latFunc = this.cellFunc(this.latitudeColumn(), 0);
-        const longFunc = this.cellFunc(this.longitudeColumn(), 0);
-        const latLongFunc = (row): [number, number] => [+latFunc(row), +longFunc(row)];
-        const weightFunc = this.cellFunc(this.weightColumn(), 0);
-
-        const data: any[][] = this.data();
-
-        const extent = d3Extent(data, weightFunc);
-
-        const format = this.weightFormat() ? d3Format(this.weightFormat()) : _ => _;
-
-        this.clear();
-        data.forEach(row => {
-            const circle = new Marker(latLongFunc(row), {
-                icon: this.createIcon(weightFunc(row), this._palette(weightFunc(row), extent[0], extent[1]), format),
-                origRow: row
-            } as any).on("click", e => this.clickHandler(e, row));
-            circle.bindTooltip("Weight:  " + weightFunc(row));
-            this.add(circle);
-        });
-    }
-
-    //  Events  ---
-    clickHandler(e, row) {
-    }
-}
-ClusterCircles.prototype._class += " map_ClusterCircles";
-ClusterCircles.prototype._palette = Palette.rainbow("default");
-
-export interface ClusterCircles {
-    paletteID(): string;
-    paletteID(_: string): this;
-    paletteID_exists(): boolean;
-    useClonedPalette(): boolean;
-    useClonedPalette(_: boolean): this;
-    useClonedPalette_exists(): boolean;
-
-    latitudeColumn(): string;
-    latitudeColumn(_: string): this;
-    longitudeColumn(): string;
-    longitudeColumn(_: string): this;
-    weightColumn(): string;
-    weightColumn(_: string): this;
-    weightFormat(): string;
-    weightFormat(_: string): this;
-
-    opacity(): number;
-    opacity(_: number): this;
-    opacity_default(_: number): this;
-    opacity_exists(): boolean;
-}
-
-ClusterCircles.prototype.publish("paletteID", "YlOrRd", "set", "Color palette for this widget", ClusterCircles.prototype._palette.switch());
-ClusterCircles.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette");
-ClusterCircles.prototype.publish("latitudeColumn", null, "set", "Latitude column", function () { return this.columns(); }, { optional: true });
-ClusterCircles.prototype.publish("longitudeColumn", null, "set", "Longitude column", function () { return this.columns(); }, { optional: true });
-ClusterCircles.prototype.publish("weightColumn", null, "set", "Weight column", function () { return this.columns(); }, { optional: true });
-ClusterCircles.prototype.publish("weightFormat", ",", "string", "Number format for weight");
-ClusterCircles.prototype.publish("opacity", 0.66, "number", "Opacity", null, { tags: ["Advanced"] });
+import { extent as d3Extent, Palette } from "@hpcc-js/common";
+import { DivIcon, Map, Marker, Point } from "./leaflet-shim.ts";
+import { hsl as d3Hsl } from "d3-color";
+import { format as d3Format } from "d3-format";
+import { FeatureLayer } from "./FeatureLayer.ts";
+
+import "../../src/leaflet/ClusterCircles.css";
+
+export class ClusterCircles extends FeatureLayer {
+
+    _palette;
+
+    protected createIcon(childCount: number, backColor: string, format: (_: any) => any) {
+        const borderColor = d3Hsl(backColor);
+        borderColor.opacity = 0.5;
+        return new DivIcon({
+            className: "cluster-circle",
+            iconSize: new Point(40, 40),
+            html: `<div style='opacity:${this.opacity()};background-color:${borderColor.toString()}'><div style='background-color:${backColor}'><span style='color:${Palette.textColor(backColor)}'>${format(childCount)}</span></div></div>`
+        });
+    }
+
+    layerUpdate(map: Map) {
+        super.layerUpdate(map);
+        this._palette = this._palette.switch(this.paletteID());
+        if (this.useClonedPalette()) {
+            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
+        }
+
+        const latFunc = this.cellFunc(this.latitudeColumn(), 0);
+        const longFunc = this.cellFunc(this.longitudeColumn(), 0);
+        const latLongFunc = (row): [number, number] => [+latFunc(row), +longFunc(row)];
+        const weightFunc = this.cellFunc(this.weightColumn(), 0);
+
+        const data: any[][] = this.data();
+
+        const extent = d3Extent(data, weightFunc);
+
+        const format = this.weightFormat() ? d3Format(this.weightFormat()) : _ => _;
+
+        this.clear();
+        data.forEach(row => {
+            const circle = new Marker(latLongFunc(row), {
+                icon: this.createIcon(weightFunc(row), this._palette(weightFunc(row), extent[0], extent[1]), format),
+                origRow: row
+            } as any).on("click", e => this.clickHandler(e, row));
+            circle.bindTooltip("Weight:  " + weightFunc(row));
+            this.add(circle);
+        });
+    }
+
+    //  Events  ---
+    clickHandler(e, row) {
+    }
+}
+ClusterCircles.prototype._class += " map_ClusterCircles";
+ClusterCircles.prototype._palette = Palette.rainbow("default");
+
+export interface ClusterCircles {
+    paletteID(): string;
+    paletteID(_: string): this;
+    paletteID_exists(): boolean;
+    useClonedPalette(): boolean;
+    useClonedPalette(_: boolean): this;
+    useClonedPalette_exists(): boolean;
+
+    latitudeColumn(): string;
+    latitudeColumn(_: string): this;
+    longitudeColumn(): string;
+    longitudeColumn(_: string): this;
+    weightColumn(): string;
+    weightColumn(_: string): this;
+    weightFormat(): string;
+    weightFormat(_: string): this;
+
+    opacity(): number;
+    opacity(_: number): this;
+    opacity_default(_: number): this;
+    opacity_exists(): boolean;
+}
+
+ClusterCircles.prototype.publish("paletteID", "YlOrRd", "set", "Color palette for this widget", ClusterCircles.prototype._palette.switch());
+ClusterCircles.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette");
+ClusterCircles.prototype.publish("latitudeColumn", null, "set", "Latitude column", function () { return this.columns(); }, { optional: true });
+ClusterCircles.prototype.publish("longitudeColumn", null, "set", "Longitude column", function () { return this.columns(); }, { optional: true });
+ClusterCircles.prototype.publish("weightColumn", null, "set", "Weight column", function () { return this.columns(); }, { optional: true });
+ClusterCircles.prototype.publish("weightFormat", ",", "string", "Number format for weight");
+ClusterCircles.prototype.publish("opacity", 0.66, "number", "Opacity", null, { tags: ["Advanced"] });

package/src/leaflet/Countries.ts

@@ -1,43 +1,43 @@
-import { json as d3Json } from "d3-request";
-import * as topojson from "topojson-client";
-import { topoJsonFolder } from "../Choropleth.ts";
-import { World } from "./World.ts";
-
-let countries = null;
-
-export class Countries extends World {
-
-    constructor() {
-        super();
-    }
-
-    init(): Promise<void> {
-        if (!this._initPromise) {
-            this._initPromise = new Promise((resolve, reject) => {
-                if (countries) {
-                    resolve(countries);
-                }
-                d3Json(`${topoJsonFolder()}/countries.json`, function (_countries) {
-                    countries = _countries;
-                    resolve(countries);
-                });
-            }).then((countries: any) => {
-                this._features = topojson.feature(countries.topology, countries.topology.objects.countries).features;
-                for (const key in this._features) {
-                    if (this._features[key].id) {
-                        const code = this._features[key].id;
-                        const name = countries.countryNames[code]?.name;
-                        this._features[key].properties.hpccID = name;
-                    }
-                }
-            });
-        }
-        return this._initPromise;
-    }
-
-    tooltipHandler(l, featureID) {
-        const row = this._dataMap[featureID];
-        const value = row && row[1] || "";
-        return this.tooltipText(this.rowToObj(row), `<b>${featureID}</b>:  ${value}`);
-    }
-}
+import { json as d3Json } from "d3-request";
+import * as topojson from "topojson-client";
+import { topoJsonFolder } from "../Choropleth.ts";
+import { World } from "./World.ts";
+
+let countries = null;
+
+export class Countries extends World {
+
+    constructor() {
+        super();
+    }
+
+    init(): Promise<void> {
+        if (!this._initPromise) {
+            this._initPromise = new Promise((resolve, reject) => {
+                if (countries) {
+                    resolve(countries);
+                }
+                d3Json(`${topoJsonFolder()}/countries.json`, function (_countries) {
+                    countries = _countries;
+                    resolve(countries);
+                });
+            }).then((countries: any) => {
+                this._features = topojson.feature(countries.topology, countries.topology.objects.countries).features;
+                for (const key in this._features) {
+                    if (this._features[key].id) {
+                        const code = this._features[key].id;
+                        const name = countries.countryNames[code]?.name;
+                        this._features[key].properties.hpccID = name;
+                    }
+                }
+            });
+        }
+        return this._initPromise;
+    }
+
+    tooltipHandler(l, featureID) {
+        const row = this._dataMap[featureID];
+        const value = row && row[1] || "";
+        return this.tooltipText(this.rowToObj(row), `<b>${featureID}</b>:  ${value}`);
+    }
+}

package/src/leaflet/DrawLayer.ts

@@ -1,167 +1,167 @@
-import { Circle, Control, Draw, LatLng, LatLngBounds, LatLngExpression, Map, Polygon, Polyline, Rectangle } from "./leaflet-shim.ts";
-import { hashSum } from "@hpcc-js/util";
-import { FeatureLayer } from "./FeatureLayer.ts";
-
-function del(arr: any[], item: object) {
-    const idx = arr.indexOf(item);
-    if (idx >= 0) {
-        arr.splice(idx, 1);
-    }
-}
-
-export interface DrawState {
-    polylines: LatLngExpression[][];
-    polygons: Array<LatLng[] | LatLng[][] | LatLng[][][]>;
-    rectangles: LatLngBounds[];
-    circles: Array<{ center: LatLng, radius: number }>;
-}
-
-export class DrawLayer extends FeatureLayer {
-
-    protected _polylines: Polyline[] = [];
-    protected _polygons: Polygon[] = [];
-    protected _rectangles: Rectangle[] = [];
-    protected _circles: Circle[] = [];
-
-    private _drawControl: Control.Draw;
-
-    hasBounds(): boolean {
-        return true;
-    }
-
-    drawOptions(): Control.DrawOptions {
-        const retVal: Control.DrawOptions = {
-            marker: false,
-            circlemarker: false
-        };
-        if (!this.enableCircle()) {
-            retVal.circle = false;
-        }
-        if (!this.enablePolyline()) {
-            retVal.polyline = false;
-        }
-        if (!this.enableRectangle()) {
-            retVal.rectangle = false;
-        }
-        if (!this.enablePolygon()) {
-            retVal.polygon = false;
-        }
-        return retVal;
-    }
-
-    save(): DrawState {
-        return {
-            polylines: this._polylines.map(p => p.getLatLngs() as LatLngExpression[]),
-            polygons: this._polygons.map(p => p.getLatLngs()),
-            rectangles: this._rectangles.map(r => r.getBounds()),
-            circles: this._circles.map(c => ({ center: c.getLatLng(), radius: c.getRadius() }))
-        };
-    }
-
-    restore(_: DrawState) {
-        this.clear();
-        this._polylines = (_.polylines || []).map(p => new Polyline(p));
-        this._polygons = (_.polygons || []).map(p => new Polygon(p));
-        this._rectangles = (_.rectangles || []).map(r => new Rectangle(r));
-        this._circles = (_.circles || []).map(c => new Circle(c.center, { radius: c.radius }));
-        this._polylines.forEach(_ => this.add(_));
-        this._polygons.forEach(_ => this.add(_));
-        this._rectangles.forEach(_ => this.add(_));
-        this._circles.forEach(_ => this.add(_));
-    }
-
-    private _drawOptionsHash;
-    layerEnter(map: Map) {
-        super.layerEnter(map);
-
-        map.on(Draw.Event.CREATED, (e: any) => {
-            const type = e.layerType;
-            const layer = e.layer;
-            switch (type) {
-                case "polyline":
-                    this._polylines.push(layer);
-                    break;
-                case "polygon":
-                    this._polygons.push(layer);
-                    break;
-                case "rectangle":
-                    this._rectangles.push(layer);
-                    break;
-                case "circle":
-                    this._circles.push(layer);
-                    break;
-                default:
-                    alert(type);
-            }
-            this.add(layer);
-            this.changed("ADD", layer);
-        });
-
-        map.on(Draw.Event.EDITED, (e: any) => {
-            const layers = e.layers;
-            layers.eachLayer(layer => {
-                this.changed("UPDATE", layer);
-            });
-        });
-
-        map.on(Draw.Event.DELETED, (e: any) => {
-            const layers = e.layers;
-            layers.eachLayer(layer => {
-                del(this._polylines, layer);
-                del(this._polygons, layer);
-                del(this._rectangles, layer);
-                del(this._circles, layer);
-                this.changed("DELETE", layer);
-            });
-        });
-    }
-
-    layerUpdate(map: Map) {
-        super.layerUpdate(map);
-        this.style("opacity", this.opacity());
-        const drawOptions = this.drawOptions();
-        const drawOptionsHash = hashSum(drawOptions);
-        if (this._drawOptionsHash !== drawOptionsHash) {
-            this._drawOptionsHash = drawOptionsHash;
-            if (this._drawControl) {
-                map.removeControl(this._drawControl);
-            }
-            this._drawControl = new Control.Draw({
-                position: "topleft",
-                draw: drawOptions,
-                edit: {
-                    featureGroup: this._layer
-                }
-            });
-            map.addControl(this._drawControl);
-        }
-    }
-
-    layerExit(map: Map) {
-        super.layerExit(map);
-    }
-
-    //  Events  ---
-    changed(type: "ADD" | "UPDATE" | "DELETE", items) {
-    }
-}
-DrawLayer.prototype._class += " map_DrawLayer";
-
-export interface DrawLayer {
-    opacity(): number;
-    opacity(_: number): this;
-    enablePolyline(): boolean;
-    enablePolyline(_: boolean): this;
-    enablePolygon(): boolean;
-    enablePolygon(_: boolean): this;
-    enableRectangle(): boolean;
-    enableRectangle(_: boolean): this;
-    enableCircle(): boolean;
-    enableCircle(_: boolean): this;
-}
-
-DrawLayer.prototype.publish("opacity", 1, "number", "Layer Opacity");
-DrawLayer.prototype.publish("enablePolyline", true, "boolean", "Enable Polyline Creation");
-DrawLayer.prototype.publish("enablePolygon", true, "boolean", "Enable Polygon Creation");
-DrawLayer.prototype.publish("enableRectangle", true, "boolean", "Enable Rectangle Creation");
-DrawLayer.prototype.publish("enableCircle", true, "boolean", "Enable Circle Creation");
+import { Circle, Control, Draw, LatLng, LatLngBounds, LatLngExpression, Map, Polygon, Polyline, Rectangle } from "./leaflet-shim.ts";
+import { hashSum } from "@hpcc-js/util";
+import { FeatureLayer } from "./FeatureLayer.ts";
+
+function del(arr: any[], item: object) {
+    const idx = arr.indexOf(item);
+    if (idx >= 0) {
+        arr.splice(idx, 1);
+    }
+}
+
+export interface DrawState {
+    polylines: LatLngExpression[][];
+    polygons: Array<LatLng[] | LatLng[][] | LatLng[][][]>;
+    rectangles: LatLngBounds[];
+    circles: Array<{ center: LatLng, radius: number }>;
+}
+
+export class DrawLayer extends FeatureLayer {
+
+    protected _polylines: Polyline[] = [];
+    protected _polygons: Polygon[] = [];
+    protected _rectangles: Rectangle[] = [];
+    protected _circles: Circle[] = [];
+
+    private _drawControl: Control.Draw;
+
+    hasBounds(): boolean {
+        return true;
+    }
+
+    drawOptions(): Control.DrawOptions {
+        const retVal: Control.DrawOptions = {
+            marker: false,
+            circlemarker: false
+        };
+        if (!this.enableCircle()) {
+            retVal.circle = false;
+        }
+        if (!this.enablePolyline()) {
+            retVal.polyline = false;
+        }
+        if (!this.enableRectangle()) {
+            retVal.rectangle = false;
+        }
+        if (!this.enablePolygon()) {
+            retVal.polygon = false;
+        }
+        return retVal;
+    }
+
+    save(): DrawState {
+        return {
+            polylines: this._polylines.map(p => p.getLatLngs() as LatLngExpression[]),
+            polygons: this._polygons.map(p => p.getLatLngs()),
+            rectangles: this._rectangles.map(r => r.getBounds()),
+            circles: this._circles.map(c => ({ center: c.getLatLng(), radius: c.getRadius() }))
+        };
+    }
+
+    restore(_: DrawState) {
+        this.clear();
+        this._polylines = (_.polylines || []).map(p => new Polyline(p));
+        this._polygons = (_.polygons || []).map(p => new Polygon(p));
+        this._rectangles = (_.rectangles || []).map(r => new Rectangle(r));
+        this._circles = (_.circles || []).map(c => new Circle(c.center, { radius: c.radius }));
+        this._polylines.forEach(_ => this.add(_));
+        this._polygons.forEach(_ => this.add(_));
+        this._rectangles.forEach(_ => this.add(_));
+        this._circles.forEach(_ => this.add(_));
+    }
+
+    private _drawOptionsHash;
+    layerEnter(map: Map) {
+        super.layerEnter(map);
+
+        map.on(Draw.Event.CREATED, (e: any) => {
+            const type = e.layerType;
+            const layer = e.layer;
+            switch (type) {
+                case "polyline":
+                    this._polylines.push(layer);
+                    break;
+                case "polygon":
+                    this._polygons.push(layer);
+                    break;
+                case "rectangle":
+                    this._rectangles.push(layer);
+                    break;
+                case "circle":
+                    this._circles.push(layer);
+                    break;
+                default:
+                    alert(type);
+            }
+            this.add(layer);
+            this.changed("ADD", layer);
+        });
+
+        map.on(Draw.Event.EDITED, (e: any) => {
+            const layers = e.layers;
+            layers.eachLayer(layer => {
+                this.changed("UPDATE", layer);
+            });
+        });
+
+        map.on(Draw.Event.DELETED, (e: any) => {
+            const layers = e.layers;
+            layers.eachLayer(layer => {
+                del(this._polylines, layer);
+                del(this._polygons, layer);
+                del(this._rectangles, layer);
+                del(this._circles, layer);
+                this.changed("DELETE", layer);
+            });
+        });
+    }
+
+    layerUpdate(map: Map) {
+        super.layerUpdate(map);
+        this.style("opacity", this.opacity());
+        const drawOptions = this.drawOptions();
+        const drawOptionsHash = hashSum(drawOptions);
+        if (this._drawOptionsHash !== drawOptionsHash) {
+            this._drawOptionsHash = drawOptionsHash;
+            if (this._drawControl) {
+                map.removeControl(this._drawControl);
+            }
+            this._drawControl = new Control.Draw({
+                position: "topleft",
+                draw: drawOptions,
+                edit: {
+                    featureGroup: this._layer
+                }
+            });
+            map.addControl(this._drawControl);
+        }
+    }
+
+    layerExit(map: Map) {
+        super.layerExit(map);
+    }
+
+    //  Events  ---
+    changed(type: "ADD" | "UPDATE" | "DELETE", items) {
+    }
+}
+DrawLayer.prototype._class += " map_DrawLayer";
+
+export interface DrawLayer {
+    opacity(): number;
+    opacity(_: number): this;
+    enablePolyline(): boolean;
+    enablePolyline(_: boolean): this;
+    enablePolygon(): boolean;
+    enablePolygon(_: boolean): this;
+    enableRectangle(): boolean;
+    enableRectangle(_: boolean): this;
+    enableCircle(): boolean;
+    enableCircle(_: boolean): this;
+}
+
+DrawLayer.prototype.publish("opacity", 1, "number", "Layer Opacity");
+DrawLayer.prototype.publish("enablePolyline", true, "boolean", "Enable Polyline Creation");
+DrawLayer.prototype.publish("enablePolygon", true, "boolean", "Enable Polygon Creation");
+DrawLayer.prototype.publish("enableRectangle", true, "boolean", "Enable Rectangle Creation");
+DrawLayer.prototype.publish("enableCircle", true, "boolean", "Enable Circle Creation");