@geothai/maps-react 0.1.0 → 0.2.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 +57 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# @geothai/maps-react
|
|
2
|
+
|
|
3
|
+
A React component that draws a map of Thailand on DOPA codes. It draws the same model as
|
|
4
|
+
`toSvg()` of [`@geothai/maps`](https://www.npmjs.com/package/@geothai/maps). The markup is the
|
|
5
|
+
same in every framework. It works in server components with no client JavaScript.
|
|
6
|
+
|
|
7
|
+
[👉 Source](https://github.com/GeoThai/maps)
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
npm install @geothai/maps-react @geothai/maps
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Use
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
18
|
+
import { choropleth, districtMap } from '@geothai/maps';
|
|
19
|
+
import { GeoThaiMap } from '@geothai/maps-react';
|
|
20
|
+
|
|
21
|
+
// A React Server Component: the shapes load on the server.
|
|
22
|
+
export async function SuratThani({ values }) {
|
|
23
|
+
const map = await districtMap('84');
|
|
24
|
+
const { fills } = choropleth(map, values);
|
|
25
|
+
return <GeoThaiMap map={map} fills={fills} />;
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
```jsx
|
|
30
|
+
import { provinces } from '@geothai/maps';
|
|
31
|
+
|
|
32
|
+
<GeoThaiMap
|
|
33
|
+
map={provinces}
|
|
34
|
+
title="Thailand"
|
|
35
|
+
href={(s) => `/provinces/${s.code}/`}
|
|
36
|
+
highlight={['84']}
|
|
37
|
+
/>;
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Props
|
|
41
|
+
|
|
42
|
+
`<GeoThaiMap>` takes `map` and every option of `render()`:
|
|
43
|
+
|
|
44
|
+
| Prop | What it does |
|
|
45
|
+
| ----------- | -------------------------------------------------------------------- |
|
|
46
|
+
| `map` | `provinces`, or the result of `await districtMap('84')` |
|
|
47
|
+
| `fills` | Fill color per area code |
|
|
48
|
+
| `fill` | Default fill |
|
|
49
|
+
| `stroke` | Color of the borders and the outline |
|
|
50
|
+
| `href` | A function that returns the link of an area, or `undefined` for none |
|
|
51
|
+
| `highlight` | Codes to draw on top with a thick stroke |
|
|
52
|
+
| `label` | Text for each area, shown on hover and to screen readers |
|
|
53
|
+
| `title` | Accessible name of the whole map |
|
|
54
|
+
|
|
55
|
+
## License
|
|
56
|
+
|
|
57
|
+
The code is MIT, the shapes CC BY 3.0 IGO (`MIT AND CC-BY-3.0-IGO`, full credits in `NOTICE`).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geothai/maps-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "React component for maps of Thailand, on DOPA codes",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"choropleth",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"typecheck": "tsc"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@geothai/maps": "^0.
|
|
36
|
+
"@geothai/maps": "^0.2.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@repo/typescript": "workspace:*",
|