@rnmapbox/maps 10.1.23 → 10.1.25

package/src/web/components/Camera.tsx

@@ -1,32 +1,142 @@
-import React from 'react';
+import { Component, ContextType } from 'react';
 
+import { CameraProps, CameraRef } from '../../components/Camera';
+import { Position } from '../../types/Position';
 import MapContext from '../MapContext';
 
-class Camera extends React.Component<{
-  centerCoordinate: [number, number] | null;
-}> {
-  context!: React.ContextType<typeof MapContext>;
+function isArray<T>(value: T | ArrayLike<T>): value is ArrayLike<T> {
+  return (value as ArrayLike<T>).length !== undefined;
+}
+
+function buildMapboxGlPadding(
+  padding?: number | number[],
+): number | mapboxgl.PaddingOptions | undefined {
+  if (padding === undefined) {
+    // undefined
+    return undefined;
+  } else if (!isArray(padding)) {
+    // padding
+    return padding;
+  } else {
+    // Array
+    if (padding.length === 0) {
+      // []
+      return undefined;
+    } else if (padding.length < 2) {
+      // [padding]
+      return padding[0];
+    } else if (padding.length < 4) {
+      // [vertical, horizontal]
+      return {
+        left: padding[0],
+        right: padding[0],
+        top: padding[1],
+        bottom: padding[1],
+      };
+    } else {
+      // [top, right, bottom, left]
+      return {
+        top: padding[0],
+        right: padding[1],
+        bottom: padding[2],
+        left: padding[3],
+      };
+    }
+  }
+}
+
+class Camera
+  extends Component<
+    Pick<
+      CameraProps,
+      'centerCoordinate' | 'zoomLevel' | 'minZoomLevel' | 'maxZoomLevel'
+    >
+  >
+  implements Omit<CameraRef, 'setCamera'>
+{
+  context!: ContextType<typeof MapContext>;
 
   static contextType = MapContext;
   static UserTrackingModes = [];
 
   componentDidMount() {
     const { map } = this.context;
-    const { centerCoordinate } = this.props;
-    if (map && centerCoordinate) {
-      map.flyTo({ center: centerCoordinate });
+    if (!map) {
+      return;
+    }
+
+    // minZoomLevel
+    if (this.props.minZoomLevel !== undefined) {
+      map.setMinZoom(this.props.minZoomLevel);
+    }
+
+    // maxZoomLevel
+    if (this.props.maxZoomLevel !== undefined) {
+      map.setMaxZoom(this.props.maxZoomLevel);
+    }
+
+    // zoomLevel
+    if (this.props.zoomLevel !== undefined) {
+      map.setZoom(this.props.zoomLevel);
+    }
+
+    // centerCoordinate
+    if (this.props.centerCoordinate !== undefined) {
+      map.flyTo({
+        center: this.props.centerCoordinate.slice(0, 2) as [number, number],
+        duration: 0,
+      });
     }
   }
 
   fitBounds(
-    northEastCoordinates: [number, number],
-    southWestCoordinates: [number, number],
-    padding = 0,
-    animationDuration = 0.0,
+    northEastCoordinates: Position,
+    southWestCoordinates: Position,
+    padding: number | number[] = 0,
+    animationDuration = 0,
   ) {
     const { map } = this.context;
     if (map) {
-      map.fitBounds([northEastCoordinates, southWestCoordinates]);
+      map.fitBounds(
+        [
+          northEastCoordinates.slice(0, 2) as [number, number],
+          southWestCoordinates.slice(0, 2) as [number, number],
+        ],
+        {
+          padding: buildMapboxGlPadding(padding),
+          duration: animationDuration,
+        },
+      );
+    }
+  }
+
+  flyTo(centerCoordinate: Position, animationDuration = 2000) {
+    const { map } = this.context;
+    if (map) {
+      map.flyTo({
+        center: centerCoordinate.slice(0, 2) as [number, number],
+        duration: animationDuration,
+      });
+    }
+  }
+
+  moveTo(centerCoordinate: Position, animationDuration = 0) {
+    const { map } = this.context;
+    if (map) {
+      map.easeTo({
+        center: centerCoordinate.slice(0, 2) as [number, number],
+        duration: animationDuration,
+      });
+    }
+  }
+
+  zoomTo(zoomLevel: number, animationDuration = 2000) {
+    const { map } = this.context;
+    if (map) {
+      map.flyTo({
+        zoom: zoomLevel,
+        duration: animationDuration,
+      });
     }
   }
 

package/src/web/components/MarkerView.tsx

@@ -0,0 +1,77 @@
+import { Marker } from 'mapbox-gl';
+import {
+  forwardRef,
+  isValidElement,
+  memo,
+  ReactElement,
+  Ref,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import MapContext from '../MapContext';
+
+type MarkerViewProps = {
+  coordinate: [number, number];
+  children?: ReactElement;
+};
+
+function MarkerView(props: MarkerViewProps, ref: Ref<Marker>) {
+  const { map } = useContext(MapContext);
+
+  // Create marker instance
+  const marker: Marker = useMemo(() => {
+    const _marker = new Marker({
+      element: isValidElement(props.children)
+        ? document.createElement('div')
+        : undefined,
+    });
+
+    // Set marker coordinates
+    _marker.setLngLat(props.coordinate);
+
+    // Fix marker position
+    const { style } = _marker.getElement();
+    style.position = 'absolute';
+    style.top = '0';
+    style.left = '0';
+
+    return _marker;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Add marker to map
+  useEffect(() => {
+    if (map === undefined) {
+      return;
+    }
+
+    marker.addTo(map);
+
+    return () => {
+      marker.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map]);
+
+  // Expose marker instance
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useImperativeHandle(ref, () => marker, []);
+
+  // Update marker coordinates
+  const markerCoordinate = marker.getLngLat();
+  if (
+    markerCoordinate.lng !== props.coordinate[0] ||
+    markerCoordinate.lat !== props.coordinate[1]
+  ) {
+    marker.setLngLat([props.coordinate[0], props.coordinate[1]]);
+  }
+
+  // Inject children into marker element
+  return createPortal(props.children, marker.getElement());
+}
+
+export default memo(forwardRef(MarkerView));

package/src/web/index.js

@@ -1,12 +1,14 @@
 import MapboxModule from './MapboxModule';
 import Camera from './components/Camera';
 import MapView from './components/MapView';
+import MarkerView from './components/MarkerView';
 import Logger from './utils/Logger';
 
 const ExportedComponents = {
   Camera,
   MapView,
   Logger,
+  MarkerView,
 };
 
 const Mapbox = {
@@ -14,5 +16,5 @@ const Mapbox = {
   ...ExportedComponents,
 };
 
-export { Camera, MapView, Logger };
+export { Camera, MapView, Logger, MarkerView };
 export default Mapbox;