dotted-map 2.2.3 → 3.1.0
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/README.md +44 -7
- package/dist/chunk-C0xms8kb.cjs +34 -0
- package/dist/index.cjs +12948 -0
- package/dist/index.d.cts +13 -0
- package/dist/index.d.mts +13 -0
- package/dist/index.mjs +12942 -0
- package/dist/types-F6gvGCSl.d.mts +80 -0
- package/dist/types-vOcy-UuQ.d.cts +80 -0
- package/dist/without-countries.cjs +109 -0
- package/dist/without-countries.d.cts +44 -0
- package/dist/without-countries.d.mts +44 -0
- package/dist/without-countries.mjs +107 -0
- package/package.json +46 -11
- package/.github/workflows/publish.yml +0 -22
- package/index.d.ts +0 -62
- package/index.js +0 -1
- package/src/countries.geo.json +0 -182
- package/src/with-countries.js +0 -180
- package/src/without-countries.js +0 -108
- package/webpack.config.js +0 -37
- package/without-countries.d.ts +0 -70
- package/without-countries.js +0 -1
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
//#region src/types.d.ts
|
|
2
|
+
type ProjectionName = 'mercator' | 'equirectangular' | 'robinson' | 'equalEarth' | 'mollweide' | 'miller' | 'sinusoidal' | 'orthographic' | 'gallPeters' | 'vanDerGrinten';
|
|
3
|
+
interface Projection {
|
|
4
|
+
name: ProjectionName;
|
|
5
|
+
center?: {
|
|
6
|
+
lat: number;
|
|
7
|
+
lng: number;
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
interface Region {
|
|
11
|
+
lat: {
|
|
12
|
+
min: number;
|
|
13
|
+
max: number;
|
|
14
|
+
};
|
|
15
|
+
lng: {
|
|
16
|
+
min: number;
|
|
17
|
+
max: number;
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
interface MapSettings {
|
|
21
|
+
height?: number;
|
|
22
|
+
width?: number;
|
|
23
|
+
countries?: string[];
|
|
24
|
+
region?: Region;
|
|
25
|
+
grid?: 'vertical' | 'diagonal';
|
|
26
|
+
projection?: Projection;
|
|
27
|
+
}
|
|
28
|
+
interface DottedMapSettings extends MapSettings {
|
|
29
|
+
avoidOuterPins?: boolean;
|
|
30
|
+
}
|
|
31
|
+
interface DottedMapWithoutCountriesSettings {
|
|
32
|
+
map: MapData;
|
|
33
|
+
avoidOuterPins?: boolean;
|
|
34
|
+
}
|
|
35
|
+
interface SvgOptions {
|
|
36
|
+
color?: string;
|
|
37
|
+
radius?: number;
|
|
38
|
+
}
|
|
39
|
+
interface PinInput {
|
|
40
|
+
lat: number;
|
|
41
|
+
lng: number;
|
|
42
|
+
data?: unknown;
|
|
43
|
+
svgOptions?: SvgOptions;
|
|
44
|
+
}
|
|
45
|
+
interface SvgSettings {
|
|
46
|
+
shape?: 'circle' | 'hexagon';
|
|
47
|
+
color?: string;
|
|
48
|
+
backgroundColor?: string;
|
|
49
|
+
radius?: number;
|
|
50
|
+
}
|
|
51
|
+
interface Point {
|
|
52
|
+
x: number;
|
|
53
|
+
y: number;
|
|
54
|
+
lat?: number;
|
|
55
|
+
lng?: number;
|
|
56
|
+
data?: unknown;
|
|
57
|
+
svgOptions?: SvgOptions;
|
|
58
|
+
}
|
|
59
|
+
interface MapData {
|
|
60
|
+
points: Record<string, Point>;
|
|
61
|
+
X_MIN: number;
|
|
62
|
+
Y_MIN: number;
|
|
63
|
+
X_MAX: number;
|
|
64
|
+
Y_MAX: number;
|
|
65
|
+
X_RANGE: number;
|
|
66
|
+
Y_RANGE: number;
|
|
67
|
+
region: Region;
|
|
68
|
+
grid: 'vertical' | 'diagonal';
|
|
69
|
+
height: number;
|
|
70
|
+
width: number;
|
|
71
|
+
ystep: number;
|
|
72
|
+
projection?: Projection;
|
|
73
|
+
}
|
|
74
|
+
interface ImageInfo {
|
|
75
|
+
region: Region;
|
|
76
|
+
width: number;
|
|
77
|
+
height: number;
|
|
78
|
+
}
|
|
79
|
+
//#endregion
|
|
80
|
+
export { MapSettings as a, Projection as c, SvgSettings as d, MapData as i, ProjectionName as l, DottedMapWithoutCountriesSettings as n, PinInput as o, ImageInfo as r, Point as s, DottedMapSettings as t, Region as u };
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
//#region src/types.d.ts
|
|
2
|
+
type ProjectionName = 'mercator' | 'equirectangular' | 'robinson' | 'equalEarth' | 'mollweide' | 'miller' | 'sinusoidal' | 'orthographic' | 'gallPeters' | 'vanDerGrinten';
|
|
3
|
+
interface Projection {
|
|
4
|
+
name: ProjectionName;
|
|
5
|
+
center?: {
|
|
6
|
+
lat: number;
|
|
7
|
+
lng: number;
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
interface Region {
|
|
11
|
+
lat: {
|
|
12
|
+
min: number;
|
|
13
|
+
max: number;
|
|
14
|
+
};
|
|
15
|
+
lng: {
|
|
16
|
+
min: number;
|
|
17
|
+
max: number;
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
interface MapSettings {
|
|
21
|
+
height?: number;
|
|
22
|
+
width?: number;
|
|
23
|
+
countries?: string[];
|
|
24
|
+
region?: Region;
|
|
25
|
+
grid?: 'vertical' | 'diagonal';
|
|
26
|
+
projection?: Projection;
|
|
27
|
+
}
|
|
28
|
+
interface DottedMapSettings extends MapSettings {
|
|
29
|
+
avoidOuterPins?: boolean;
|
|
30
|
+
}
|
|
31
|
+
interface DottedMapWithoutCountriesSettings {
|
|
32
|
+
map: MapData;
|
|
33
|
+
avoidOuterPins?: boolean;
|
|
34
|
+
}
|
|
35
|
+
interface SvgOptions {
|
|
36
|
+
color?: string;
|
|
37
|
+
radius?: number;
|
|
38
|
+
}
|
|
39
|
+
interface PinInput {
|
|
40
|
+
lat: number;
|
|
41
|
+
lng: number;
|
|
42
|
+
data?: unknown;
|
|
43
|
+
svgOptions?: SvgOptions;
|
|
44
|
+
}
|
|
45
|
+
interface SvgSettings {
|
|
46
|
+
shape?: 'circle' | 'hexagon';
|
|
47
|
+
color?: string;
|
|
48
|
+
backgroundColor?: string;
|
|
49
|
+
radius?: number;
|
|
50
|
+
}
|
|
51
|
+
interface Point {
|
|
52
|
+
x: number;
|
|
53
|
+
y: number;
|
|
54
|
+
lat?: number;
|
|
55
|
+
lng?: number;
|
|
56
|
+
data?: unknown;
|
|
57
|
+
svgOptions?: SvgOptions;
|
|
58
|
+
}
|
|
59
|
+
interface MapData {
|
|
60
|
+
points: Record<string, Point>;
|
|
61
|
+
X_MIN: number;
|
|
62
|
+
Y_MIN: number;
|
|
63
|
+
X_MAX: number;
|
|
64
|
+
Y_MAX: number;
|
|
65
|
+
X_RANGE: number;
|
|
66
|
+
Y_RANGE: number;
|
|
67
|
+
region: Region;
|
|
68
|
+
grid: 'vertical' | 'diagonal';
|
|
69
|
+
height: number;
|
|
70
|
+
width: number;
|
|
71
|
+
ystep: number;
|
|
72
|
+
projection?: Projection;
|
|
73
|
+
}
|
|
74
|
+
interface ImageInfo {
|
|
75
|
+
region: Region;
|
|
76
|
+
width: number;
|
|
77
|
+
height: number;
|
|
78
|
+
}
|
|
79
|
+
//#endregion
|
|
80
|
+
export { MapSettings as a, Projection as c, SvgSettings as d, MapData as i, ProjectionName as l, DottedMapWithoutCountriesSettings as n, PinInput as o, ImageInfo as r, Point as s, DottedMapSettings as t, Region as u };
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
const require_chunk = require('./chunk-C0xms8kb.cjs');
|
|
2
|
+
let proj4 = require("proj4");
|
|
3
|
+
proj4 = require_chunk.__toESM(proj4);
|
|
4
|
+
|
|
5
|
+
//#region src/without-countries.ts
|
|
6
|
+
const PROJECTIONS = {
|
|
7
|
+
mercator: "+proj=merc +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
8
|
+
equirectangular: "+proj=eqc +lon_0={lng} +lat_ts=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
9
|
+
robinson: "+proj=robin +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
10
|
+
equalEarth: "+proj=eqearth +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
11
|
+
mollweide: "+proj=moll +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
12
|
+
miller: "+proj=mill +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
13
|
+
sinusoidal: "+proj=sinu +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
14
|
+
orthographic: "+proj=ortho +lat_0={lat} +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
15
|
+
gallPeters: "+proj=cea +lon_0={lng} +lat_ts=45 +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
16
|
+
vanDerGrinten: "+proj=vandg +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m"
|
|
17
|
+
};
|
|
18
|
+
const DEFAULT_PROJECTION = { name: "mercator" };
|
|
19
|
+
const getProj4String = (projection = DEFAULT_PROJECTION) => {
|
|
20
|
+
const template = PROJECTIONS[projection.name];
|
|
21
|
+
const lat = projection.center?.lat ?? 0;
|
|
22
|
+
const lng = projection.center?.lng ?? 0;
|
|
23
|
+
return template.replace("{lat}", String(lat)).replace("{lng}", String(lng));
|
|
24
|
+
};
|
|
25
|
+
var DottedMapWithoutCountries = class {
|
|
26
|
+
constructor({ map, avoidOuterPins = false }) {
|
|
27
|
+
this.points = map.points;
|
|
28
|
+
this.pins = [];
|
|
29
|
+
this.X_MIN = map.X_MIN;
|
|
30
|
+
this.Y_MAX = map.Y_MAX;
|
|
31
|
+
this.X_RANGE = map.X_RANGE;
|
|
32
|
+
this.Y_RANGE = map.Y_RANGE;
|
|
33
|
+
this.grid = map.grid;
|
|
34
|
+
this.width = map.width;
|
|
35
|
+
this.height = map.height;
|
|
36
|
+
this.ystep = map.ystep;
|
|
37
|
+
this.avoidOuterPins = avoidOuterPins;
|
|
38
|
+
this.proj4String = getProj4String(map.projection ?? DEFAULT_PROJECTION);
|
|
39
|
+
this.image = {
|
|
40
|
+
region: map.region,
|
|
41
|
+
width: map.width,
|
|
42
|
+
height: map.height
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
addPin({ lat, lng, data, svgOptions }) {
|
|
46
|
+
const pin = this.getPin({
|
|
47
|
+
lat,
|
|
48
|
+
lng
|
|
49
|
+
});
|
|
50
|
+
if (!pin) return void 0;
|
|
51
|
+
const point = {
|
|
52
|
+
...pin,
|
|
53
|
+
data,
|
|
54
|
+
svgOptions
|
|
55
|
+
};
|
|
56
|
+
this.pins.push(point);
|
|
57
|
+
return point;
|
|
58
|
+
}
|
|
59
|
+
getPin({ lat, lng }) {
|
|
60
|
+
const projected = (0, proj4.default)(this.proj4String, [lng, lat]);
|
|
61
|
+
if (!projected.every((v) => Number.isFinite(v))) return;
|
|
62
|
+
const [projX, projY] = projected;
|
|
63
|
+
if (this.avoidOuterPins) return;
|
|
64
|
+
let rawX = this.width * (projX - this.X_MIN) / this.X_RANGE;
|
|
65
|
+
const rawY = this.height * (this.Y_MAX - projY) / this.Y_RANGE;
|
|
66
|
+
const y = Math.round(rawY / this.ystep);
|
|
67
|
+
if (y % 2 === 0 && this.grid === "diagonal") rawX -= .5;
|
|
68
|
+
let localx = Math.round(rawX);
|
|
69
|
+
const localy = Math.round(y) * this.ystep;
|
|
70
|
+
if (y % 2 === 0 && this.grid === "diagonal") localx += .5;
|
|
71
|
+
const inverse = (0, proj4.default)(this.proj4String, "WGS84", [localx * this.X_RANGE / this.width + this.X_MIN, this.Y_MAX - localy * this.Y_RANGE / this.height]);
|
|
72
|
+
if (!inverse.every((v) => Number.isFinite(v))) return;
|
|
73
|
+
const [localLng, localLat] = inverse;
|
|
74
|
+
return {
|
|
75
|
+
x: localx,
|
|
76
|
+
y: localy,
|
|
77
|
+
lat: localLat,
|
|
78
|
+
lng: localLng
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
getPoints() {
|
|
82
|
+
return [...Object.values(this.points), ...this.pins];
|
|
83
|
+
}
|
|
84
|
+
getSVG({ shape = "circle", color = "current", backgroundColor = "transparent", radius = .5 } = {}) {
|
|
85
|
+
const getPoint = ({ x, y, svgOptions = {} }) => {
|
|
86
|
+
const pointRadius = svgOptions.radius || radius;
|
|
87
|
+
if (shape === "circle") return `<circle cx="${x}" cy="${y}" r="${pointRadius}" fill="${svgOptions.color || color}" />`;
|
|
88
|
+
else if (shape === "hexagon") {
|
|
89
|
+
const sqrt3radius = Math.sqrt(3) * pointRadius;
|
|
90
|
+
return `<polyline points="${[
|
|
91
|
+
[x + sqrt3radius, y - pointRadius],
|
|
92
|
+
[x + sqrt3radius, y + pointRadius],
|
|
93
|
+
[x, y + 2 * pointRadius],
|
|
94
|
+
[x - sqrt3radius, y + pointRadius],
|
|
95
|
+
[x - sqrt3radius, y - pointRadius],
|
|
96
|
+
[x, y - 2 * pointRadius]
|
|
97
|
+
].map((point) => point.join(",")).join(" ")}" fill="${svgOptions.color || color}" />`;
|
|
98
|
+
}
|
|
99
|
+
return "";
|
|
100
|
+
};
|
|
101
|
+
return `<svg viewBox="0 0 ${this.width} ${this.height}" xmlns="http://www.w3.org/2000/svg" style="background-color: ${backgroundColor}">
|
|
102
|
+
${Object.values(this.points).map(getPoint).join("\n")}
|
|
103
|
+
${this.pins.map(getPoint).join("\n")}
|
|
104
|
+
</svg>`;
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
//#endregion
|
|
109
|
+
module.exports = DottedMapWithoutCountries;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { c as Projection, d as SvgSettings, i as MapData, l as ProjectionName, n as DottedMapWithoutCountriesSettings, o as PinInput, r as ImageInfo, s as Point, u as Region } from "./types-vOcy-UuQ.cjs";
|
|
2
|
+
|
|
3
|
+
//#region src/without-countries.d.ts
|
|
4
|
+
declare class DottedMapWithoutCountries {
|
|
5
|
+
private points;
|
|
6
|
+
private X_MIN;
|
|
7
|
+
private Y_MAX;
|
|
8
|
+
private X_RANGE;
|
|
9
|
+
private Y_RANGE;
|
|
10
|
+
private grid;
|
|
11
|
+
private width;
|
|
12
|
+
private height;
|
|
13
|
+
private ystep;
|
|
14
|
+
private avoidOuterPins;
|
|
15
|
+
private pins;
|
|
16
|
+
private proj4String;
|
|
17
|
+
image: ImageInfo;
|
|
18
|
+
constructor({
|
|
19
|
+
map,
|
|
20
|
+
avoidOuterPins
|
|
21
|
+
}: DottedMapWithoutCountriesSettings);
|
|
22
|
+
addPin({
|
|
23
|
+
lat,
|
|
24
|
+
lng,
|
|
25
|
+
data,
|
|
26
|
+
svgOptions
|
|
27
|
+
}: PinInput): Point;
|
|
28
|
+
getPin({
|
|
29
|
+
lat,
|
|
30
|
+
lng
|
|
31
|
+
}: {
|
|
32
|
+
lat: number;
|
|
33
|
+
lng: number;
|
|
34
|
+
}): Point | undefined;
|
|
35
|
+
getPoints(): Point[];
|
|
36
|
+
getSVG({
|
|
37
|
+
shape,
|
|
38
|
+
color,
|
|
39
|
+
backgroundColor,
|
|
40
|
+
radius
|
|
41
|
+
}?: SvgSettings): string;
|
|
42
|
+
}
|
|
43
|
+
//#endregion
|
|
44
|
+
export { type DottedMapWithoutCountriesSettings, type ImageInfo, type MapData, type PinInput, type Point, type Projection, type ProjectionName, type Region, type SvgSettings, DottedMapWithoutCountries as default };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { c as Projection, d as SvgSettings, i as MapData, l as ProjectionName, n as DottedMapWithoutCountriesSettings, o as PinInput, r as ImageInfo, s as Point, u as Region } from "./types-F6gvGCSl.mjs";
|
|
2
|
+
|
|
3
|
+
//#region src/without-countries.d.ts
|
|
4
|
+
declare class DottedMapWithoutCountries {
|
|
5
|
+
private points;
|
|
6
|
+
private X_MIN;
|
|
7
|
+
private Y_MAX;
|
|
8
|
+
private X_RANGE;
|
|
9
|
+
private Y_RANGE;
|
|
10
|
+
private grid;
|
|
11
|
+
private width;
|
|
12
|
+
private height;
|
|
13
|
+
private ystep;
|
|
14
|
+
private avoidOuterPins;
|
|
15
|
+
private pins;
|
|
16
|
+
private proj4String;
|
|
17
|
+
image: ImageInfo;
|
|
18
|
+
constructor({
|
|
19
|
+
map,
|
|
20
|
+
avoidOuterPins
|
|
21
|
+
}: DottedMapWithoutCountriesSettings);
|
|
22
|
+
addPin({
|
|
23
|
+
lat,
|
|
24
|
+
lng,
|
|
25
|
+
data,
|
|
26
|
+
svgOptions
|
|
27
|
+
}: PinInput): Point;
|
|
28
|
+
getPin({
|
|
29
|
+
lat,
|
|
30
|
+
lng
|
|
31
|
+
}: {
|
|
32
|
+
lat: number;
|
|
33
|
+
lng: number;
|
|
34
|
+
}): Point | undefined;
|
|
35
|
+
getPoints(): Point[];
|
|
36
|
+
getSVG({
|
|
37
|
+
shape,
|
|
38
|
+
color,
|
|
39
|
+
backgroundColor,
|
|
40
|
+
radius
|
|
41
|
+
}?: SvgSettings): string;
|
|
42
|
+
}
|
|
43
|
+
//#endregion
|
|
44
|
+
export { type DottedMapWithoutCountriesSettings, type ImageInfo, type MapData, type PinInput, type Point, type Projection, type ProjectionName, type Region, type SvgSettings, DottedMapWithoutCountries as default };
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import proj4 from "proj4";
|
|
2
|
+
|
|
3
|
+
//#region src/without-countries.ts
|
|
4
|
+
const PROJECTIONS = {
|
|
5
|
+
mercator: "+proj=merc +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
6
|
+
equirectangular: "+proj=eqc +lon_0={lng} +lat_ts=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
7
|
+
robinson: "+proj=robin +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
8
|
+
equalEarth: "+proj=eqearth +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
9
|
+
mollweide: "+proj=moll +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
10
|
+
miller: "+proj=mill +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
11
|
+
sinusoidal: "+proj=sinu +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
12
|
+
orthographic: "+proj=ortho +lat_0={lat} +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
13
|
+
gallPeters: "+proj=cea +lon_0={lng} +lat_ts=45 +x_0=0 +y_0=0 +datum=WGS84 +units=m",
|
|
14
|
+
vanDerGrinten: "+proj=vandg +lon_0={lng} +x_0=0 +y_0=0 +datum=WGS84 +units=m"
|
|
15
|
+
};
|
|
16
|
+
const DEFAULT_PROJECTION = { name: "mercator" };
|
|
17
|
+
const getProj4String = (projection = DEFAULT_PROJECTION) => {
|
|
18
|
+
const template = PROJECTIONS[projection.name];
|
|
19
|
+
const lat = projection.center?.lat ?? 0;
|
|
20
|
+
const lng = projection.center?.lng ?? 0;
|
|
21
|
+
return template.replace("{lat}", String(lat)).replace("{lng}", String(lng));
|
|
22
|
+
};
|
|
23
|
+
var DottedMapWithoutCountries = class {
|
|
24
|
+
constructor({ map, avoidOuterPins = false }) {
|
|
25
|
+
this.points = map.points;
|
|
26
|
+
this.pins = [];
|
|
27
|
+
this.X_MIN = map.X_MIN;
|
|
28
|
+
this.Y_MAX = map.Y_MAX;
|
|
29
|
+
this.X_RANGE = map.X_RANGE;
|
|
30
|
+
this.Y_RANGE = map.Y_RANGE;
|
|
31
|
+
this.grid = map.grid;
|
|
32
|
+
this.width = map.width;
|
|
33
|
+
this.height = map.height;
|
|
34
|
+
this.ystep = map.ystep;
|
|
35
|
+
this.avoidOuterPins = avoidOuterPins;
|
|
36
|
+
this.proj4String = getProj4String(map.projection ?? DEFAULT_PROJECTION);
|
|
37
|
+
this.image = {
|
|
38
|
+
region: map.region,
|
|
39
|
+
width: map.width,
|
|
40
|
+
height: map.height
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
addPin({ lat, lng, data, svgOptions }) {
|
|
44
|
+
const pin = this.getPin({
|
|
45
|
+
lat,
|
|
46
|
+
lng
|
|
47
|
+
});
|
|
48
|
+
if (!pin) return void 0;
|
|
49
|
+
const point = {
|
|
50
|
+
...pin,
|
|
51
|
+
data,
|
|
52
|
+
svgOptions
|
|
53
|
+
};
|
|
54
|
+
this.pins.push(point);
|
|
55
|
+
return point;
|
|
56
|
+
}
|
|
57
|
+
getPin({ lat, lng }) {
|
|
58
|
+
const projected = proj4(this.proj4String, [lng, lat]);
|
|
59
|
+
if (!projected.every((v) => Number.isFinite(v))) return;
|
|
60
|
+
const [projX, projY] = projected;
|
|
61
|
+
if (this.avoidOuterPins) return;
|
|
62
|
+
let rawX = this.width * (projX - this.X_MIN) / this.X_RANGE;
|
|
63
|
+
const rawY = this.height * (this.Y_MAX - projY) / this.Y_RANGE;
|
|
64
|
+
const y = Math.round(rawY / this.ystep);
|
|
65
|
+
if (y % 2 === 0 && this.grid === "diagonal") rawX -= .5;
|
|
66
|
+
let localx = Math.round(rawX);
|
|
67
|
+
const localy = Math.round(y) * this.ystep;
|
|
68
|
+
if (y % 2 === 0 && this.grid === "diagonal") localx += .5;
|
|
69
|
+
const inverse = proj4(this.proj4String, "WGS84", [localx * this.X_RANGE / this.width + this.X_MIN, this.Y_MAX - localy * this.Y_RANGE / this.height]);
|
|
70
|
+
if (!inverse.every((v) => Number.isFinite(v))) return;
|
|
71
|
+
const [localLng, localLat] = inverse;
|
|
72
|
+
return {
|
|
73
|
+
x: localx,
|
|
74
|
+
y: localy,
|
|
75
|
+
lat: localLat,
|
|
76
|
+
lng: localLng
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
getPoints() {
|
|
80
|
+
return [...Object.values(this.points), ...this.pins];
|
|
81
|
+
}
|
|
82
|
+
getSVG({ shape = "circle", color = "current", backgroundColor = "transparent", radius = .5 } = {}) {
|
|
83
|
+
const getPoint = ({ x, y, svgOptions = {} }) => {
|
|
84
|
+
const pointRadius = svgOptions.radius || radius;
|
|
85
|
+
if (shape === "circle") return `<circle cx="${x}" cy="${y}" r="${pointRadius}" fill="${svgOptions.color || color}" />`;
|
|
86
|
+
else if (shape === "hexagon") {
|
|
87
|
+
const sqrt3radius = Math.sqrt(3) * pointRadius;
|
|
88
|
+
return `<polyline points="${[
|
|
89
|
+
[x + sqrt3radius, y - pointRadius],
|
|
90
|
+
[x + sqrt3radius, y + pointRadius],
|
|
91
|
+
[x, y + 2 * pointRadius],
|
|
92
|
+
[x - sqrt3radius, y + pointRadius],
|
|
93
|
+
[x - sqrt3radius, y - pointRadius],
|
|
94
|
+
[x, y - 2 * pointRadius]
|
|
95
|
+
].map((point) => point.join(",")).join(" ")}" fill="${svgOptions.color || color}" />`;
|
|
96
|
+
}
|
|
97
|
+
return "";
|
|
98
|
+
};
|
|
99
|
+
return `<svg viewBox="0 0 ${this.width} ${this.height}" xmlns="http://www.w3.org/2000/svg" style="background-color: ${backgroundColor}">
|
|
100
|
+
${Object.values(this.points).map(getPoint).join("\n")}
|
|
101
|
+
${this.pins.map(getPoint).join("\n")}
|
|
102
|
+
</svg>`;
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
//#endregion
|
|
107
|
+
export { DottedMapWithoutCountries as default };
|
package/package.json
CHANGED
|
@@ -1,15 +1,42 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dotted-map",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Create a SVG map filled with dots for the world or countries",
|
|
5
|
-
"
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.cjs",
|
|
7
|
+
"module": "./dist/index.mjs",
|
|
8
|
+
"types": "./dist/index.d.mts",
|
|
6
9
|
"exports": {
|
|
7
|
-
".":
|
|
8
|
-
|
|
10
|
+
".": {
|
|
11
|
+
"import": {
|
|
12
|
+
"types": "./dist/index.d.mts",
|
|
13
|
+
"default": "./dist/index.mjs"
|
|
14
|
+
},
|
|
15
|
+
"require": {
|
|
16
|
+
"types": "./dist/index.d.cts",
|
|
17
|
+
"default": "./dist/index.cjs"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"./without-countries": {
|
|
21
|
+
"import": {
|
|
22
|
+
"types": "./dist/without-countries.d.mts",
|
|
23
|
+
"default": "./dist/without-countries.mjs"
|
|
24
|
+
},
|
|
25
|
+
"require": {
|
|
26
|
+
"types": "./dist/without-countries.d.cts",
|
|
27
|
+
"default": "./dist/without-countries.cjs"
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"files": [
|
|
32
|
+
"dist"
|
|
33
|
+
],
|
|
34
|
+
"engines": {
|
|
35
|
+
"node": ">=18"
|
|
9
36
|
},
|
|
10
|
-
"module": "./src/with-countries.js",
|
|
11
37
|
"scripts": {
|
|
12
|
-
"build": "
|
|
38
|
+
"build": "tsdown",
|
|
39
|
+
"typecheck": "tsc --noEmit",
|
|
13
40
|
"test": "node test.js"
|
|
14
41
|
},
|
|
15
42
|
"keywords": [
|
|
@@ -21,16 +48,24 @@
|
|
|
21
48
|
"countries",
|
|
22
49
|
"country"
|
|
23
50
|
],
|
|
51
|
+
"repository": {
|
|
52
|
+
"type": "git",
|
|
53
|
+
"url": "git+https://github.com/NTag/dotted-map.git"
|
|
54
|
+
},
|
|
24
55
|
"author": "Basile Bruneau <basile@bruneau.email>",
|
|
25
56
|
"license": "MIT",
|
|
57
|
+
"bugs": {
|
|
58
|
+
"url": "https://github.com/NTag/dotted-map/issues"
|
|
59
|
+
},
|
|
60
|
+
"homepage": "https://github.com/NTag/dotted-map",
|
|
26
61
|
"dependencies": {
|
|
27
|
-
"@turf/boolean-point-in-polygon": "^
|
|
28
|
-
"proj4": "^2.
|
|
62
|
+
"@turf/boolean-point-in-polygon": "^7.3.4",
|
|
63
|
+
"proj4": "^2.20.2"
|
|
29
64
|
},
|
|
30
65
|
"devDependencies": {
|
|
31
|
-
"prettier": "^
|
|
32
|
-
"
|
|
33
|
-
"
|
|
66
|
+
"prettier": "^3.8.1",
|
|
67
|
+
"tsdown": "^0.20.3",
|
|
68
|
+
"typescript": "^5.9.3"
|
|
34
69
|
},
|
|
35
70
|
"sideEffects": false
|
|
36
71
|
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
name: Publish to npm
|
|
2
|
-
|
|
3
|
-
on:
|
|
4
|
-
push:
|
|
5
|
-
branches:
|
|
6
|
-
- main
|
|
7
|
-
|
|
8
|
-
jobs:
|
|
9
|
-
build:
|
|
10
|
-
runs-on: ubuntu-latest
|
|
11
|
-
steps:
|
|
12
|
-
- uses: actions/checkout@v2
|
|
13
|
-
- uses: actions/setup-node@v2
|
|
14
|
-
with:
|
|
15
|
-
node-version: '16.x'
|
|
16
|
-
registry-url: 'https://registry.npmjs.org'
|
|
17
|
-
- run: npm install
|
|
18
|
-
- run: npm run build
|
|
19
|
-
- run: npm test
|
|
20
|
-
- run: npm publish
|
|
21
|
-
env:
|
|
22
|
-
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
package/index.d.ts
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
namespace DottedMapLib {
|
|
2
|
-
interface Region {
|
|
3
|
-
lat: { min: number; max: number };
|
|
4
|
-
lng: { min: number; max: number };
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
interface MapSettings {
|
|
8
|
-
height?: number;
|
|
9
|
-
width?: number;
|
|
10
|
-
countries?: string[];
|
|
11
|
-
region?: Region;
|
|
12
|
-
grid?: 'vertical' | 'diagonal';
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
interface Settings extends MapSettings {
|
|
16
|
-
avoidOuterPins?: false | true;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
interface SvgOptions {
|
|
20
|
-
color?: string;
|
|
21
|
-
radius?: number;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
interface Pin {
|
|
25
|
-
lat: number;
|
|
26
|
-
lng: number;
|
|
27
|
-
data?: any;
|
|
28
|
-
svgOptions?: SvgOptions;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
interface SvgSettings {
|
|
32
|
-
shape?: 'circle' | 'hexagon';
|
|
33
|
-
color?: string;
|
|
34
|
-
backgroundColor?: string;
|
|
35
|
-
radius?: number;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
type Point = {
|
|
39
|
-
x: number;
|
|
40
|
-
y: number;
|
|
41
|
-
lat: number;
|
|
42
|
-
lng: number;
|
|
43
|
-
data?: any;
|
|
44
|
-
svgOptions?: SvgOptions;
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export const getMapJSON: (settings: DottedMapLib.MapSettings) => string;
|
|
49
|
-
|
|
50
|
-
export default class DottedMap {
|
|
51
|
-
constructor(settings: DottedMapLib.Settings);
|
|
52
|
-
|
|
53
|
-
addPin(pin: DottedMapLib.Pin): DottedMapLib.Point;
|
|
54
|
-
getPin(pin: DottedMapLib.Pin): DottedMapLib.Point;
|
|
55
|
-
getPoints(): DottedMapLib.Point[];
|
|
56
|
-
getSVG(settings: DottedMapLib.SvgSettings): string;
|
|
57
|
-
image: {
|
|
58
|
-
region: DottedMap.Region;
|
|
59
|
-
width: number;
|
|
60
|
-
height: number;
|
|
61
|
-
};
|
|
62
|
-
}
|