@trapar-waves/react-three-maplibre 1.0.0 → 1.0.2

package/README.md

@@ -1,29 +1,107 @@
-# Rsbuild Project
+# @trapar-waves/react-three-maplibre
 
-## Setup
+![npm version](https://img.shields.io/npm/v/@trapar-waves/react-three-maplibre)
+![npm dm](https://img.shields.io/npm/dm/@trapar-waves/react-three-maplibre)
+![License](https://img.shields.io/badge/license-MIT-green)
+![GitHub last commit](https://img.shields.io/github/last-commit/trapar-waves/react-three-maplibre)
+> A React-based project integrating Three.js and MapLibre for advanced geospatial visualization.
 
-Install the dependencies:
+## ✨ Features
 
-```bash
-pnpm install
-```
+* **3D Geospatial Visualization:** Combines [Three.js](https://threejs.org/) with [MapLibre](https://maplibre.org/) to enable highly interactive and visually rich 3D maps.
+* **React Integration:** Built using [@react-three/fiber](https://github.com/pmndrs/react-three-fiber) and [@react-three/drei](https://github.com/pmndrs/drei) for seamless integration of Three.js within a React environment.
+* **Advanced Mapping Capabilities:** Leverages [@antv/l7](https://l7.antv.vision/en-US) and [@antv/l7-maps](https://l7.antv.vision/en-US) for data-driven geospatial visualizations like heatmaps, choropleth maps, and more.
+* **Utility-First Styling:** Employs [Tailwind CSS](https://tailwindcss.com/) for flexible and rapid styling customization.
+* **Type Safety:** Utilizes TypeScript across the project (via `@types/react`, `@types/three`, etc.) to ensure type safety and improve code reliability.
+* **Fast Development Workflow:** Uses [Rsbuild](https://rsbuild.dev/) as the build tool for optimized builds and fast development cycles with features like HMR (Hot Module Replacement).
+* **Iconography Support:** Integrates [@iconify/tailwind4](https://iconify.design/) for scalable and customizable SVG icons.
+* **Code Quality Focus:** Includes ESLint configurations via [@antfu/eslint-config](https://github.com/antfu/eslint-config) to maintain high code quality standards.
+* **Customizable Maps:** Supports [react-map-gl](https://visgl.github.io/react-map-gl/) for creating interactive and customizable map experiences.
+* **Rich 3D Ecosystem:** Likely includes additional Three.js utilities from [three-stdlib](https://github.com/pmndrs/three-stdlib), offering pre-built helpers and components for common 3D tasks.
 
-## Get Started
+## 🚀 Getting Started
 
-Start the dev server:
+Follow these instructions to get the project running locally.
 
-```bash
-pnpm dev
-```
+### Prerequisites
 
-Build the app for production:
+* Ensure you have the following installed:
+    * Node.js (>= 18.x recommended)
+    * Package manager (`npm`, `yarn`, or `pnpm`)
+    ```bash
+    node -v
+    npm -v # or yarn -v or pnpm -v
+    ```
 
-```bash
-pnpm build
-```
+### Installation
 
-Preview the production build locally:
+1. Clone the repository:
+    ```bash
+    git clone https://github.com/Trapar-waves/react-three-maplibre.git
+    cd react-three-maplibre
+    ```
+2. Install dependencies:
+    ```bash
+    # Use your preferred package manager
+    npm install
+    # or
+    yarn install
+    # or
+    pnpm install
+    ```
 
+## 🛠️ Usage
+
+### Available Scripts
+
+Common scripts available via `npm run <script>`, `yarn <script>`, or `pnpm <script>`:
+
+* `dev`: Starts the development server with automatic browser opening.
+* `build`: Creates a production-ready build.
+* `preview`: Serves the production build locally for testing purposes.
+
+Example:
 ```bash
-pnpm preview
+# Start development server
+npm run dev 
+
+# Create production build
+npm run build 
+
+# Preview production build
+npm run preview
 ```
+
+## 💻 Tech Stack
+
+Key technologies used in this project include:
+
+* **Framework/Library:** React (with [@react-three/fiber](https://github.com/pmndrs/react-three-fiber) for Three.js integration)
+* **UI Toolkit/Styling:** Tailwind CSS
+* **Mapping Libraries:** [@antv/l7](https://l7.antv.vision/en-US), [MapLibre](https://maplibre.org/)
+* **3D Rendering:** Three.js (enhanced by [@react-three/drei](https://github.com/pmndrs/drei) and [three-stdlib](https://github.com/pmndrs/three-stdlib))
+* **Build Tool:** Rsbuild
+* **Language:** TypeScript
+* **Iconography:** Iconify
+
+See the [package.json](package.json) for a full list of dependencies.
+
+## 🤝 Contributing
+
+Contributions are welcome!
+
+## 📄 License
+
+Distributed under the **MIT** License. See `LICENSE` file for more information.
+
+## 👤 Author
+
+* **Rikka**
+* Email: [admin@rikka.cc](mailto:admin@rikka.cc)
+* GitHub: [@Muromi-Rikka](https://github.com/Muromi-Rikka)
+
+## 🔗 Links
+
+* **Repository:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
+* **Homepage:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
+* **Issues:** [https://github.com/Trapar-waves/react-three-maplibre/issues](https://github.com/Trapar-waves/react-three-maplibre/issues)

package/environments/.env

@@ -0,0 +1 @@
+PUBLIC_MAPTILER_KEY="set your key"

package/package.json

@@ -1,7 +1,27 @@
 {
   "name": "@trapar-waves/react-three-maplibre",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.2",
+  "author": {
+    "email": "admin@rikka.cc",
+    "name": "Rikka",
+    "url": "https://github.com/Muromi-Rikka"
+  },
+  "homepage": "https://github.com/Trapar-waves/react-three-maplibre",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Trapar-waves/react-three-maplibre.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Trapar-waves/react-three-maplibre/issues"
+  },
+  "keywords": [
+    "react",
+    "antv",
+    "maplibre",
+    "three",
+    "r3f"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -18,20 +38,20 @@
     "maplibre-gl": "4.7.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-map-gl": "^8.0.2",
+    "react-map-gl": "^8.0.3",
     "react-three-map": "1.0.0-next.2",
     "three": "^0.175.0",
     "three-stdlib": "^2.35.15"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.11.0",
-    "@iconify/json": "^2.2.323",
+    "@antfu/eslint-config": "^4.12.0",
+    "@iconify/json": "^2.2.326",
     "@iconify/tailwind4": "^1.0.6",
-    "@rsbuild/core": "^1.3.4",
-    "@rsbuild/plugin-react": "^1.1.1",
+    "@rsbuild/core": "^1.3.6",
+    "@rsbuild/plugin-react": "^1.2.0",
     "@tailwindcss/postcss": "^4.1.3",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.1",
+    "@types/react": "^19.1.1",
+    "@types/react-dom": "^19.1.2",
     "@types/three": "^0.175.0",
     "eslint": "^9.24.0",
     "mapbox-gl": "^3.11.0",

package/rsbuild.config.ts

@@ -1,14 +1,19 @@
-import { defineConfig } from '@rsbuild/core';
-import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig, loadEnv } from "@rsbuild/core";
+import { pluginReact } from "@rsbuild/plugin-react";
 import tailwind from "@tailwindcss/postcss";
 
+const { publicVars } = loadEnv({ cwd: "./environments" });
+
 export default defineConfig({
   plugins: [pluginReact()],
-  tools:{
-    postcss:{
-      postcssOptions:{
-        plugins:[tailwind]
-      }
-    }
-  }
+  source: {
+    define: publicVars,
+  },
+  tools: {
+    postcss: {
+      postcssOptions: {
+        plugins: [tailwind],
+      },
+    },
+  },
 });

package/src/App.tsx

@@ -23,6 +23,7 @@ const latLon = {
   latitude: 31.215175,
   longitude: 121.417463,
 };
+const MAPTILER_KEY = import.meta.env.PUBLIC_MAPTILER_KEY;
 
 function App() {
   const ref = useRef<HTMLDivElement>(null!);
@@ -67,7 +68,7 @@ function App() {
           zoom: 11,
           pitch: 64.88,
         }}
-        mapStyle="https://api.maptiler.com/maps/streets/style.json?key=YbCPLULzWdf1NplssEIc"
+        mapStyle={`https://api.maptiler.com/maps/streets/style.json?key=${MAPTILER_KEY}`}
         onLoad={initL7}
       >
         <Stats className="stats" parent={ref} />

package/src/global.css

@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@import "maplibre-gl/dist/maplibre-gl.css";
 @plugin "@iconify/tailwind4";
 .l7-scene{
     top: 0;

package/tsconfig.json

@@ -1,23 +1,23 @@
 {
   "compilerOptions": {
-    "lib": ["DOM", "ES2020"],
-    "jsx": "react-jsx",
     "target": "ES2020",
-    "noEmit": true,
-    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ES2020"],
     "useDefineForClassFields": true,
 
     /* modules */
     "module": "ESNext",
-    "isolatedModules": true,
-    "resolveJsonModule": true,
     "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
     "allowImportingTsExtensions": true,
 
     /* type checking */
     "strict": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
   },
   "include": ["src"]
 }