@hpcc-js/map 3.5.1 → 3.5.4
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 +9 -9
- package/src/CanvasPinLayer.ts +99 -99
- package/src/CanvasPins.ts +397 -397
- package/src/Choropleth.css +26 -26
- 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 +20 -20
- 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 +14 -14
- package/src/GeoHash.ts +139 -139
- package/src/Graph.css +9 -9
- package/src/Graph.ts +98 -98
- package/src/Graticule.css +12 -12
- package/src/Graticule.ts +97 -97
- package/src/Heat.ts +87 -87
- package/src/IChoropleth.ts +8 -8
- package/src/Layer.ts +99 -99
- package/src/Layered.css +18 -18
- package/src/Layered.ts +206 -206
- package/src/Lines.css +8 -8
- package/src/Lines.ts +78 -78
- package/src/OpenStreet.css +15 -15
- package/src/OpenStreet.ts +126 -126
- package/src/Pins.css +17 -17
- 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 +2 -2
- 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/types/Layered.d.ts +1 -1
package/src/GMapCounties.ts
CHANGED
|
@@ -1,93 +1,93 @@
|
|
|
1
|
-
import { Widget } from "@hpcc-js/common";
|
|
2
|
-
import { ChoroplethCounties } from "./ChoroplethCounties.ts";
|
|
3
|
-
import { GMapLayered } from "./GMapLayered.ts";
|
|
4
|
-
|
|
5
|
-
export class GMapCounties extends GMapLayered {
|
|
6
|
-
_counties: ChoroplethCounties;
|
|
7
|
-
_view;
|
|
8
|
-
_palette;
|
|
9
|
-
_dataMinWeight;
|
|
10
|
-
_dataMaxWeight;
|
|
11
|
-
|
|
12
|
-
constructor() {
|
|
13
|
-
super();
|
|
14
|
-
|
|
15
|
-
const context = this;
|
|
16
|
-
this._counties = new ChoroplethCounties()
|
|
17
|
-
.paletteID("Blues")
|
|
18
|
-
.meshVisible(false)
|
|
19
|
-
.opacity(0.80)
|
|
20
|
-
.columns(["fips", "weight"])
|
|
21
|
-
.on("click", function (row, col, sel) {
|
|
22
|
-
context.click(row, col, sel);
|
|
23
|
-
})
|
|
24
|
-
.on("dblclick", function (row, col, sel) {
|
|
25
|
-
context.dblclick(row, col, sel);
|
|
26
|
-
})
|
|
27
|
-
;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
enter(domNode, element) {
|
|
31
|
-
super.enter(domNode, element);
|
|
32
|
-
this
|
|
33
|
-
.layers([
|
|
34
|
-
this._counties
|
|
35
|
-
])
|
|
36
|
-
;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
update(domNode, element) {
|
|
40
|
-
this._counties.data(this.data());
|
|
41
|
-
super.update(domNode, element);
|
|
42
|
-
this._palette = this._counties._palette;
|
|
43
|
-
this._dataMinWeight = this._counties._dataMinWeight;
|
|
44
|
-
this._dataMaxWeight = this._counties._dataMaxWeight;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
private _prevBounds;
|
|
48
|
-
render(callback: (w: Widget) => this): this {
|
|
49
|
-
return super.render(w => {
|
|
50
|
-
if (this._renderCount > 1 && this.autoScale()) {
|
|
51
|
-
const bounds = this._counties.getDataBounds();
|
|
52
|
-
if (bounds.x && bounds.y &&
|
|
53
|
-
(!this._prevBounds ||
|
|
54
|
-
this._prevBounds.x !== bounds.x ||
|
|
55
|
-
this._prevBounds.y !== bounds.y ||
|
|
56
|
-
this._prevBounds.width !== bounds.width ||
|
|
57
|
-
this._prevBounds.height !== bounds.height)
|
|
58
|
-
) {
|
|
59
|
-
this._prevBounds = bounds;
|
|
60
|
-
const tl = this.invert(bounds.x, bounds.y);
|
|
61
|
-
const br = this.invert(bounds.x + bounds.width, bounds.y + bounds.height);
|
|
62
|
-
if (tl && br) {
|
|
63
|
-
this.zoomTo([
|
|
64
|
-
[tl[1], tl[0]],
|
|
65
|
-
[br[1], br[0]]
|
|
66
|
-
]);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
if (callback) {
|
|
71
|
-
callback(w);
|
|
72
|
-
}
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
exit(domNode, element) {
|
|
77
|
-
super.exit(domNode, element);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
click(row, column, selected) {
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
dblclick(row, column, selected) {
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
GMapCounties.prototype._class += " map_GMapCounties";
|
|
87
|
-
|
|
88
|
-
export interface GMapCounties {
|
|
89
|
-
autoScale(): boolean;
|
|
90
|
-
autoScale(_: boolean): this;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
GMapCounties.prototype.publish("autoScale", false, "boolean", "Auto scale to data");
|
|
1
|
+
import { Widget } from "@hpcc-js/common";
|
|
2
|
+
import { ChoroplethCounties } from "./ChoroplethCounties.ts";
|
|
3
|
+
import { GMapLayered } from "./GMapLayered.ts";
|
|
4
|
+
|
|
5
|
+
export class GMapCounties extends GMapLayered {
|
|
6
|
+
_counties: ChoroplethCounties;
|
|
7
|
+
_view;
|
|
8
|
+
_palette;
|
|
9
|
+
_dataMinWeight;
|
|
10
|
+
_dataMaxWeight;
|
|
11
|
+
|
|
12
|
+
constructor() {
|
|
13
|
+
super();
|
|
14
|
+
|
|
15
|
+
const context = this;
|
|
16
|
+
this._counties = new ChoroplethCounties()
|
|
17
|
+
.paletteID("Blues")
|
|
18
|
+
.meshVisible(false)
|
|
19
|
+
.opacity(0.80)
|
|
20
|
+
.columns(["fips", "weight"])
|
|
21
|
+
.on("click", function (row, col, sel) {
|
|
22
|
+
context.click(row, col, sel);
|
|
23
|
+
})
|
|
24
|
+
.on("dblclick", function (row, col, sel) {
|
|
25
|
+
context.dblclick(row, col, sel);
|
|
26
|
+
})
|
|
27
|
+
;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
enter(domNode, element) {
|
|
31
|
+
super.enter(domNode, element);
|
|
32
|
+
this
|
|
33
|
+
.layers([
|
|
34
|
+
this._counties
|
|
35
|
+
])
|
|
36
|
+
;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
update(domNode, element) {
|
|
40
|
+
this._counties.data(this.data());
|
|
41
|
+
super.update(domNode, element);
|
|
42
|
+
this._palette = this._counties._palette;
|
|
43
|
+
this._dataMinWeight = this._counties._dataMinWeight;
|
|
44
|
+
this._dataMaxWeight = this._counties._dataMaxWeight;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
private _prevBounds;
|
|
48
|
+
render(callback: (w: Widget) => this): this {
|
|
49
|
+
return super.render(w => {
|
|
50
|
+
if (this._renderCount > 1 && this.autoScale()) {
|
|
51
|
+
const bounds = this._counties.getDataBounds();
|
|
52
|
+
if (bounds.x && bounds.y &&
|
|
53
|
+
(!this._prevBounds ||
|
|
54
|
+
this._prevBounds.x !== bounds.x ||
|
|
55
|
+
this._prevBounds.y !== bounds.y ||
|
|
56
|
+
this._prevBounds.width !== bounds.width ||
|
|
57
|
+
this._prevBounds.height !== bounds.height)
|
|
58
|
+
) {
|
|
59
|
+
this._prevBounds = bounds;
|
|
60
|
+
const tl = this.invert(bounds.x, bounds.y);
|
|
61
|
+
const br = this.invert(bounds.x + bounds.width, bounds.y + bounds.height);
|
|
62
|
+
if (tl && br) {
|
|
63
|
+
this.zoomTo([
|
|
64
|
+
[tl[1], tl[0]],
|
|
65
|
+
[br[1], br[0]]
|
|
66
|
+
]);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
if (callback) {
|
|
71
|
+
callback(w);
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
exit(domNode, element) {
|
|
77
|
+
super.exit(domNode, element);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
click(row, column, selected) {
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
dblclick(row, column, selected) {
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
GMapCounties.prototype._class += " map_GMapCounties";
|
|
87
|
+
|
|
88
|
+
export interface GMapCounties {
|
|
89
|
+
autoScale(): boolean;
|
|
90
|
+
autoScale(_: boolean): this;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
GMapCounties.prototype.publish("autoScale", false, "boolean", "Auto scale to data");
|
package/src/GMapGraph.ts
CHANGED
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
import { Shape } from "@hpcc-js/common";
|
|
2
|
-
import { Edge, Graph } from "@hpcc-js/graph";
|
|
3
|
-
import { GMap } from "./GMap.ts";
|
|
4
|
-
|
|
5
|
-
export class GMapGraph extends GMap {
|
|
6
|
-
constructor() {
|
|
7
|
-
super();
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
enter() {
|
|
11
|
-
super.enter.apply(this, arguments);
|
|
12
|
-
const graph = new Graph()
|
|
13
|
-
.layout("None")
|
|
14
|
-
.zoomable(false)
|
|
15
|
-
;
|
|
16
|
-
|
|
17
|
-
const origRender = graph.render;
|
|
18
|
-
const context = this;
|
|
19
|
-
graph.render = function (callback?): Graph {
|
|
20
|
-
const vertices = [];
|
|
21
|
-
const edges = [];
|
|
22
|
-
let prevAddr = null;
|
|
23
|
-
context.data().forEach(function (row) {
|
|
24
|
-
const pos2 = context._viewportSurface.project(row[0], row[1]);
|
|
25
|
-
const newAddr = new Shape()
|
|
26
|
-
.shape("circle")
|
|
27
|
-
.radius(3)
|
|
28
|
-
.data(row)
|
|
29
|
-
.pos(pos2)
|
|
30
|
-
;
|
|
31
|
-
vertices.push(newAddr);
|
|
32
|
-
if (prevAddr) {
|
|
33
|
-
edges.push(new Edge()
|
|
34
|
-
.sourceVertex(prevAddr)
|
|
35
|
-
.targetVertex(newAddr)
|
|
36
|
-
.sourceMarker("none")
|
|
37
|
-
.targetMarker("arrow")
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
prevAddr = newAddr;
|
|
41
|
-
});
|
|
42
|
-
this.data({ vertices, edges });
|
|
43
|
-
const retVal = origRender.apply(this, arguments);
|
|
44
|
-
/*
|
|
45
|
-
this.graphData.nodeValues().forEach(function (vertex) {
|
|
46
|
-
const pos = context._viewportSurface.project(vertex.data()[0], vertex.data()[1]);
|
|
47
|
-
// pos.x -= context.width() / 2;
|
|
48
|
-
// pos.y -= context.height() / 2;
|
|
49
|
-
vertex.move(pos);
|
|
50
|
-
});
|
|
51
|
-
this.graphData.edgeValues().forEach(function (edge) {
|
|
52
|
-
edge.points([]);
|
|
53
|
-
});
|
|
54
|
-
*/
|
|
55
|
-
return retVal;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
this._viewportSurface.widget(graph);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
GMapGraph.prototype._class += " map_GMapGraph";
|
|
1
|
+
import { Shape } from "@hpcc-js/common";
|
|
2
|
+
import { Edge, Graph } from "@hpcc-js/graph";
|
|
3
|
+
import { GMap } from "./GMap.ts";
|
|
4
|
+
|
|
5
|
+
export class GMapGraph extends GMap {
|
|
6
|
+
constructor() {
|
|
7
|
+
super();
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
enter() {
|
|
11
|
+
super.enter.apply(this, arguments);
|
|
12
|
+
const graph = new Graph()
|
|
13
|
+
.layout("None")
|
|
14
|
+
.zoomable(false)
|
|
15
|
+
;
|
|
16
|
+
|
|
17
|
+
const origRender = graph.render;
|
|
18
|
+
const context = this;
|
|
19
|
+
graph.render = function (callback?): Graph {
|
|
20
|
+
const vertices = [];
|
|
21
|
+
const edges = [];
|
|
22
|
+
let prevAddr = null;
|
|
23
|
+
context.data().forEach(function (row) {
|
|
24
|
+
const pos2 = context._viewportSurface.project(row[0], row[1]);
|
|
25
|
+
const newAddr = new Shape()
|
|
26
|
+
.shape("circle")
|
|
27
|
+
.radius(3)
|
|
28
|
+
.data(row)
|
|
29
|
+
.pos(pos2)
|
|
30
|
+
;
|
|
31
|
+
vertices.push(newAddr);
|
|
32
|
+
if (prevAddr) {
|
|
33
|
+
edges.push(new Edge()
|
|
34
|
+
.sourceVertex(prevAddr)
|
|
35
|
+
.targetVertex(newAddr)
|
|
36
|
+
.sourceMarker("none")
|
|
37
|
+
.targetMarker("arrow")
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
prevAddr = newAddr;
|
|
41
|
+
});
|
|
42
|
+
this.data({ vertices, edges });
|
|
43
|
+
const retVal = origRender.apply(this, arguments);
|
|
44
|
+
/*
|
|
45
|
+
this.graphData.nodeValues().forEach(function (vertex) {
|
|
46
|
+
const pos = context._viewportSurface.project(vertex.data()[0], vertex.data()[1]);
|
|
47
|
+
// pos.x -= context.width() / 2;
|
|
48
|
+
// pos.y -= context.height() / 2;
|
|
49
|
+
vertex.move(pos);
|
|
50
|
+
});
|
|
51
|
+
this.graphData.edgeValues().forEach(function (edge) {
|
|
52
|
+
edge.points([]);
|
|
53
|
+
});
|
|
54
|
+
*/
|
|
55
|
+
return retVal;
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
this._viewportSurface.widget(graph);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
GMapGraph.prototype._class += " map_GMapGraph";
|
package/src/GMapHeat.ts
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import { HeatMap } from "@hpcc-js/other";
|
|
2
|
-
import { GMap } from "./GMap.ts";
|
|
3
|
-
|
|
4
|
-
export class GMapHeat extends GMap {
|
|
5
|
-
constructor() {
|
|
6
|
-
super();
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
enter() {
|
|
10
|
-
super.enter.apply(this, arguments);
|
|
11
|
-
const heat = new HeatMap();
|
|
12
|
-
|
|
13
|
-
const origRender = heat.render;
|
|
14
|
-
const context = this;
|
|
15
|
-
heat.render = function (callback?): HeatMap {
|
|
16
|
-
this.data(context.data().map(function (row) {
|
|
17
|
-
const pos = context._viewportSurface.project(row[0], row[1]);
|
|
18
|
-
return [pos.x, pos.y, row[4]];
|
|
19
|
-
}));
|
|
20
|
-
origRender.apply(this, arguments);
|
|
21
|
-
return this;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
this._viewportSurface.widget(heat);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
GMapHeat.prototype._class += " map_GMapHeat";
|
|
1
|
+
import { HeatMap } from "@hpcc-js/other";
|
|
2
|
+
import { GMap } from "./GMap.ts";
|
|
3
|
+
|
|
4
|
+
export class GMapHeat extends GMap {
|
|
5
|
+
constructor() {
|
|
6
|
+
super();
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
enter() {
|
|
10
|
+
super.enter.apply(this, arguments);
|
|
11
|
+
const heat = new HeatMap();
|
|
12
|
+
|
|
13
|
+
const origRender = heat.render;
|
|
14
|
+
const context = this;
|
|
15
|
+
heat.render = function (callback?): HeatMap {
|
|
16
|
+
this.data(context.data().map(function (row) {
|
|
17
|
+
const pos = context._viewportSurface.project(row[0], row[1]);
|
|
18
|
+
return [pos.x, pos.y, row[4]];
|
|
19
|
+
}));
|
|
20
|
+
origRender.apply(this, arguments);
|
|
21
|
+
return this;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
this._viewportSurface.widget(heat);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
GMapHeat.prototype._class += " map_GMapHeat";
|
package/src/GMapLayered.ts
CHANGED
|
@@ -1,94 +1,94 @@
|
|
|
1
|
-
import { Widget } from "@hpcc-js/common";
|
|
2
|
-
import { AbsoluteSurface } from "@hpcc-js/layout";
|
|
3
|
-
import { GMap, google } from "./GMap.ts";
|
|
4
|
-
import { Layered } from "./Layered.ts";
|
|
5
|
-
|
|
6
|
-
const zoomFactor = 1 / (1 << 4);
|
|
7
|
-
|
|
8
|
-
class OverlayLayered extends Layered {
|
|
9
|
-
gmap: GMap;
|
|
10
|
-
surface: AbsoluteSurface;
|
|
11
|
-
|
|
12
|
-
constructor(gmap: GMap, surface: AbsoluteSurface) {
|
|
13
|
-
super();
|
|
14
|
-
this.gmap = gmap;
|
|
15
|
-
this.surface = surface;
|
|
16
|
-
this.autoScaleMode("none");
|
|
17
|
-
this
|
|
18
|
-
.zoomable(false)
|
|
19
|
-
.zoomDuration(10)
|
|
20
|
-
;
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
getProjection() {
|
|
25
|
-
return this.gmap._overlay.getProjection();
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
render(callback?: any): this {
|
|
29
|
-
super.render((w) => {
|
|
30
|
-
const projection = this.getProjection();
|
|
31
|
-
if (projection) {
|
|
32
|
-
// TODO - global usage should not be used - see GMap.ts
|
|
33
|
-
const center = new (window as any).google.maps.LatLng(0, 0);
|
|
34
|
-
const pos = projection.fromLatLngToDivPixel(center);
|
|
35
|
-
const widgetX = this.surface.widgetX();
|
|
36
|
-
const widgetY = this.surface.widgetY();
|
|
37
|
-
const translate = [(pos.x - widgetX), (pos.y - widgetY)];
|
|
38
|
-
const zoom = this.gmap._googleMap.getZoom();
|
|
39
|
-
this.zoomTo(translate, zoomFactor * (1 << zoom), 0);
|
|
40
|
-
}
|
|
41
|
-
if (callback) {
|
|
42
|
-
callback(w);
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
return this;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export class GMapLayered extends GMap {
|
|
50
|
-
private layered: OverlayLayered;
|
|
51
|
-
|
|
52
|
-
constructor() {
|
|
53
|
-
super();
|
|
54
|
-
this.layered = new OverlayLayered(this, this._viewportSurface);
|
|
55
|
-
this._viewportSurface.widget(this.layered);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
invert(x: number, y: number): { lat: number, lng: number } | undefined {
|
|
59
|
-
return this.layered.invert(x, y);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
rproject(x: number, y: number): { lat: number, lng: number } | undefined {
|
|
63
|
-
const projection = this.layered.getProjection();
|
|
64
|
-
const latLng = projection.fromDivPixelToLatLng(new google.maps.Point(x, y));
|
|
65
|
-
return {
|
|
66
|
-
lat: latLng.lat(),
|
|
67
|
-
lng: latLng.lng()
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
updateCircles() { }
|
|
72
|
-
updatePins() { }
|
|
73
|
-
|
|
74
|
-
layers(): Widget[];
|
|
75
|
-
layers(_: Widget[]): this;
|
|
76
|
-
layers(_?: Widget[]): Widget[] | this {
|
|
77
|
-
if (!arguments.length) return this.layered.layers();
|
|
78
|
-
this.layered.layers(_);
|
|
79
|
-
return this;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
render(callback?) {
|
|
83
|
-
return super.render(w => {
|
|
84
|
-
this.layered.preRender().then(() => {
|
|
85
|
-
this.layered.render(w => {
|
|
86
|
-
if (callback) {
|
|
87
|
-
callback(w);
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
});
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
GMapLayered.prototype._class += " map_GMapLayered";
|
|
1
|
+
import { Widget } from "@hpcc-js/common";
|
|
2
|
+
import { AbsoluteSurface } from "@hpcc-js/layout";
|
|
3
|
+
import { GMap, google } from "./GMap.ts";
|
|
4
|
+
import { Layered } from "./Layered.ts";
|
|
5
|
+
|
|
6
|
+
const zoomFactor = 1 / (1 << 4);
|
|
7
|
+
|
|
8
|
+
class OverlayLayered extends Layered {
|
|
9
|
+
gmap: GMap;
|
|
10
|
+
surface: AbsoluteSurface;
|
|
11
|
+
|
|
12
|
+
constructor(gmap: GMap, surface: AbsoluteSurface) {
|
|
13
|
+
super();
|
|
14
|
+
this.gmap = gmap;
|
|
15
|
+
this.surface = surface;
|
|
16
|
+
this.autoScaleMode("none");
|
|
17
|
+
this
|
|
18
|
+
.zoomable(false)
|
|
19
|
+
.zoomDuration(10)
|
|
20
|
+
;
|
|
21
|
+
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
getProjection() {
|
|
25
|
+
return this.gmap._overlay.getProjection();
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
render(callback?: any): this {
|
|
29
|
+
super.render((w) => {
|
|
30
|
+
const projection = this.getProjection();
|
|
31
|
+
if (projection) {
|
|
32
|
+
// TODO - global usage should not be used - see GMap.ts
|
|
33
|
+
const center = new (window as any).google.maps.LatLng(0, 0);
|
|
34
|
+
const pos = projection.fromLatLngToDivPixel(center);
|
|
35
|
+
const widgetX = this.surface.widgetX();
|
|
36
|
+
const widgetY = this.surface.widgetY();
|
|
37
|
+
const translate = [(pos.x - widgetX), (pos.y - widgetY)];
|
|
38
|
+
const zoom = this.gmap._googleMap.getZoom();
|
|
39
|
+
this.zoomTo(translate, zoomFactor * (1 << zoom), 0);
|
|
40
|
+
}
|
|
41
|
+
if (callback) {
|
|
42
|
+
callback(w);
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
return this;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export class GMapLayered extends GMap {
|
|
50
|
+
private layered: OverlayLayered;
|
|
51
|
+
|
|
52
|
+
constructor() {
|
|
53
|
+
super();
|
|
54
|
+
this.layered = new OverlayLayered(this, this._viewportSurface);
|
|
55
|
+
this._viewportSurface.widget(this.layered);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
invert(x: number, y: number): { lat: number, lng: number } | undefined {
|
|
59
|
+
return this.layered.invert(x, y);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
rproject(x: number, y: number): { lat: number, lng: number } | undefined {
|
|
63
|
+
const projection = this.layered.getProjection();
|
|
64
|
+
const latLng = projection.fromDivPixelToLatLng(new google.maps.Point(x, y));
|
|
65
|
+
return {
|
|
66
|
+
lat: latLng.lat(),
|
|
67
|
+
lng: latLng.lng()
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
updateCircles() { }
|
|
72
|
+
updatePins() { }
|
|
73
|
+
|
|
74
|
+
layers(): Widget[];
|
|
75
|
+
layers(_: Widget[]): this;
|
|
76
|
+
layers(_?: Widget[]): Widget[] | this {
|
|
77
|
+
if (!arguments.length) return this.layered.layers();
|
|
78
|
+
this.layered.layers(_);
|
|
79
|
+
return this;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
render(callback?) {
|
|
83
|
+
return super.render(w => {
|
|
84
|
+
this.layered.preRender().then(() => {
|
|
85
|
+
this.layered.render(w => {
|
|
86
|
+
if (callback) {
|
|
87
|
+
callback(w);
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
GMapLayered.prototype._class += " map_GMapLayered";
|