@hpcc-js/map 3.5.1 → 3.5.4

package/src/leaflet/FeatureLayer.ts

@@ -1,138 +1,138 @@
-import { HTMLWidget, select as d3Select, Utility } from "@hpcc-js/common";
-import { D3SvgOverlay, FeatureGroup, LatLngBounds, LeafletEvent, Map, MarkerClusterGroup } from "./leaflet-shim.ts";
-import { Leaflet } from "./Leaflet.ts";
-import { ILayer } from "./TileLayer.ts";
-
-export class FeatureLayer extends Leaflet implements ILayer {
-    protected _layer: FeatureGroup | MarkerClusterGroup;
-    protected _selection: Utility.SimpleSelection;
-
-    constructor(cluster = false) {
-        super();
-        this._layer = cluster ? new MarkerClusterGroup() : new FeatureGroup();
-        (this._layer as any).__hpcc_layer = this;
-        Utility.SimpleSelectionMixin.call(this);
-        this.layers([this]);
-    }
-
-    //  Enable propertyArray support  ---
-    owner(_: HTMLWidget) {
-        this._owner = _;
-    }
-
-    valid() {
-        return true;
-    }
-
-    clear() {
-        this._layer.clearLayers();
-    }
-
-    add(layer) {
-        this._layer.addLayer(layer);
-    }
-
-    maxZoom() {
-        return (this._owner as any)._leafletMap.getMaxZoom() || 24;
-    }
-
-    zoom() {
-        return (this._owner as any)._leafletMap.getZoom();
-    }
-
-    visibleBounds() {
-        return (this._owner as any)._leafletMap.getBounds();
-    }
-
-    //  ILayer  ---
-    protected _initPromise;
-    init(): Promise<void> {
-        if (!this._initPromise) {
-            this._initPromise = Promise.resolve();
-        }
-        return this._initPromise;
-    }
-
-    hasBounds(): boolean {
-        return false;
-    }
-
-    getBounds(): LatLngBounds {
-        return this._layer.getBounds();
-    }
-
-    style(id: string, _?: number | string | boolean): this | number | string | boolean {
-        if (_ === void 0) return d3Select(this._layer.getPane()).style(id);
-        d3Select(this._layer.getPane()).style(id, _);
-        return this;
-    }
-
-    protected propValue(colIdx, row, defaultValue) {
-        return (colIdx < 0 ? defaultValue : row[colIdx]) || defaultValue;
-    }
-
-    layerEnter(map: Map) {
-        map.addLayer(this._layer);
-        const elem = d3Select(map.getContainer()).select(".leaflet-pane.leaflet-marker-pane");
-        this._selection.widgetElement(elem);
-    }
-
-    layerUpdate(map: Map) {
-    }
-
-    layerExit(map: Map) {
-        this._layer.clearLayers();
-        map.removeLayer(this._layer);
-    }
-
-    //  Events  ---
-    zoomEnd(e: LeafletEvent) {
-    }
-
-    moveEnd(e: LeafletEvent) {
-    }
-
-    viewReset(e: LeafletEvent) {
-    }
-
-}
-FeatureLayer.prototype._class += " map_FeatureLayer";
-FeatureLayer.prototype.mixin(Utility.SimpleSelectionMixin);
-FeatureLayer.prototype.publishReset(["layers"]);
-
-//  ---------------------------------------------------------------------------
-export class ClusterLayer extends FeatureLayer {
-
-    constructor(cluster = true) {
-        super(cluster);
-    }
-}
-ClusterLayer.prototype._class += " map_ClusterLayer";
-
-//  ---------------------------------------------------------------------------
-export class D3SurfaceLayer extends FeatureLayer {
-
-    protected _lfd3 = new D3SvgOverlay()
-        .drawCallback((selection, projection) => this.layerUpdate(undefined, projection));
-
-    hasBounds(): boolean {
-        return true;
-    }
-
-    getBounds() {
-        return this._lfd3.getBounds();
-    }
-
-    layerEnter(map: Map) {
-        super.layerEnter(map);
-        this.add(this._lfd3);
-    }
-
-    layerUpdate(map: Map, projection?) {
-        super.layerUpdate(map);
-    }
-
-    //  Events  ---
-    clickHandler(e, row) {
-    }
-}
+import { HTMLWidget, select as d3Select, Utility } from "@hpcc-js/common";
+import { D3SvgOverlay, FeatureGroup, LatLngBounds, LeafletEvent, Map, MarkerClusterGroup } from "./leaflet-shim.ts";
+import { Leaflet } from "./Leaflet.ts";
+import { ILayer } from "./TileLayer.ts";
+
+export class FeatureLayer extends Leaflet implements ILayer {
+    protected _layer: FeatureGroup | MarkerClusterGroup;
+    protected _selection: Utility.SimpleSelection;
+
+    constructor(cluster = false) {
+        super();
+        this._layer = cluster ? new MarkerClusterGroup() : new FeatureGroup();
+        (this._layer as any).__hpcc_layer = this;
+        Utility.SimpleSelectionMixin.call(this);
+        this.layers([this]);
+    }
+
+    //  Enable propertyArray support  ---
+    owner(_: HTMLWidget) {
+        this._owner = _;
+    }
+
+    valid() {
+        return true;
+    }
+
+    clear() {
+        this._layer.clearLayers();
+    }
+
+    add(layer) {
+        this._layer.addLayer(layer);
+    }
+
+    maxZoom() {
+        return (this._owner as any)._leafletMap.getMaxZoom() || 24;
+    }
+
+    zoom() {
+        return (this._owner as any)._leafletMap.getZoom();
+    }
+
+    visibleBounds() {
+        return (this._owner as any)._leafletMap.getBounds();
+    }
+
+    //  ILayer  ---
+    protected _initPromise;
+    init(): Promise<void> {
+        if (!this._initPromise) {
+            this._initPromise = Promise.resolve();
+        }
+        return this._initPromise;
+    }
+
+    hasBounds(): boolean {
+        return false;
+    }
+
+    getBounds(): LatLngBounds {
+        return this._layer.getBounds();
+    }
+
+    style(id: string, _?: number | string | boolean): this | number | string | boolean {
+        if (_ === void 0) return d3Select(this._layer.getPane()).style(id);
+        d3Select(this._layer.getPane()).style(id, _);
+        return this;
+    }
+
+    protected propValue(colIdx, row, defaultValue) {
+        return (colIdx < 0 ? defaultValue : row[colIdx]) || defaultValue;
+    }
+
+    layerEnter(map: Map) {
+        map.addLayer(this._layer);
+        const elem = d3Select(map.getContainer()).select(".leaflet-pane.leaflet-marker-pane");
+        this._selection.widgetElement(elem);
+    }
+
+    layerUpdate(map: Map) {
+    }
+
+    layerExit(map: Map) {
+        this._layer.clearLayers();
+        map.removeLayer(this._layer);
+    }
+
+    //  Events  ---
+    zoomEnd(e: LeafletEvent) {
+    }
+
+    moveEnd(e: LeafletEvent) {
+    }
+
+    viewReset(e: LeafletEvent) {
+    }
+
+}
+FeatureLayer.prototype._class += " map_FeatureLayer";
+FeatureLayer.prototype.mixin(Utility.SimpleSelectionMixin);
+FeatureLayer.prototype.publishReset(["layers"]);
+
+//  ---------------------------------------------------------------------------
+export class ClusterLayer extends FeatureLayer {
+
+    constructor(cluster = true) {
+        super(cluster);
+    }
+}
+ClusterLayer.prototype._class += " map_ClusterLayer";
+
+//  ---------------------------------------------------------------------------
+export class D3SurfaceLayer extends FeatureLayer {
+
+    protected _lfd3 = new D3SvgOverlay()
+        .drawCallback((selection, projection) => this.layerUpdate(undefined, projection));
+
+    hasBounds(): boolean {
+        return true;
+    }
+
+    getBounds() {
+        return this._lfd3.getBounds();
+    }
+
+    layerEnter(map: Map) {
+        super.layerEnter(map);
+        this.add(this._lfd3);
+    }
+
+    layerUpdate(map: Map, projection?) {
+        super.layerUpdate(map);
+    }
+
+    //  Events  ---
+    clickHandler(e, row) {
+    }
+}

package/src/leaflet/GMap.ts

@@ -1,44 +1,44 @@
-import * as _GoogleMapsLoader from "google-maps";
-
-import { GoogleMutant, Map } from "./leaflet-shim.ts";
-import { requireGoogleMap } from "../GMap.ts";
-import { TileLayer } from "./TileLayer.ts";
-
-declare const window: any;
-
-export class GMapLayer extends TileLayer {
-
-    constructor() {
-        super();
-    }
-
-    init(): Promise<void> {
-        if (!this._initPromise) {
-            this._initPromise = requireGoogleMap();
-        }
-        return this._initPromise;
-    }
-
-    attribution(): string {
-        return !window.__hpcc_gmap_apikey ? "DEVELOPER USE ONLY (@hpcc-js)" : "";
-    }
-
-    getMaxZoom(): number {
-        return 23;
-    }
-
-    layerEnter(map: Map) {
-        super.layerEnter(map);
-        this.add(new GoogleMutant({
-            type: "roadmap",
-            styles: this.googleMapStyles()
-        }));
-    }
-}
-GMapLayer.prototype._class += " map_GMapLayer";
-export interface GMapLayer {
-    googleMapStyles(): object;
-    googleMapStyles(_: object): this;
-}
-
-GMapLayer.prototype.publish("googleMapStyles", {}, "object", "Styling for map colors etc", null, { tags: ["Basic"] });
+import * as _GoogleMapsLoader from "google-maps";
+
+import { GoogleMutant, Map } from "./leaflet-shim.ts";
+import { requireGoogleMap } from "../GMap.ts";
+import { TileLayer } from "./TileLayer.ts";
+
+declare const window: any;
+
+export class GMapLayer extends TileLayer {
+
+    constructor() {
+        super();
+    }
+
+    init(): Promise<void> {
+        if (!this._initPromise) {
+            this._initPromise = requireGoogleMap();
+        }
+        return this._initPromise;
+    }
+
+    attribution(): string {
+        return !window.__hpcc_gmap_apikey ? "DEVELOPER USE ONLY (@hpcc-js)" : "";
+    }
+
+    getMaxZoom(): number {
+        return 23;
+    }
+
+    layerEnter(map: Map) {
+        super.layerEnter(map);
+        this.add(new GoogleMutant({
+            type: "roadmap",
+            styles: this.googleMapStyles()
+        }));
+    }
+}
+GMapLayer.prototype._class += " map_GMapLayer";
+export interface GMapLayer {
+    googleMapStyles(): object;
+    googleMapStyles(_: object): this;
+}
+
+GMapLayer.prototype.publish("googleMapStyles", {}, "object", "Styling for map colors etc", null, { tags: ["Basic"] });

package/src/leaflet/HeatLayer.ts

@@ -1,77 +1,77 @@
-import { LHeatLayer, LatLngBounds, Map } from "./leaflet-shim.ts";
-import { FeatureLayer } from "./FeatureLayer.ts";
-
-export class HeatLayer extends FeatureLayer {
-
-    hasBounds(): boolean {
-        return true;
-    }
-
-    layerUpdate(map: Map) {
-        super.layerUpdate(map);
-        this.style("opacity", this.opacity());
-        const columns = this.columns();
-        const latIdx = this.latitudeColumn_exists() ? columns.indexOf(this.latitudeColumn()) : 0;
-        const longIdx = this.longitudeColumn_exists() ? columns.indexOf(this.longitudeColumn()) : 1;
-        const weightIdx = columns.indexOf(this.weightColumn());
-        this.clear();
-        let bounds: LatLngBounds;
-        const data = this.data().filter(row => !this.omitNullLatLong() || (!!row[latIdx] && !!row[longIdx])).map(row => {
-            if (!bounds) {
-                bounds = new LatLngBounds([row[latIdx], row[longIdx]]);
-            } else {
-                bounds.extend([row[latIdx], row[longIdx]]);
-            }
-            return [row[latIdx], row[longIdx], this.weightColumn_exists() ? row[weightIdx] : 0.5];
-        });
-        const heat = new LHeatLayer(data, {
-            minOpacity: this.minOpacity(),
-            max: this.max(),
-            radius: this.radius(),
-            blur: this.blur(),
-            gradient: this.gradient() as any
-        });
-        (heat as any).getBounds = () => {
-            return bounds;
-        };
-        this.add(heat);
-    }
-}
-HeatLayer.prototype._class += " map_Heat";
-
-export interface HeatLayer {
-    latitudeColumn(): string;
-    latitudeColumn(_: string);
-    latitudeColumn_exists(): boolean;
-    longitudeColumn(): string;
-    longitudeColumn(_: string);
-    longitudeColumn_exists(): boolean;
-    weightColumn(): string;
-    weightColumn(_: string);
-    weightColumn_exists(): boolean;
-    omitNullLatLong(): boolean;
-    omitNullLatLong(_: boolean);
-    opacity(): number;
-    opacity(_: number);
-    minOpacity(): number;
-    minOpacity(_: number);
-    max(): number;
-    max(_: number);
-    radius(): number;
-    radius(_: number);
-    blur(): number;
-    blur(_: number);
-    gradient(): object;
-    gradient(_: object);
-}
-
-HeatLayer.prototype.publish("latitudeColumn", null, "set", "Latitude column", function () { return this.columns(); }, { optional: true });
-HeatLayer.prototype.publish("longitudeColumn", null, "set", "Longitude column", function () { return this.columns(); }, { optional: true });
-HeatLayer.prototype.publish("weightColumn", null, "set", "Optional normalized intensity (0 -> 1) ", function () { return this.columns(); }, { optional: true });
-HeatLayer.prototype.publish("omitNullLatLong", true, "boolean", "Remove lat=0,lng=0 from IconsData", null, { tags: ["Basic"] });
-HeatLayer.prototype.publish("opacity", 0.5, "number", "Layer Opacity");
-HeatLayer.prototype.publish("minOpacity", 0.5, "number", "The minimum opacity the heat will start at", null, { tags: ["Basic"] });
-HeatLayer.prototype.publish("max", 1, "number", "maximum point intensity, 1.0 by default", null, { tags: ["Basic"] });
-HeatLayer.prototype.publish("radius", 25, "number", "radius of each point of the heatmap, 25 by default", null, { tags: ["Basic"] });
-HeatLayer.prototype.publish("blur", 15, "number", "amount of blur, 15 by default", null, { tags: ["Basic"] });
-HeatLayer.prototype.publish("gradient", null, "object", "color gradient config", null, { tags: ["Basic"], optional: true });
+import { LHeatLayer, LatLngBounds, Map } from "./leaflet-shim.ts";
+import { FeatureLayer } from "./FeatureLayer.ts";
+
+export class HeatLayer extends FeatureLayer {
+
+    hasBounds(): boolean {
+        return true;
+    }
+
+    layerUpdate(map: Map) {
+        super.layerUpdate(map);
+        this.style("opacity", this.opacity());
+        const columns = this.columns();
+        const latIdx = this.latitudeColumn_exists() ? columns.indexOf(this.latitudeColumn()) : 0;
+        const longIdx = this.longitudeColumn_exists() ? columns.indexOf(this.longitudeColumn()) : 1;
+        const weightIdx = columns.indexOf(this.weightColumn());
+        this.clear();
+        let bounds: LatLngBounds;
+        const data = this.data().filter(row => !this.omitNullLatLong() || (!!row[latIdx] && !!row[longIdx])).map(row => {
+            if (!bounds) {
+                bounds = new LatLngBounds([row[latIdx], row[longIdx]]);
+            } else {
+                bounds.extend([row[latIdx], row[longIdx]]);
+            }
+            return [row[latIdx], row[longIdx], this.weightColumn_exists() ? row[weightIdx] : 0.5];
+        });
+        const heat = new LHeatLayer(data, {
+            minOpacity: this.minOpacity(),
+            max: this.max(),
+            radius: this.radius(),
+            blur: this.blur(),
+            gradient: this.gradient() as any
+        });
+        (heat as any).getBounds = () => {
+            return bounds;
+        };
+        this.add(heat);
+    }
+}
+HeatLayer.prototype._class += " map_Heat";
+
+export interface HeatLayer {
+    latitudeColumn(): string;
+    latitudeColumn(_: string);
+    latitudeColumn_exists(): boolean;
+    longitudeColumn(): string;
+    longitudeColumn(_: string);
+    longitudeColumn_exists(): boolean;
+    weightColumn(): string;
+    weightColumn(_: string);
+    weightColumn_exists(): boolean;
+    omitNullLatLong(): boolean;
+    omitNullLatLong(_: boolean);
+    opacity(): number;
+    opacity(_: number);
+    minOpacity(): number;
+    minOpacity(_: number);
+    max(): number;
+    max(_: number);
+    radius(): number;
+    radius(_: number);
+    blur(): number;
+    blur(_: number);
+    gradient(): object;
+    gradient(_: object);
+}
+
+HeatLayer.prototype.publish("latitudeColumn", null, "set", "Latitude column", function () { return this.columns(); }, { optional: true });
+HeatLayer.prototype.publish("longitudeColumn", null, "set", "Longitude column", function () { return this.columns(); }, { optional: true });
+HeatLayer.prototype.publish("weightColumn", null, "set", "Optional normalized intensity (0 -> 1) ", function () { return this.columns(); }, { optional: true });
+HeatLayer.prototype.publish("omitNullLatLong", true, "boolean", "Remove lat=0,lng=0 from IconsData", null, { tags: ["Basic"] });
+HeatLayer.prototype.publish("opacity", 0.5, "number", "Layer Opacity");
+HeatLayer.prototype.publish("minOpacity", 0.5, "number", "The minimum opacity the heat will start at", null, { tags: ["Basic"] });
+HeatLayer.prototype.publish("max", 1, "number", "maximum point intensity, 1.0 by default", null, { tags: ["Basic"] });
+HeatLayer.prototype.publish("radius", 25, "number", "radius of each point of the heatmap, 25 by default", null, { tags: ["Basic"] });
+HeatLayer.prototype.publish("blur", 15, "number", "amount of blur, 15 by default", null, { tags: ["Basic"] });
+HeatLayer.prototype.publish("gradient", null, "object", "color gradient config", null, { tags: ["Basic"], optional: true });

package/src/leaflet/Icons.ts

@@ -1,60 +1,60 @@
-import { Icon, Map } from "./leaflet-shim.ts";
-import { Markers } from "./Markers.ts";
-
-export class Icons extends Markers {
-
-    constructor(cluster = false) {
-        super(cluster);
-    }
-
-    layerUpdate(map: Map) {
-        const columns = this.columns();
-        const iconUrlIdx = columns.indexOf(this.iconUrlColumn());
-        super.layerUpdate(map, (row) => {
-            return {
-                icon: new Icon({
-                    iconUrl: this.propValue(iconUrlIdx, row, this.iconUrl()),
-                    iconSize: [this.iconWidth(), this.iconHeight()],
-                    iconAnchor: [this.iconAnchorX(), this.iconAnchorY()],
-                    props: {
-                        owner: this,
-                        row
-                    }
-                }),
-                draggable: false
-            };
-        });
-    }
-}
-Icons.prototype._class += " map_Icons";
-
-export interface Icons {
-    iconUrl(): string;
-    iconUrl(_: string);
-    iconUrl_exists(): boolean;
-    iconUrlColumn(): string;
-    iconUrlColumn(_: string);
-    iconUrlColumn_exists(): boolean;
-    iconWidth(): number;
-    iconWidth(_: number);
-    iconHeight(): number;
-    iconHeight(_: number);
-    iconAnchorX(): number;
-    iconAnchorX(_: number);
-    iconAnchorY(): number;
-    iconAnchorY(_: number);
-}
-
-Icons.prototype.publish("iconUrl", "", "string", "Icon URL", null);
-Icons.prototype.publish("iconUrlColumn", null, "set", "Icon URL column", function () { return this.columns(); }, { optional: true });
-Icons.prototype.publish("iconWidth", 32, "number", "Icon width");
-Icons.prototype.publish("iconHeight", 32, "number", "Icon height");
-Icons.prototype.publish("iconAnchorX", 16, "number", "Icon Anchor X");
-Icons.prototype.publish("iconAnchorY", 32, "number", "Icon Anchor Y");
-
-export class ClusterIcons extends Icons {
-    constructor() {
-        super(true);
-    }
-}
-ClusterIcons.prototype._class += " map_ClusterIcons";
+import { Icon, Map } from "./leaflet-shim.ts";
+import { Markers } from "./Markers.ts";
+
+export class Icons extends Markers {
+
+    constructor(cluster = false) {
+        super(cluster);
+    }
+
+    layerUpdate(map: Map) {
+        const columns = this.columns();
+        const iconUrlIdx = columns.indexOf(this.iconUrlColumn());
+        super.layerUpdate(map, (row) => {
+            return {
+                icon: new Icon({
+                    iconUrl: this.propValue(iconUrlIdx, row, this.iconUrl()),
+                    iconSize: [this.iconWidth(), this.iconHeight()],
+                    iconAnchor: [this.iconAnchorX(), this.iconAnchorY()],
+                    props: {
+                        owner: this,
+                        row
+                    }
+                }),
+                draggable: false
+            };
+        });
+    }
+}
+Icons.prototype._class += " map_Icons";
+
+export interface Icons {
+    iconUrl(): string;
+    iconUrl(_: string);
+    iconUrl_exists(): boolean;
+    iconUrlColumn(): string;
+    iconUrlColumn(_: string);
+    iconUrlColumn_exists(): boolean;
+    iconWidth(): number;
+    iconWidth(_: number);
+    iconHeight(): number;
+    iconHeight(_: number);
+    iconAnchorX(): number;
+    iconAnchorX(_: number);
+    iconAnchorY(): number;
+    iconAnchorY(_: number);
+}
+
+Icons.prototype.publish("iconUrl", "", "string", "Icon URL", null);
+Icons.prototype.publish("iconUrlColumn", null, "set", "Icon URL column", function () { return this.columns(); }, { optional: true });
+Icons.prototype.publish("iconWidth", 32, "number", "Icon width");
+Icons.prototype.publish("iconHeight", 32, "number", "Icon height");
+Icons.prototype.publish("iconAnchorX", 16, "number", "Icon Anchor X");
+Icons.prototype.publish("iconAnchorY", 32, "number", "Icon Anchor Y");
+
+export class ClusterIcons extends Icons {
+    constructor() {
+        super(true);
+    }
+}
+ClusterIcons.prototype._class += " map_ClusterIcons";

package/src/leaflet/Leaflet.css

@@ -1,4 +1,4 @@
-.map_Leaflet .leaflet-container {
-	background-color: rgba(255, 0, 0, 0.0);
-	background: rgba(255, 0, 0, 0.0);
+.map_Leaflet .leaflet-container {
+	background-color: rgba(255, 0, 0, 0.0);
+	background: rgba(255, 0, 0, 0.0);
 }