docs: update readme

README.md

@@ -1,3 +1,23 @@
-# map3d
+![img](./.github/screenshot.png)
 
-Generate a real world 3D map
+<p align='center'>
+<h1 align='center'>🗺️ map3d</h1>
+<p align='center'>Generate a real world 3D map</p>
+</p>
+
+<p align='center'>
+<a href="https://map.fleet.im/">Visit</a> · <a href="https://github.com/cartesiancs/map3d/issues">Report Bugs</a>
+</p>
+
+## About The Project
+
+This is a 3D building mapping service implemented with [React-Three-Fiber](https://github.com/pmndrs/react-three-fiber). It allows exporting as a GLB file, and all features are free to use. Based on this project, various functionalities such as **digital twin**, **drone surveying**, and **GPS markers** can be implemented.
+
+The map files are based on OpenStreetMap data.
+
+## Roadmap
+
+- [x] Export GLB
+- [ ] Building Texture
+- [ ] Height Customization
+- [ ] Material

src/components/map/SelectMap.tsx

@@ -37,6 +37,7 @@ function RectangleSelector({
   const map = useMapEvents({
     mousedown(e) {
       if (isDrag == false) {
+        console.log(e);
         setFirstPoint(e.latlng);
       }
     },
@@ -151,7 +152,7 @@ export function MapComponent({
       </div>
 
       <MapContainer
-        center={[36.48656, 127.29064]}
+        center={[40.8, -73.95]}
         zoom={13}
         style={{
           height: "70vh",

src/state/areaStore.ts

@@ -15,12 +15,12 @@ export const useAreaStore = create<AreaStore>((set) => ({
   areas: [],
   center: [
     {
-      lat: 36.48888914657037,
+      lat: 40.8,
-      lng: 127.26794242858888,
+      lng: -73.95,
     },
     {
-      lat: 36.48023136458878,
+      lat: 40.83,
-      lng: 127.25330829620363,
+      lng: -73.88,
     },
   ],
   appendAreas: (areas) => set(() => ({ areas: [...areas] })),