@trapar-waves/react-three-maplibre 1.2.0 → 2.0.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.
Files changed (20) hide show
  1. package/README.md +49 -88
  2. package/assets/readme/headers/contributing.svg +15 -0
  3. package/assets/readme/headers/features.svg +15 -0
  4. package/assets/readme/headers/getting-started.svg +15 -0
  5. package/assets/readme/headers/license.svg +15 -0
  6. package/assets/readme/headers/project-structure.svg +15 -0
  7. package/assets/readme/headers/tech-stack.svg +15 -0
  8. package/assets/readme/headers/usage.svg +15 -0
  9. package/assets/readme/hero.svg +67 -0
  10. package/eslint.config.js +6 -10
  11. package/lint-staged.config.js +1 -1
  12. package/package.json +29 -29
  13. package/pnpm-workspace.yaml +5 -0
  14. package/readme/README-CN.md +63 -91
  15. package/readme/README-JP.md +64 -92
  16. package/readme/README-RU.md +47 -75
  17. package/rsbuild.config.ts +11 -13
  18. package/src/{App.tsx → app.tsx} +66 -58
  19. package/src/index.tsx +4 -4
  20. /package/src/{env.d.ts → environment.d.ts} +0 -0
package/README.md CHANGED
@@ -9,11 +9,13 @@
9
9
 
10
10
  ---
11
11
 
12
- [中文](/readme/README-CN.md) | [日本語](/readme/README-JP.md) | [Русский язык](/readme/README-RU.md)
12
+ [中文](./readme/README-CN.md) | [日本語](./readme/README-JP.md) | [Русский язык](./readme/README-RU.md)
13
13
 
14
14
  > A React-based library integrating Three.js, MapLibre, and AntV for advanced geospatial 3D visualizations.
15
15
 
16
- ## ✨ Features
16
+ ![react-three-maplibre hero](assets/readme/hero.svg)
17
+
18
+ ![Features](assets/readme/headers/features.svg)
17
19
 
18
20
  - **Geospatial Visualization:** Combines `@antv/l7` and `maplibre-gl` for powerful geospatial data rendering with custom map layers.
19
21
  - **3D Rendering with React:** Leverages `@react-three/fiber` and `@react-three/drei` to integrate Three.js into a React-based workflow for declarative 3D scene management.
@@ -25,105 +27,58 @@
25
27
  - **Map Interactivity:** Implements `react-map-gl` for interactive map controls and client-side navigation in geospatial contexts.
26
28
  - **AntV Enhancements:** Incorporates `@antv/l7-maps` for additional map layering capabilities and visualization tools.
27
29
 
28
- ## GitHub Pages
29
-
30
- Pushing a version tag matching `v*` runs [`.github/workflows/pages.yml`](./.github/workflows/pages.yml), which builds with `BASE_PATH=/<repository-name>/`, copies `dist/index.html` to `dist/404.html` for SPA routing, and deploys to GitHub Pages. In the repository **Settings → Pages**, set **Source** to **GitHub Actions** once.
30
+ ![Tech Stack](assets/readme/headers/tech-stack.svg)
31
31
 
32
- The demo map uses [Carto Basemaps](https://carto.com/basemaps/) public MapLibre GL styles (**no API key** required for local builds or GitHub Pages).
33
-
34
- ```bash
35
- BASE_PATH=/react-three-maplibre/ pnpm run build && pnpm preview
36
- ```
37
-
38
- PowerShell:
39
-
40
- ```powershell
41
- $env:BASE_PATH="/react-three-maplibre/"; pnpm run build; pnpm preview
42
- ```
32
+ - **Framework/Library:** `React`
33
+ - **UI Toolkit/Styling:** `Tailwind CSS`
34
+ - **3D Rendering:** `Three.js` (`@react-three/fiber`, `@react-three/drei`)
35
+ - **Geospatial Libraries:** `MapLibre GL`, `AntV L7`
36
+ - **Build Tool:** `Rsbuild`
37
+ - **Language:** `TypeScript`
43
38
 
44
- ## 💻 Tech Stack
39
+ See the [package.json](./package.json) for a full list of dependencies.
45
40
 
46
- - **Framework/Library:** React
47
- - **UI Toolkit/Styling:** Tailwind CSS
48
- - **3D Rendering:** Three.js (`@react-three/fiber`, `@react-three/drei`)
49
- - **Geospatial Libraries:** MapLibre GL, AntV L7
50
- - **Build Tool:** Rsbuild
51
- - **Language:** TypeScript
41
+ ![Getting Started](assets/readme/headers/getting-started.svg)
52
42
 
53
- See the [package.json](package.json) for a full list of dependencies.
54
-
55
- ## 🚀 Getting Started
56
-
57
- Follow these instructions to get the project running locally.
58
-
59
- ### Prerequisites
60
-
61
- Ensure you have the following installed:
43
+ ## Prerequisites
62
44
 
63
45
  - Node.js (>= 18.x recommended)
64
46
  - Package manager (npm, yarn, or pnpm)
65
47
 
66
- ```bash
67
- node -v
68
- npm -v
69
- ```
70
-
71
48
  ### Installation
72
49
 
73
50
  1. Create a new project using the template:
74
51
 
75
- ```bash
76
- pnpm create trapar-waves
77
- ```
52
+ ```bash
53
+ pnpm create trapar-waves
54
+ ```
78
55
 
79
56
  2. Navigate to your project directory and install dependencies:
80
57
 
81
- ```bash
82
- cd your-project-name
83
- pnpm install
84
- # or
85
- npm install
86
- # or
87
- yarn install
88
- ```
89
-
90
- ### Development
58
+ ```bash
59
+ pnpm install
60
+ ```
91
61
 
92
- Start the development server with hot reloading:
62
+ 3. Start the development server:
93
63
 
94
- ```bash
95
- pnpm dev
96
- # or
97
- npm run dev
98
- # or
99
- yarn dev
100
- ```
64
+ ```bash
65
+ pnpm dev
66
+ ```
101
67
 
102
- The application will be available at `http://localhost:3000` by default.
68
+ ![Project Structure](assets/readme/headers/project-structure.svg)
103
69
 
104
- ### Building for Production
105
-
106
- To create a production build:
107
-
108
- ```bash
109
- pnpm build
110
- # or
111
- npm run build
112
- # or
113
- yarn build
114
70
  ```
115
-
116
- Preview the production build locally:
117
-
118
- ```bash
119
- pnpm preview
120
- # or
121
- npm run preview
122
- # or
123
- yarn preview
71
+ ├── public/ # Static assets
72
+ ├── src/ # Source code
73
+ │ ├── App.tsx # Main application component
74
+ │ └── index.tsx # Entry point
75
+ ├── rsbuild.config.ts # Rsbuild configuration
76
+ ├── tsconfig.json # TypeScript configuration
77
+ ├── eslint.config.js # ESLint configuration
78
+ └── package.json # Project dependencies and scripts
124
79
  ```
125
80
 
126
- ## 📦 Usage
81
+ ![Usage](assets/readme/headers/usage.svg)
127
82
 
128
83
  This library is designed to be used as a template for creating geospatial 3D visualization applications. It provides a foundational setup with React, Three.js, MapLibre GL, and AntV L7.
129
84
 
@@ -158,8 +113,7 @@ const latLon = {
158
113
  latitude: 31.215175,
159
114
  longitude: 121.417463,
160
115
  };
161
- const MAP_STYLE_URL
162
- = "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
116
+ const MAPTILER_KEY = import.meta.env.PUBLIC_MAPTILER_KEY;
163
117
 
164
118
  function App() {
165
119
  const ref = useRef<HTMLDivElement>(null!);
@@ -204,7 +158,7 @@ function App() {
204
158
  zoom: 11,
205
159
  pitch: 64.88,
206
160
  }}
207
- mapStyle={MAP_STYLE_URL}
161
+ mapStyle={`https://api.maptiler.com/maps/streets/style.json?key=${MAPTILER_KEY}`}
208
162
  onLoad={initL7}
209
163
  >
210
164
  <Stats className="stats" parent={ref} />
@@ -234,11 +188,17 @@ This example demonstrates:
234
188
  - Using React Three Fiber and Drei for 3D rendering
235
189
  - Positioning 3D objects relative to the map using `react-three-map`
236
190
 
237
- ### Map basemap
191
+ ### Environment Variables
192
+
193
+ To use map services like MapTiler, you'll need to set up environment variables. Create a `.env` file in your project root:
194
+
195
+ ```
196
+ PUBLIC_MAPTILER_KEY=your_maptiler_api_key_here
197
+ ```
238
198
 
239
- The template ships with a key-free Carto GL style (`MAP_STYLE_URL` in `src/App.tsx`). To switch providers (e.g. MapTiler), point `mapStyle` at your style JSON and manage API keys via `.env` / CI secrets yourself.
199
+ Make sure to add `.env` to your `.gitignore` to keep your keys secure.
240
200
 
241
- ## 🤝 Contributing
201
+ ![Contributing](assets/readme/headers/contributing.svg)
242
202
 
243
203
  Contributions are welcome and greatly appreciated! Please follow these steps to contribute:
244
204
 
@@ -248,15 +208,16 @@ Contributions are welcome and greatly appreciated! Please follow these steps to
248
208
  4. Push to the branch (`git push origin feature/amazing-feature`)
249
209
  5. Open a Pull Request
250
210
 
251
- Please ensure your code follows the existing style and passes all tests.
211
+ ![License](assets/readme/headers/license.svg)
212
+
213
+ MIT License © 2025 Trapar Waves
252
214
 
253
215
  ## 👤 Author
254
216
 
255
- - **Rikka:** (admin@rikka.cc)
217
+ - **Rikka:** [admin@rikka.cc](mailto:admin@rikka.cc)
256
218
  - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
257
219
 
258
220
  ## 🔗 Links
259
221
 
260
222
  - **Repository:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
261
- - **Homepage:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
262
223
  - **Issues:** [https://github.com/Trapar-waves/react-three-maplibre/issues](https://github.com/Trapar-waves/react-three-maplibre/issues)
package/assets/readme/headers/contributing.svg ADDED
@@ -0,0 +1,15 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>Contributing section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-contrib-r3m" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#10B981;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+ <rect width="1200" height="80" fill="#FFFFFF"/>
10
+ <rect width="1200" height="80" fill="url(#bg-contrib-r3m)"/>
11
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
12
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#10B981"/>
13
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">🤝</text>
14
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">Contributing</text>
15
+ </svg>
package/assets/readme/headers/features.svg ADDED
@@ -0,0 +1,15 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>Features section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-features-r3m" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#10B981;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+ <rect width="1200" height="80" fill="#FFFFFF"/>
10
+ <rect width="1200" height="80" fill="url(#bg-features-r3m)"/>
11
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
12
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#10B981"/>
13
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">✨</text>
14
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">Features</text>
15
+ </svg>
package/assets/readme/headers/getting-started.svg ADDED
@@ -0,0 +1,15 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>Getting Started section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-start-r3m" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#10B981;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+ <rect width="1200" height="80" fill="#FFFFFF"/>
10
+ <rect width="1200" height="80" fill="url(#bg-start-r3m)"/>
11
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
12
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#10B981"/>
13
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">🚀</text>
14
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">Getting Started</text>
15
+ </svg>
package/assets/readme/headers/license.svg ADDED
@@ -0,0 +1,15 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>License section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-license-r3m" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#10B981;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+ <rect width="1200" height="80" fill="#FFFFFF"/>
10
+ <rect width="1200" height="80" fill="url(#bg-license-r3m)"/>
11
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
12
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#10B981"/>
13
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">📄</text>
14
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">License</text>
15
+ </svg>
package/assets/readme/headers/project-structure.svg ADDED
@@ -0,0 +1,15 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>Project Structure section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-struct-r3m" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#10B981;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+ <rect width="1200" height="80" fill="#FFFFFF"/>
10
+ <rect width="1200" height="80" fill="url(#bg-struct-r3m)"/>
11
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
12
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#10B981"/>
13
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">📁</text>
14
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">Project Structure</text>
15
+ </svg>
package/assets/readme/headers/tech-stack.svg ADDED
@@ -0,0 +1,15 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>Tech Stack section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-tech-r3m" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#10B981;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+ <rect width="1200" height="80" fill="#FFFFFF"/>
10
+ <rect width="1200" height="80" fill="url(#bg-tech-r3m)"/>
11
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
12
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#10B981"/>
13
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">💻</text>
14
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">Tech Stack</text>
15
+ </svg>
package/assets/readme/headers/usage.svg ADDED
@@ -0,0 +1,15 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>Usage section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-usage-r3m" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#10B981;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+ <rect width="1200" height="80" fill="#FFFFFF"/>
10
+ <rect width="1200" height="80" fill="url(#bg-usage-r3m)"/>
11
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
12
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#10B981"/>
13
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">📦</text>
14
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">Usage</text>
15
+ </svg>
package/assets/readme/hero.svg ADDED
@@ -0,0 +1,67 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 450" width="100%">
2
+ <title>react-three-maplibre — 3D map visualization library</title>
3
+ <defs>
4
+ <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
5
+ <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.08"/>
6
+ <stop offset="100%" style="stop-color:#10B981;stop-opacity:0.03"/>
7
+ </linearGradient>
8
+ <pattern id="dots" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
9
+ <circle cx="2" cy="2" r="1" fill="#10B981" opacity="0.12"/>
10
+ </pattern>
11
+ </defs>
12
+ <rect width="1200" height="450" fill="#FFFFFF"/>
13
+ <rect width="1200" height="450" fill="url(#bg)"/>
14
+ <rect width="1200" height="450" fill="url(#dots)"/>
15
+ <rect x="0.5" y="0.5" width="1199" height="449" rx="12" ry="12" fill="none" stroke="#E2E8F0" stroke-width="1"/>
16
+ <g transform="translate(80, 80)">
17
+ <text x="0" y="0" font-family="ui-monospace, 'SF Mono', 'Cascadia Code', monospace" font-size="18" fill="#64748B" letter-spacing="1">trapar-waves</text>
18
+ <text x="0" y="55" font-family="system-ui, -apple-system, sans-serif" font-size="56" font-weight="bold" fill="#10B981">react-three-</text>
19
+ <text x="0" y="115" font-family="system-ui, -apple-system, sans-serif" font-size="56" font-weight="bold" fill="#10B981">maplibre</text>
20
+ <text x="0" y="155" font-family="system-ui, -apple-system, sans-serif" font-size="20" fill="#475569">3D map visualization library</text>
21
+ <text x="0" y="185" font-family="system-ui, -apple-system, sans-serif" font-size="20" fill="#475569">React + Three.js + MapLibre</text>
22
+ <g transform="translate(0, 210)">
23
+ <rect x="0" y="0" width="75" height="36" rx="18" fill="#10B981" opacity="0.12"/>
24
+ <text x="37" y="23" text-anchor="middle" font-family="system-ui, sans-serif" font-size="14" fill="#10B981">React</text>
25
+ <rect x="85" y="0" width="80" height="36" rx="18" fill="#10B981" opacity="0.12"/>
26
+ <text x="125" y="23" text-anchor="middle" font-family="system-ui, sans-serif" font-size="14" fill="#10B981">Three.js</text>
27
+ <rect x="175" y="0" width="90" height="36" rx="18" fill="#10B981" opacity="0.12"/>
28
+ <text x="220" y="23" text-anchor="middle" font-family="system-ui, sans-serif" font-size="14" fill="#10B981">MapLibre</text>
29
+ <rect x="275" y="0" width="65" height="36" rx="18" fill="#10B981" opacity="0.12"/>
30
+ <text x="307" y="23" text-anchor="middle" font-family="system-ui, sans-serif" font-size="14" fill="#10B981">AntV</text>
31
+ </g>
32
+ </g>
33
+ <g transform="translate(640, 60)">
34
+ <g transform="translate(0, 0)">
35
+ <rect width="240" height="150" rx="10" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
36
+ <rect x="1" y="1" width="238" height="4" rx="2" fill="#10B981"/>
37
+ <text x="24" y="52" font-family="system-ui, sans-serif" font-size="36">🗺️</text>
38
+ <text x="68" y="52" font-family="system-ui, sans-serif" font-size="20" font-weight="bold" fill="#0F172A">Geospatial</text>
39
+ <text x="24" y="88" font-family="system-ui, sans-serif" font-size="14" fill="#64748B">AntV L7 + MapLibre</text>
40
+ <text x="24" y="112" font-family="system-ui, sans-serif" font-size="14" fill="#64748B">Custom map layers</text>
41
+ </g>
42
+ <g transform="translate(260, 0)">
43
+ <rect width="240" height="150" rx="10" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
44
+ <rect x="1" y="1" width="238" height="4" rx="2" fill="#10B981"/>
45
+ <text x="24" y="52" font-family="system-ui, sans-serif" font-size="36">🎯</text>
46
+ <text x="68" y="52" font-family="system-ui, sans-serif" font-size="20" font-weight="bold" fill="#0F172A">3D Rendering</text>
47
+ <text x="24" y="88" font-family="system-ui, sans-serif" font-size="14" fill="#64748B">React Three Fiber</text>
48
+ <text x="24" y="112" font-family="system-ui, sans-serif" font-size="14" fill="#64748B">Declarative scenes</text>
49
+ </g>
50
+ <g transform="translate(0, 170)">
51
+ <rect width="240" height="150" rx="10" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
52
+ <rect x="1" y="1" width="238" height="4" rx="2" fill="#10B981"/>
53
+ <text x="24" y="52" font-family="system-ui, sans-serif" font-size="36">🖱️</text>
54
+ <text x="68" y="52" font-family="system-ui, sans-serif" font-size="20" font-weight="bold" fill="#0F172A">Interactive</text>
55
+ <text x="24" y="88" font-family="system-ui, sans-serif" font-size="14" fill="#64748B">react-map-gl controls</text>
56
+ <text x="24" y="112" font-family="system-ui, sans-serif" font-size="14" fill="#64748B">Client-side navigation</text>
57
+ </g>
58
+ <g transform="translate(260, 170)">
59
+ <rect width="240" height="150" rx="10" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
60
+ <rect x="1" y="1" width="238" height="4" rx="2" fill="#10B981"/>
61
+ <text x="24" y="52" font-family="system-ui, sans-serif" font-size="36">⚡</text>
62
+ <text x="68" y="52" font-family="system-ui, sans-serif" font-size="20" font-weight="bold" fill="#0F172A">Fast Dev</text>
63
+ <text x="24" y="88" font-family="system-ui, sans-serif" font-size="14" fill="#64748B">Rsbuild optimized</text>
64
+ <text x="24" y="112" font-family="system-ui, sans-serif" font-size="14" fill="#64748B">TypeScript support</text>
65
+ </g>
66
+ </g>
67
+ </svg>
package/eslint.config.js CHANGED
@@ -1,21 +1,17 @@
1
- import antfu from "@antfu/eslint-config";
1
+ import { rentonReact } from "@renton/eslint-config-react";
2
2
 
3
- export default antfu({
3
+ export default rentonReact({
4
4
  stylistic: {
5
5
  quotes: "double",
6
6
  semi: true,
7
7
  },
8
- markdown: true,
9
- jsonc: true,
10
- typescript: true,
11
- yaml: true,
12
- react: true,
13
- formatters: {
14
- markdown: "prettier",
8
+ }, {
9
+ rules: {
10
+ "react/naming-convention-ref-name": "off",
15
11
  },
16
12
  }, {
17
- name: "trapar/pnpm-workspace-yaml-trust-policy",
18
13
  files: ["pnpm-workspace.yaml"],
14
+ name: "trapar/pnpm-workspace-yaml-trust-policy",
19
15
  rules: {
20
16
  "pnpm/yaml-enforce-settings": "off",
21
17
  },
package/lint-staged.config.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @filename: lint-staged.config.js
2
+ * @file lint-staged.config.js
3
3
  * @type {import('lint-staged').Configuration}
4
4
  */
5
5
  export default {
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@trapar-waves/react-three-maplibre",
3
3
  "type": "module",
4
- "version": "1.2.0",
5
- "packageManager": "pnpm@10.33.2",
4
+ "version": "2.0.0",
5
+ "packageManager": "pnpm@11.24.0",
6
6
  "description": "A React library integrating Three.js and MapLibre for 3D map visualization",
7
7
  "author": {
8
8
  "email": "admin@rikka.cc",
@@ -39,41 +39,41 @@
39
39
  "postinstall": "husky"
40
40
  },
41
41
  "dependencies": {
42
- "@antv/l7": "^2.25.4",
43
- "@antv/l7-maps": "^2.25.4",
44
- "@react-three/drei": "^10.7.7",
45
- "@react-three/fiber": "^9.6.0",
46
- "maplibre-gl": "^5.24.0",
47
- "react": "^19.2.5",
48
- "react-dom": "^19.2.5",
49
- "react-map-gl": "^8.1.1",
50
- "react-three-map": "^1.0.0",
51
- "three": "^0.184.0",
42
+ "@antv/l7": "^2.29.1",
43
+ "@antv/l7-maps": "^2.29.1",
44
+ "@react-three/drei": "^10.7.8",
45
+ "@react-three/fiber": "^9.7.0",
46
+ "maplibre-gl": "^6.6.0",
47
+ "react": "^19.2.8",
48
+ "react-dom": "^19.2.8",
49
+ "react-map-gl": "^8.1.2",
50
+ "react-three-map": "^1.0.1",
51
+ "three": "^0.185.1",
52
52
  "three-stdlib": "^2.36.1"
53
53
  },
54
54
  "devDependencies": {
55
- "@antfu/eslint-config": "^8.2.0",
56
- "@eslint-react/eslint-plugin": "^3.0.0",
57
- "@iconify/json": "^2.2.467",
55
+ "@eslint-react/eslint-plugin": "^5.18.6",
56
+ "@iconify/json": "^2.2.522",
58
57
  "@iconify/tailwind4": "^1.2.3",
59
- "@rsbuild/core": "^2.0.1",
60
- "@rsbuild/plugin-less": "^1.6.2",
61
- "@rsbuild/plugin-react": "^2.0.0",
62
- "@rsdoctor/rspack-plugin": "^1.5.9",
63
- "@tailwindcss/postcss": "^4.2.4",
64
- "@types/react": "^19.2.14",
65
- "@types/react-dom": "^19.2.3",
66
- "@types/three": "^0.184.0",
58
+ "@renton/eslint-config-react": "^1.0.0",
59
+ "@rsbuild/core": "^2.2.1",
60
+ "@rsbuild/plugin-less": "^2.0.1",
61
+ "@rsbuild/plugin-react": "^2.1.0",
62
+ "@rsdoctor/rspack-plugin": "^1.6.3",
63
+ "@tailwindcss/postcss": "^4.3.3",
64
+ "@types/react": "^19.2.18",
65
+ "@types/react-dom": "^19.2.5",
66
+ "@types/three": "^0.185.4",
67
67
  "cross-env": "^10.1.0",
68
- "eslint": "^10.2.1",
68
+ "eslint": "^10.9.1",
69
69
  "eslint-plugin-format": "^2.0.1",
70
70
  "eslint-plugin-react-hooks": "^7.1.1",
71
- "eslint-plugin-react-refresh": "^0.5.2",
71
+ "eslint-plugin-react-refresh": "^0.5.5",
72
72
  "husky": "^9.1.7",
73
- "lint-staged": "^16.4.0",
74
- "mapbox-gl": "^3.22.0",
75
- "tailwindcss": "^4.2.4",
73
+ "lint-staged": "^17.4.1",
74
+ "mapbox-gl": "^3.29.0",
75
+ "tailwindcss": "^4.3.3",
76
76
  "typescript": "^6.0.3",
77
- "unplugin-turbo-console": "^2.3.1"
77
+ "unplugin-turbo-console": "^2.3.3"
78
78
  }
79
79
  }
package/pnpm-workspace.yaml CHANGED
@@ -1,3 +1,5 @@
1
+ minimumReleaseAge: 0
2
+
1
3
  shellEmulator: true
2
4
 
3
5
  trustPolicy: off
@@ -5,3 +7,6 @@ trustPolicy: off
5
7
  onlyBuiltDependencies:
6
8
  - "@tailwindcss/oxide"
7
9
  - core-js
10
+
11
+ allowBuilds:
12
+ core-js: true