|
11 | 11 |
|
12 | 12 | Until now you had: |
13 | 13 |
|
14 | | -| imperative | declarative (react) | |
15 | | -| --------------- | ----------------- | |
16 | | -| Maplibre/Mapbox | react-map-gl | |
17 | | -| THREE.js | react-three-fiber | |
| 14 | +| imperative | declarative (react) | |
| 15 | +| --------------- | ------------------- | |
| 16 | +| Maplibre/Mapbox | react-map-gl | |
| 17 | +| THREE.js | react-three-fiber | |
18 | 18 |
|
19 | 19 | Now with `react-three-map`, you can use them together :fist_right::star::fist_left:. |
20 | 20 |
|
21 | 21 | ```sh |
22 | 22 | npm install react-three-map |
23 | 23 | ``` |
24 | 24 |
|
| 25 | +- [React Three Map](#react-three-map) |
| 26 | + - [:book: Examples](#book-examples) |
| 27 | + - [:mag: What does it look like?](#mag-what-does-it-look-like) |
| 28 | + - [:thinking: Why we build this?](#thinking-why-we-build-this) |
| 29 | + - [:gear: API](#gear-api) |
| 30 | + - [Canvas](#canvas) |
| 31 | + - [Render Props](#render-props) |
| 32 | + - [Render Props removed from `@react-three/fiber`](#render-props-removed-from-react-threefiber) |
| 33 | + - [Coordinates](#coordinates) |
| 34 | + - [NearCoordinates](#nearcoordinates) |
| 35 | + - [useMap](#usemap) |
| 36 | + - [coordsToVector3](#coordstovector3) |
| 37 | + - [vector3ToCoords](#vector3tocoords) |
| 38 | + - [:tada: Made with `react-three-map`](#tada-made-with-react-three-map) |
| 39 | + |
| 40 | + |
25 | 41 | ## :book: Examples |
26 | 42 |
|
27 | 43 | Check out our examples [here](https://rodrigohamuy.github.io/react-three-map) (powered by [Ladle](https://ladle.dev/)). |
@@ -120,13 +136,13 @@ It shares most of the props from R3F `<Canvas>`, so you can check them directly |
120 | 136 |
|
121 | 137 | #### Render Props |
122 | 138 |
|
123 | | -| Prop | Description | Default | |
124 | | -| --------- | ------------------------------------------------ | ---------- | |
125 | | -| latitude | The latitude coordinate where to add the scene. | | |
126 | | -| longitude | The longitude coordinate where to add the scene. | | |
127 | | -| altitude | The altitude coordinate where to add the scene. | `0` | |
128 | | -| frameloop | Render mode: `"always"`, `"demand"`. | `"always"` | |
129 | | -| overlay | Render on a separated canvas. | `false` | |
| 139 | +| Prop | Description | Default | |
| 140 | +| --------- | ------------------------------------------------ | ---------- | |
| 141 | +| latitude | The latitude coordinate where to add the scene. | | |
| 142 | +| longitude | The longitude coordinate where to add the scene. | | |
| 143 | +| altitude | The altitude coordinate where to add the scene. | `0` | |
| 144 | +| frameloop | Render mode: `"always"`, `"demand"`. | `"always"` | |
| 145 | +| overlay | Render on a separated canvas. | `false` | |
130 | 146 |
|
131 | 147 | **About `overlay`** |
132 | 148 |
|
@@ -172,11 +188,11 @@ import { Canvas, Coordinates } from 'react-three-map' |
172 | 188 | </Canvas> |
173 | 189 | ``` |
174 | 190 |
|
175 | | -| Props | Description | Default | |
176 | | -| --------- | ------------------------------------------------ | ---------- | |
177 | | -| latitude | The latitude coordinate where to add the scene. | | |
178 | | -| longitude | The longitude coordinate where to add the scene. | | |
179 | | -| altitude | The altitude coordinate where to add the scene. | `0` | |
| 191 | +| Props | Description | Default | |
| 192 | +| --------- | ------------------------------------------------ | ------- | |
| 193 | +| latitude | The latitude coordinate where to add the scene. | | |
| 194 | +| longitude | The longitude coordinate where to add the scene. | | |
| 195 | +| altitude | The altitude coordinate where to add the scene. | `0` | |
180 | 196 |
|
181 | 197 | ### NearCoordinates |
182 | 198 |
|
@@ -232,3 +248,9 @@ It is the inverse of `coordsToVector3` and maintains the same level of precision |
232 | 248 | | `origin: Coords` | The geographic coordinates used as the origin for calculations. | |
233 | 249 |
|
234 | 250 | Returns a `Coords` object representing the geographic coordinates of the point relative to the origin. |
| 251 | + |
| 252 | +## :tada: Made with `react-three-map` |
| 253 | + |
| 254 | +[](https://x.com/lonjon_thomas/status/1767151007983685979?s=20) |
| 255 | + |
| 256 | +[](https://x.com/lonjon_thomas/status/1767151007983685979?s=20) [](https://studio-carto-urban-project.netlify.app/) |
0 commit comments