@hpcc-js/map 3.4.10 → 3.4.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +43 -43
- package/README.md +88 -88
- package/TopoJSON/BR.json +122 -122
- package/TopoJSON/GB_idx.json +1 -1
- package/TopoJSON/IE_idx.json +1 -1
- package/TopoJSON/ND_idx.json +1 -1
- package/TopoJSON/countries.json +257 -257
- package/TopoJSON/us-counties.json +16550 -16550
- package/TopoJSON/us-states.json +458 -458
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +1 -1
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +7 -7
- package/src/CanvasPinLayer.ts +99 -99
- package/src/CanvasPins.ts +397 -397
- package/src/Choropleth.css +27 -27
- package/src/Choropleth.ts +203 -203
- package/src/ChoroplethContinents.ts +13 -13
- package/src/ChoroplethCounties.ts +111 -111
- package/src/ChoroplethCountries.ts +100 -100
- package/src/ChoroplethStates.ts +103 -103
- package/src/ChoroplethStatesHeat.ts +8 -8
- package/src/GMap.css +16 -16
- package/src/GMap.ts +880 -880
- package/src/GMapCounties.ts +93 -93
- package/src/GMapGraph.ts +61 -61
- package/src/GMapHeat.ts +27 -27
- package/src/GMapLayered.ts +94 -94
- package/src/GMapPin.ts +115 -115
- package/src/GMapPinLine.ts +138 -138
- package/src/GeoHash.css +15 -15
- package/src/GeoHash.ts +139 -139
- package/src/Graph.css +10 -10
- package/src/Graph.ts +98 -98
- package/src/Graticule.css +13 -13
- package/src/Graticule.ts +97 -97
- package/src/Heat.css +2 -2
- package/src/Heat.ts +87 -87
- package/src/IChoropleth.ts +8 -8
- package/src/Layer.ts +99 -99
- package/src/Layered.css +19 -19
- package/src/Layered.ts +206 -206
- package/src/Lines.css +9 -9
- package/src/Lines.ts +78 -78
- package/src/OpenStreet.css +15 -15
- package/src/OpenStreet.ts +126 -126
- package/src/Pins.css +18 -18
- package/src/Pins.ts +350 -350
- package/src/Projection.ts +42 -42
- package/src/TestHeatMap.ts +8 -8
- package/src/TopoJSONChoropleth.ts +125 -125
- package/src/Utility.ts +484 -484
- package/src/__package__.ts +3 -3
- package/src/index.ts +33 -33
- package/src/leaflet/AlbersPR.ts +48 -48
- package/src/leaflet/Blank.ts +9 -9
- package/src/leaflet/Circles.ts +139 -139
- package/src/leaflet/ClusterCircles.css +26 -26
- package/src/leaflet/ClusterCircles.ts +88 -88
- package/src/leaflet/Countries.ts +43 -43
- package/src/leaflet/DrawLayer.ts +167 -167
- package/src/leaflet/FeatureLayer.ts +138 -138
- package/src/leaflet/GMap.ts +44 -44
- package/src/leaflet/HeatLayer.ts +77 -77
- package/src/leaflet/Icons.ts +60 -60
- package/src/leaflet/Leaflet.css +3 -3
- package/src/leaflet/Leaflet.ts +239 -239
- package/src/leaflet/MapBox.ts +35 -35
- package/src/leaflet/Markers.ts +109 -109
- package/src/leaflet/OpenStreet.ts +27 -27
- package/src/leaflet/Path.ts +138 -138
- package/src/leaflet/Pins.ts +73 -73
- package/src/leaflet/Polygons.ts +113 -113
- package/src/leaflet/Region.ts +138 -138
- package/src/leaflet/Text.ts +99 -99
- package/src/leaflet/TileLayer.ts +81 -81
- package/src/leaflet/TopoJSON.ts +146 -146
- package/src/leaflet/US.ts +15 -15
- package/src/leaflet/USCounties.ts +43 -43
- package/src/leaflet/USStates.ts +41 -41
- package/src/leaflet/World.css +3 -3
- package/src/leaflet/World.ts +172 -172
- package/src/leaflet/index.ts +18 -18
- package/src/leaflet/leaflet-shim.ts +18 -18
- package/src/leaflet/plugins/BeautifyIcon.css +44 -44
- package/src/leaflet/plugins/BeautifyIcon.ts +190 -190
- package/src/leaflet/plugins/BeutifyIcon.licence +20 -20
- package/src/leaflet/plugins/D3SvgOverlay.css +3 -3
- package/src/leaflet/plugins/D3SvgOverlay.licence +20 -20
- package/src/leaflet/plugins/D3SvgOverlay.ts +175 -175
- package/src/leaflet/plugins/HeatLayer.license +21 -21
- package/src/leaflet/plugins/HeatLayer.ts +224 -224
- package/src/leaflet/plugins/Leaflet.GoogleMutant.ts +424 -424
- package/src/leaflet/plugins/lru_map.ts +352 -352
- package/src/test.ts +114 -114
package/src/leaflet/Markers.ts
CHANGED
|
@@ -1,109 +1,109 @@
|
|
|
1
|
-
import { Map, Marker, point, Direction } from "./leaflet-shim.ts";
|
|
2
|
-
import { ClusterLayer } from "./FeatureLayer.ts";
|
|
3
|
-
|
|
4
|
-
export class Markers extends ClusterLayer {
|
|
5
|
-
|
|
6
|
-
constructor(cluster = false) {
|
|
7
|
-
super(cluster);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
hasBounds(): boolean {
|
|
11
|
-
return true;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
tooltipText(row: object, tooltip: string): string {
|
|
15
|
-
return "" + tooltip;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
popupText(row: object, popup: string): string {
|
|
19
|
-
return "" + popup;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
private _hashSum;
|
|
23
|
-
layerUpdate(map: Map, markerOptions?: (row) => object) {
|
|
24
|
-
super.layerUpdate(map);
|
|
25
|
-
if (!markerOptions) return;
|
|
26
|
-
|
|
27
|
-
const columns = this.columns();
|
|
28
|
-
const latIdx = columns.indexOf(this.latitudeColumn());
|
|
29
|
-
const longIdx = columns.indexOf(this.longitudeColumn());
|
|
30
|
-
const tooltipIdx = columns.indexOf(this.tooltipColumn());
|
|
31
|
-
const popupIdx = columns.indexOf(this.popupColumn());
|
|
32
|
-
const dbChecksum = this._db.checksum();
|
|
33
|
-
const hashSum = this.hashSum([], {
|
|
34
|
-
dbChecksum
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
if (this._hashSum !== hashSum) {
|
|
38
|
-
this._hashSum = hashSum;
|
|
39
|
-
this.clear();
|
|
40
|
-
this.data().filter(row => !this.omitNullLatLong() || (!!row[latIdx] && !!row[longIdx])).forEach(row => {
|
|
41
|
-
const marker = new Marker([row[latIdx], row[longIdx]], markerOptions(row))
|
|
42
|
-
.on("click", e => this.clickHandler(e, marker, row))
|
|
43
|
-
;
|
|
44
|
-
const tooltipText = this.tooltipText(this.rowToObj(row), this.propValue(tooltipIdx, row, ""));
|
|
45
|
-
if (tooltipText) {
|
|
46
|
-
marker.bindTooltip(tooltipText, {
|
|
47
|
-
direction: this.tooltipDirection(),
|
|
48
|
-
offset: point(this.tooltipOffsetX(), this.tooltipOffsetY())
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
const popupText = this.popupText(this.rowToObj(row), this.propValue(popupIdx, row, ""));
|
|
52
|
-
if (popupText) {
|
|
53
|
-
marker.bindPopup(popupText, {
|
|
54
|
-
offset: point(this.popupOffsetX(), this.popupOffsetY())
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
this.add(marker);
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
_currSelRow;
|
|
63
|
-
clickHandler(e, marker, row) {
|
|
64
|
-
const sel = this._selection.click(marker._icon);
|
|
65
|
-
this._currSelRow = sel ? row : undefined;
|
|
66
|
-
this.click(this.rowToObj(row), "", sel);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
// Events ---
|
|
70
|
-
click(row, col, sel) {
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
Markers.prototype._class += " map_Markers";
|
|
74
|
-
|
|
75
|
-
export interface Markers {
|
|
76
|
-
latitudeColumn(): string;
|
|
77
|
-
latitudeColumn(_: string);
|
|
78
|
-
longitudeColumn(): string;
|
|
79
|
-
longitudeColumn(_: string);
|
|
80
|
-
omitNullLatLong(): boolean;
|
|
81
|
-
omitNullLatLong(_: boolean);
|
|
82
|
-
tooltipColumn(): string;
|
|
83
|
-
tooltipColumn(_: string);
|
|
84
|
-
tooltipColumn_exists(): boolean;
|
|
85
|
-
tooltipDirection(): Direction;
|
|
86
|
-
tooltipDirection(_: Direction);
|
|
87
|
-
tooltipOffsetX(): number;
|
|
88
|
-
tooltipOffsetX(_: number);
|
|
89
|
-
tooltipOffsetY(): number;
|
|
90
|
-
tooltipOffsetY(_: number);
|
|
91
|
-
popupColumn(): string;
|
|
92
|
-
popupColumn(_: string);
|
|
93
|
-
popupColumn_exists(): boolean;
|
|
94
|
-
popupOffsetX(): number;
|
|
95
|
-
popupOffsetX(_: number);
|
|
96
|
-
popupOffsetY(): number;
|
|
97
|
-
popupOffsetY(_: number);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
Markers.prototype.publish("latitudeColumn", null, "set", "Latitude column", function () { return this.columns(); }, { optional: true });
|
|
101
|
-
Markers.prototype.publish("longitudeColumn", null, "set", "Longitude column", function () { return this.columns(); }, { optional: true });
|
|
102
|
-
Markers.prototype.publish("omitNullLatLong", true, "boolean", "Remove lat=0,lng=0 from IconsData", null, { tags: ["Basic"] });
|
|
103
|
-
Markers.prototype.publish("tooltipColumn", null, "set", "Tooltip column", function () { return this.columns(); }, { optional: true });
|
|
104
|
-
Markers.prototype.publish("tooltipDirection", "auto", "set", "Tooltip direction", ["auto", "left", "top", "right", "bottom", "center"]);
|
|
105
|
-
Markers.prototype.publish("tooltipOffsetX", 0, "number", "Tooltip offset X");
|
|
106
|
-
Markers.prototype.publish("tooltipOffsetY", 0, "number", "Tooltip offset Y");
|
|
107
|
-
Markers.prototype.publish("popupColumn", null, "set", "Popup column", function () { return this.columns(); }, { optional: true });
|
|
108
|
-
Markers.prototype.publish("popupOffsetX", 0, "number", "Tooltip offset X");
|
|
109
|
-
Markers.prototype.publish("popupOffsetY", 0, "number", "Tooltip offset Y");
|
|
1
|
+
import { Map, Marker, point, Direction } from "./leaflet-shim.ts";
|
|
2
|
+
import { ClusterLayer } from "./FeatureLayer.ts";
|
|
3
|
+
|
|
4
|
+
export class Markers extends ClusterLayer {
|
|
5
|
+
|
|
6
|
+
constructor(cluster = false) {
|
|
7
|
+
super(cluster);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
hasBounds(): boolean {
|
|
11
|
+
return true;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
tooltipText(row: object, tooltip: string): string {
|
|
15
|
+
return "" + tooltip;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
popupText(row: object, popup: string): string {
|
|
19
|
+
return "" + popup;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
private _hashSum;
|
|
23
|
+
layerUpdate(map: Map, markerOptions?: (row) => object) {
|
|
24
|
+
super.layerUpdate(map);
|
|
25
|
+
if (!markerOptions) return;
|
|
26
|
+
|
|
27
|
+
const columns = this.columns();
|
|
28
|
+
const latIdx = columns.indexOf(this.latitudeColumn());
|
|
29
|
+
const longIdx = columns.indexOf(this.longitudeColumn());
|
|
30
|
+
const tooltipIdx = columns.indexOf(this.tooltipColumn());
|
|
31
|
+
const popupIdx = columns.indexOf(this.popupColumn());
|
|
32
|
+
const dbChecksum = this._db.checksum();
|
|
33
|
+
const hashSum = this.hashSum([], {
|
|
34
|
+
dbChecksum
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
if (this._hashSum !== hashSum) {
|
|
38
|
+
this._hashSum = hashSum;
|
|
39
|
+
this.clear();
|
|
40
|
+
this.data().filter(row => !this.omitNullLatLong() || (!!row[latIdx] && !!row[longIdx])).forEach(row => {
|
|
41
|
+
const marker = new Marker([row[latIdx], row[longIdx]], markerOptions(row))
|
|
42
|
+
.on("click", e => this.clickHandler(e, marker, row))
|
|
43
|
+
;
|
|
44
|
+
const tooltipText = this.tooltipText(this.rowToObj(row), this.propValue(tooltipIdx, row, ""));
|
|
45
|
+
if (tooltipText) {
|
|
46
|
+
marker.bindTooltip(tooltipText, {
|
|
47
|
+
direction: this.tooltipDirection(),
|
|
48
|
+
offset: point(this.tooltipOffsetX(), this.tooltipOffsetY())
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
const popupText = this.popupText(this.rowToObj(row), this.propValue(popupIdx, row, ""));
|
|
52
|
+
if (popupText) {
|
|
53
|
+
marker.bindPopup(popupText, {
|
|
54
|
+
offset: point(this.popupOffsetX(), this.popupOffsetY())
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
this.add(marker);
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
_currSelRow;
|
|
63
|
+
clickHandler(e, marker, row) {
|
|
64
|
+
const sel = this._selection.click(marker._icon);
|
|
65
|
+
this._currSelRow = sel ? row : undefined;
|
|
66
|
+
this.click(this.rowToObj(row), "", sel);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// Events ---
|
|
70
|
+
click(row, col, sel) {
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
Markers.prototype._class += " map_Markers";
|
|
74
|
+
|
|
75
|
+
export interface Markers {
|
|
76
|
+
latitudeColumn(): string;
|
|
77
|
+
latitudeColumn(_: string);
|
|
78
|
+
longitudeColumn(): string;
|
|
79
|
+
longitudeColumn(_: string);
|
|
80
|
+
omitNullLatLong(): boolean;
|
|
81
|
+
omitNullLatLong(_: boolean);
|
|
82
|
+
tooltipColumn(): string;
|
|
83
|
+
tooltipColumn(_: string);
|
|
84
|
+
tooltipColumn_exists(): boolean;
|
|
85
|
+
tooltipDirection(): Direction;
|
|
86
|
+
tooltipDirection(_: Direction);
|
|
87
|
+
tooltipOffsetX(): number;
|
|
88
|
+
tooltipOffsetX(_: number);
|
|
89
|
+
tooltipOffsetY(): number;
|
|
90
|
+
tooltipOffsetY(_: number);
|
|
91
|
+
popupColumn(): string;
|
|
92
|
+
popupColumn(_: string);
|
|
93
|
+
popupColumn_exists(): boolean;
|
|
94
|
+
popupOffsetX(): number;
|
|
95
|
+
popupOffsetX(_: number);
|
|
96
|
+
popupOffsetY(): number;
|
|
97
|
+
popupOffsetY(_: number);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
Markers.prototype.publish("latitudeColumn", null, "set", "Latitude column", function () { return this.columns(); }, { optional: true });
|
|
101
|
+
Markers.prototype.publish("longitudeColumn", null, "set", "Longitude column", function () { return this.columns(); }, { optional: true });
|
|
102
|
+
Markers.prototype.publish("omitNullLatLong", true, "boolean", "Remove lat=0,lng=0 from IconsData", null, { tags: ["Basic"] });
|
|
103
|
+
Markers.prototype.publish("tooltipColumn", null, "set", "Tooltip column", function () { return this.columns(); }, { optional: true });
|
|
104
|
+
Markers.prototype.publish("tooltipDirection", "auto", "set", "Tooltip direction", ["auto", "left", "top", "right", "bottom", "center"]);
|
|
105
|
+
Markers.prototype.publish("tooltipOffsetX", 0, "number", "Tooltip offset X");
|
|
106
|
+
Markers.prototype.publish("tooltipOffsetY", 0, "number", "Tooltip offset Y");
|
|
107
|
+
Markers.prototype.publish("popupColumn", null, "set", "Popup column", function () { return this.columns(); }, { optional: true });
|
|
108
|
+
Markers.prototype.publish("popupOffsetX", 0, "number", "Tooltip offset X");
|
|
109
|
+
Markers.prototype.publish("popupOffsetY", 0, "number", "Tooltip offset Y");
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import { Map, TileLayer as LeafletTileLayer } from "./leaflet-shim.ts";
|
|
2
|
-
import { TileLayer } from "./TileLayer.ts";
|
|
3
|
-
|
|
4
|
-
export class OpenStreetLayer extends TileLayer {
|
|
5
|
-
|
|
6
|
-
constructor() {
|
|
7
|
-
super();
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
attribution(): string {
|
|
11
|
-
return "";
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
getMaxZoom(): number {
|
|
15
|
-
return 18;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
layerEnter(map: Map) {
|
|
19
|
-
super.layerEnter(map);
|
|
20
|
-
this.add(new LeafletTileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
21
|
-
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
|
|
22
|
-
maxZoom: 18,
|
|
23
|
-
id: "open.streets"
|
|
24
|
-
} as any));
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
OpenStreetLayer.prototype._class += " map_MapBoxLayer";
|
|
1
|
+
import { Map, TileLayer as LeafletTileLayer } from "./leaflet-shim.ts";
|
|
2
|
+
import { TileLayer } from "./TileLayer.ts";
|
|
3
|
+
|
|
4
|
+
export class OpenStreetLayer extends TileLayer {
|
|
5
|
+
|
|
6
|
+
constructor() {
|
|
7
|
+
super();
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
attribution(): string {
|
|
11
|
+
return "";
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
getMaxZoom(): number {
|
|
15
|
+
return 18;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
layerEnter(map: Map) {
|
|
19
|
+
super.layerEnter(map);
|
|
20
|
+
this.add(new LeafletTileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
21
|
+
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
|
|
22
|
+
maxZoom: 18,
|
|
23
|
+
id: "open.streets"
|
|
24
|
+
} as any));
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
OpenStreetLayer.prototype._class += " map_MapBoxLayer";
|
package/src/leaflet/Path.ts
CHANGED
|
@@ -1,138 +1,138 @@
|
|
|
1
|
-
import { Map } from "./leaflet-shim.ts";
|
|
2
|
-
import { geoPath as d3GeoPath } from "d3-geo";
|
|
3
|
-
import { resolve } from "../Projection.ts";
|
|
4
|
-
import { D3SurfaceLayer } from "./FeatureLayer.ts";
|
|
5
|
-
|
|
6
|
-
const projectionFactor = (1 << 12) / 2 / Math.PI;
|
|
7
|
-
|
|
8
|
-
export type Coordinate = [number, number];
|
|
9
|
-
export type Coordinates = [Coordinate, Coordinate];
|
|
10
|
-
|
|
11
|
-
export class Path extends D3SurfaceLayer {
|
|
12
|
-
|
|
13
|
-
lineData(): Array<{ type: string, coordinates: Coordinates }> {
|
|
14
|
-
const columns = this.columns();
|
|
15
|
-
const latIdx = columns.indexOf(this.latitudeColumn());
|
|
16
|
-
const longIdx = columns.indexOf(this.longitudeColumn());
|
|
17
|
-
const retVal = [];
|
|
18
|
-
let prevLatLng;
|
|
19
|
-
this.data().forEach(row => {
|
|
20
|
-
const currLatLng: Coordinate = [row[longIdx], row[latIdx]];
|
|
21
|
-
if (prevLatLng) {
|
|
22
|
-
retVal.push({
|
|
23
|
-
type: "LineString",
|
|
24
|
-
coordinates: [currLatLng, prevLatLng]
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
prevLatLng = currLatLng;
|
|
28
|
-
});
|
|
29
|
-
return retVal;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
isNull(coord: Coordinate) {
|
|
33
|
-
return !coord[0] && !coord[1];
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
isNull2(coords: Coordinates) {
|
|
37
|
-
if (!this.omitNullLatLong()) return false;
|
|
38
|
-
return this.isNull(coords[0]) || this.isNull(coords[1]);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
layerUpdate(map: Map, projection?) {
|
|
42
|
-
super.layerUpdate(map, projection);
|
|
43
|
-
const element = this._lfd3._rootGroup;
|
|
44
|
-
projection = projection || this._lfd3.projection;
|
|
45
|
-
|
|
46
|
-
const updateDefs = this._lfd3.svg().selectAll("defs").data([undefined]);
|
|
47
|
-
updateDefs.enter().append("defs").append("marker")
|
|
48
|
-
.attr("class", "marker")
|
|
49
|
-
.attr("id", this._id + "_arrowHead")
|
|
50
|
-
.attr("viewBox", "0 0 10 10")
|
|
51
|
-
.attr("refX", 10)
|
|
52
|
-
.attr("refY", 5)
|
|
53
|
-
.attr("markerWidth", 12)
|
|
54
|
-
.attr("markerHeight", 12)
|
|
55
|
-
.attr("markerUnits", "strokeWidth")
|
|
56
|
-
.attr("orient", "auto")
|
|
57
|
-
.append("polyline")
|
|
58
|
-
.attr("points", "0,0 10,5 0,10 1,5")
|
|
59
|
-
;
|
|
60
|
-
this._lfd3.svg().select("defs > marker")
|
|
61
|
-
.style("fill", this.strokeColor())
|
|
62
|
-
.style("stroke", null)
|
|
63
|
-
;
|
|
64
|
-
|
|
65
|
-
const center = projection.latLngToLayerPoint({ lat: 0, lng: 0 });
|
|
66
|
-
const geoTransform = resolve("Mercator")
|
|
67
|
-
.scale(projectionFactor)
|
|
68
|
-
.translate([center.x, center.y])
|
|
69
|
-
;
|
|
70
|
-
const geoPath = d3GeoPath().projection(geoTransform);
|
|
71
|
-
|
|
72
|
-
const updateSelection = element.selectAll(".dataEdge").data(this.lineData().filter(row => !this.isNull2(row.coordinates)));
|
|
73
|
-
updateSelection.enter().append("path")
|
|
74
|
-
.attr("class", "dataEdge")
|
|
75
|
-
.attr("marker-end", "url(#" + this._id + "_arrowHead)")
|
|
76
|
-
.merge(updateSelection)
|
|
77
|
-
.attr("d", geoPath)
|
|
78
|
-
.style("stroke", this.strokeColor())
|
|
79
|
-
.style("fill", "none")
|
|
80
|
-
.attr("stroke-width", 1 / projection.scale)
|
|
81
|
-
;
|
|
82
|
-
updateSelection.exit().remove();
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
// Events ---
|
|
86
|
-
clickHandler(e, row) {
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
Path.prototype._class += " map_Path";
|
|
91
|
-
|
|
92
|
-
export interface Path {
|
|
93
|
-
latitudeColumn(): string;
|
|
94
|
-
latitudeColumn(_: string): this;
|
|
95
|
-
longitudeColumn(): string;
|
|
96
|
-
longitudeColumn(_: string): this;
|
|
97
|
-
strokeColor(): string;
|
|
98
|
-
strokeColor(_: string): this;
|
|
99
|
-
omitNullLatLong(): boolean;
|
|
100
|
-
omitNullLatLong(_: boolean): this;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
Path.prototype.publish("latitudeColumn", null, "set", "Latitude column", function () { return this.columns(); }, { optional: true });
|
|
104
|
-
Path.prototype.publish("longitudeColumn", null, "set", "Longitude column", function () { return this.columns(); }, { optional: true });
|
|
105
|
-
Path.prototype.publish("strokeColor", " #666666", "html-color", "Stroke Color", null, { optional: true });
|
|
106
|
-
Path.prototype.publish("omitNullLatLong", true, "boolean", "Remove lat=0,lng=0 from pinsData", null, { tags: ["Basic"] });
|
|
107
|
-
|
|
108
|
-
// ---------------------------------------------------------------------------
|
|
109
|
-
export class Lines extends Path {
|
|
110
|
-
|
|
111
|
-
lineData(): Array<{ type: string, coordinates: Coordinates }> {
|
|
112
|
-
const columns = this.columns();
|
|
113
|
-
const latIdx = columns.indexOf(this.latitudeColumn());
|
|
114
|
-
const longIdx = columns.indexOf(this.longitudeColumn());
|
|
115
|
-
const lat2Idx = columns.indexOf(this.latitude2Column());
|
|
116
|
-
const long2Idx = columns.indexOf(this.longitude2Column());
|
|
117
|
-
const retVal = [];
|
|
118
|
-
this.data().forEach(row => {
|
|
119
|
-
const currLatLng: Coordinate = [row[longIdx], row[latIdx]];
|
|
120
|
-
const currLatLng2: Coordinate = [row[long2Idx], row[lat2Idx]];
|
|
121
|
-
retVal.push({
|
|
122
|
-
type: "LineString",
|
|
123
|
-
coordinates: [currLatLng, currLatLng2]
|
|
124
|
-
});
|
|
125
|
-
});
|
|
126
|
-
return retVal;
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
Lines.prototype._class += " map_Lines";
|
|
130
|
-
|
|
131
|
-
export interface Lines {
|
|
132
|
-
latitude2Column(): string;
|
|
133
|
-
latitude2Column(_: string): this;
|
|
134
|
-
longitude2Column(): string;
|
|
135
|
-
longitude2Column(_: string): this;
|
|
136
|
-
}
|
|
137
|
-
Lines.prototype.publish("latitude2Column", null, "set", "Latitude column", function () { return this.columns(); }, { optional: true });
|
|
138
|
-
Lines.prototype.publish("longitude2Column", null, "set", "Longitude column", function () { return this.columns(); }, { optional: true });
|
|
1
|
+
import { Map } from "./leaflet-shim.ts";
|
|
2
|
+
import { geoPath as d3GeoPath } from "d3-geo";
|
|
3
|
+
import { resolve } from "../Projection.ts";
|
|
4
|
+
import { D3SurfaceLayer } from "./FeatureLayer.ts";
|
|
5
|
+
|
|
6
|
+
const projectionFactor = (1 << 12) / 2 / Math.PI;
|
|
7
|
+
|
|
8
|
+
export type Coordinate = [number, number];
|
|
9
|
+
export type Coordinates = [Coordinate, Coordinate];
|
|
10
|
+
|
|
11
|
+
export class Path extends D3SurfaceLayer {
|
|
12
|
+
|
|
13
|
+
lineData(): Array<{ type: string, coordinates: Coordinates }> {
|
|
14
|
+
const columns = this.columns();
|
|
15
|
+
const latIdx = columns.indexOf(this.latitudeColumn());
|
|
16
|
+
const longIdx = columns.indexOf(this.longitudeColumn());
|
|
17
|
+
const retVal = [];
|
|
18
|
+
let prevLatLng;
|
|
19
|
+
this.data().forEach(row => {
|
|
20
|
+
const currLatLng: Coordinate = [row[longIdx], row[latIdx]];
|
|
21
|
+
if (prevLatLng) {
|
|
22
|
+
retVal.push({
|
|
23
|
+
type: "LineString",
|
|
24
|
+
coordinates: [currLatLng, prevLatLng]
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
prevLatLng = currLatLng;
|
|
28
|
+
});
|
|
29
|
+
return retVal;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
isNull(coord: Coordinate) {
|
|
33
|
+
return !coord[0] && !coord[1];
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
isNull2(coords: Coordinates) {
|
|
37
|
+
if (!this.omitNullLatLong()) return false;
|
|
38
|
+
return this.isNull(coords[0]) || this.isNull(coords[1]);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
layerUpdate(map: Map, projection?) {
|
|
42
|
+
super.layerUpdate(map, projection);
|
|
43
|
+
const element = this._lfd3._rootGroup;
|
|
44
|
+
projection = projection || this._lfd3.projection;
|
|
45
|
+
|
|
46
|
+
const updateDefs = this._lfd3.svg().selectAll("defs").data([undefined]);
|
|
47
|
+
updateDefs.enter().append("defs").append("marker")
|
|
48
|
+
.attr("class", "marker")
|
|
49
|
+
.attr("id", this._id + "_arrowHead")
|
|
50
|
+
.attr("viewBox", "0 0 10 10")
|
|
51
|
+
.attr("refX", 10)
|
|
52
|
+
.attr("refY", 5)
|
|
53
|
+
.attr("markerWidth", 12)
|
|
54
|
+
.attr("markerHeight", 12)
|
|
55
|
+
.attr("markerUnits", "strokeWidth")
|
|
56
|
+
.attr("orient", "auto")
|
|
57
|
+
.append("polyline")
|
|
58
|
+
.attr("points", "0,0 10,5 0,10 1,5")
|
|
59
|
+
;
|
|
60
|
+
this._lfd3.svg().select("defs > marker")
|
|
61
|
+
.style("fill", this.strokeColor())
|
|
62
|
+
.style("stroke", null)
|
|
63
|
+
;
|
|
64
|
+
|
|
65
|
+
const center = projection.latLngToLayerPoint({ lat: 0, lng: 0 });
|
|
66
|
+
const geoTransform = resolve("Mercator")
|
|
67
|
+
.scale(projectionFactor)
|
|
68
|
+
.translate([center.x, center.y])
|
|
69
|
+
;
|
|
70
|
+
const geoPath = d3GeoPath().projection(geoTransform);
|
|
71
|
+
|
|
72
|
+
const updateSelection = element.selectAll(".dataEdge").data(this.lineData().filter(row => !this.isNull2(row.coordinates)));
|
|
73
|
+
updateSelection.enter().append("path")
|
|
74
|
+
.attr("class", "dataEdge")
|
|
75
|
+
.attr("marker-end", "url(#" + this._id + "_arrowHead)")
|
|
76
|
+
.merge(updateSelection)
|
|
77
|
+
.attr("d", geoPath)
|
|
78
|
+
.style("stroke", this.strokeColor())
|
|
79
|
+
.style("fill", "none")
|
|
80
|
+
.attr("stroke-width", 1 / projection.scale)
|
|
81
|
+
;
|
|
82
|
+
updateSelection.exit().remove();
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// Events ---
|
|
86
|
+
clickHandler(e, row) {
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
}
|
|
90
|
+
Path.prototype._class += " map_Path";
|
|
91
|
+
|
|
92
|
+
export interface Path {
|
|
93
|
+
latitudeColumn(): string;
|
|
94
|
+
latitudeColumn(_: string): this;
|
|
95
|
+
longitudeColumn(): string;
|
|
96
|
+
longitudeColumn(_: string): this;
|
|
97
|
+
strokeColor(): string;
|
|
98
|
+
strokeColor(_: string): this;
|
|
99
|
+
omitNullLatLong(): boolean;
|
|
100
|
+
omitNullLatLong(_: boolean): this;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
Path.prototype.publish("latitudeColumn", null, "set", "Latitude column", function () { return this.columns(); }, { optional: true });
|
|
104
|
+
Path.prototype.publish("longitudeColumn", null, "set", "Longitude column", function () { return this.columns(); }, { optional: true });
|
|
105
|
+
Path.prototype.publish("strokeColor", " #666666", "html-color", "Stroke Color", null, { optional: true });
|
|
106
|
+
Path.prototype.publish("omitNullLatLong", true, "boolean", "Remove lat=0,lng=0 from pinsData", null, { tags: ["Basic"] });
|
|
107
|
+
|
|
108
|
+
// ---------------------------------------------------------------------------
|
|
109
|
+
export class Lines extends Path {
|
|
110
|
+
|
|
111
|
+
lineData(): Array<{ type: string, coordinates: Coordinates }> {
|
|
112
|
+
const columns = this.columns();
|
|
113
|
+
const latIdx = columns.indexOf(this.latitudeColumn());
|
|
114
|
+
const longIdx = columns.indexOf(this.longitudeColumn());
|
|
115
|
+
const lat2Idx = columns.indexOf(this.latitude2Column());
|
|
116
|
+
const long2Idx = columns.indexOf(this.longitude2Column());
|
|
117
|
+
const retVal = [];
|
|
118
|
+
this.data().forEach(row => {
|
|
119
|
+
const currLatLng: Coordinate = [row[longIdx], row[latIdx]];
|
|
120
|
+
const currLatLng2: Coordinate = [row[long2Idx], row[lat2Idx]];
|
|
121
|
+
retVal.push({
|
|
122
|
+
type: "LineString",
|
|
123
|
+
coordinates: [currLatLng, currLatLng2]
|
|
124
|
+
});
|
|
125
|
+
});
|
|
126
|
+
return retVal;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
Lines.prototype._class += " map_Lines";
|
|
130
|
+
|
|
131
|
+
export interface Lines {
|
|
132
|
+
latitude2Column(): string;
|
|
133
|
+
latitude2Column(_: string): this;
|
|
134
|
+
longitude2Column(): string;
|
|
135
|
+
longitude2Column(_: string): this;
|
|
136
|
+
}
|
|
137
|
+
Lines.prototype.publish("latitude2Column", null, "set", "Latitude column", function () { return this.columns(); }, { optional: true });
|
|
138
|
+
Lines.prototype.publish("longitude2Column", null, "set", "Longitude column", function () { return this.columns(); }, { optional: true });
|