allow to set Layer id and beforeId (#76)

Author: RodrigoHamuy

.changeset/thirty-radios-suffer.md

@@ -0,0 +1,5 @@
+---
+"react-three-map": minor
+---
+
+`<Canvas>` props accepts `id?: string` and `beforeId?: string` to set the MapLibre/Mapbox layer.

src/api/canvas-props.ts

@@ -2,8 +2,10 @@ import { RenderProps } from "@react-three/fiber";
 import { PropsWithChildren } from "react";
 
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+  id?: string;
+  beforeId?: string;
   longitude: number,
   latitude: number,
   altitude?: number,
   frameloop?: 'always' | 'demand',
-}
+}

src/core/use-canvas.ts

@@ -4,7 +4,7 @@ import { useCoords } from "./use-coords";
 import { useCreateRoot } from "./use-create-root";
 import { useRender } from "./use-render";
 
-export interface useCanvasProps extends CanvasProps {
+export interface useCanvasProps extends Omit<CanvasProps, 'id'|'beforeId'> {
   fromLngLat: FromLngLat,
 }
 

src/mapbox/canvas.tsx

@@ -11,16 +11,17 @@ extend(THREE);
 const fromLngLat = MercatorCoordinate.fromLngLat
 
 /** react`-three-fiber` canvas inside `Mapbox` */
-export const Canvas = memo<CanvasProps>((props) => {
+export const Canvas = memo<CanvasProps>(({id, beforeId, ...props}) => {
 
-  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
 
   return <Layer
-    id={id}
+    id={id || reactId}
+    beforeId={beforeId}
     type="custom"
     renderingMode="3d"
     onAdd={onAdd}
     onRemove={onRemove}
     render={render}
   />
-})
+})

src/maplibre/canvas.tsx

@@ -11,16 +11,17 @@ extend(THREE);
 const fromLngLat = MercatorCoordinate.fromLngLat
 
 /** react`-three-fiber` canvas inside `MapLibre` */
-export const Canvas = memo<CanvasProps>((props) => {
+export const Canvas = memo<CanvasProps>(({id, beforeId, ...props}) => {
 
-  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
 
   return <Layer
-    id={id}
+    id={id || reactId}
+    beforeId={beforeId}
     type="custom"
     renderingMode="3d"
     onAdd={onAdd}
     onRemove={onRemove}
     render={render}
   />
-})
+})