react-bkoi-gl 1.0.7 → 2.0.0

package/src/components/map.tsx

@@ -1,105 +1,111 @@
-import * as React from 'react';
-import {useState, useRef, useEffect, useContext, useMemo, useImperativeHandle} from 'react';
-
-import {MountedMapsContext} from './use-map';
-import Mapbox, {MapboxProps} from '../mapbox/mapbox';
-import createRef, {MapRef} from '../mapbox/create-ref';
-
-import type {CSSProperties} from 'react';
-import useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';
-import setGlobals, {GlobalSettings} from '../utils/set-globals';
-import type {MapLib, MapInstance, MapStyle, Callbacks} from '../types';
-
-export type MapContextValue<MapT extends MapInstance = MapInstance> = {
-  mapLib: MapLib<MapT>;
-  map: MapRef<MapT>;
+/* eslint-disable react/display-name */
+/* eslint-disable react/no-unknown-property */
+import * as React from "react";
+import {
+  useState,
+  useRef,
+  useEffect,
+  useContext,
+  useMemo,
+  useImperativeHandle,
+} from "react";
+
+import { MountedMapsContext } from "./use-map";
+import Maplibre, { MaplibreProps } from "../maplibre/maplibre";
+import createRef, { MapRef } from "../maplibre/create-ref";
+
+import type { CSSProperties } from "react";
+import useIsomorphicLayoutEffect from "../utils/use-isomorphic-layout-effect";
+import setGlobals, { GlobalSettings } from "../utils/set-globals";
+import type { MapLib, MapOptions } from "../types/lib";
+import { LogoControl } from "./logo-control";
+import { AttributionControl } from "./attribution-control";
+
+export type MapContextValue = {
+  mapLib: MapLib;
+  map: MapRef;
 };
 
 export const MapContext = React.createContext<MapContextValue>(null);
 
-type MapInitOptions<MapOptions> = Omit<
+type MapInitOptions = Omit<
   MapOptions,
-  'style' | 'container' | 'bounds' | 'fitBoundsOptions' | 'center'
+  "style" | "container" | "bounds" | "fitBoundsOptions" | "center"
 >;
 
-export type MapProps<
-  MapOptions,
-  StyleT extends MapStyle,
-  CallbacksT extends Callbacks,
-  MapT extends MapInstance
-> = MapInitOptions<MapOptions> &
-  MapboxProps<StyleT, CallbacksT> &
+export type MapProps = MapInitOptions &
+  MaplibreProps &
   GlobalSettings & {
-    mapLib?: MapLib<MapT> | Promise<MapLib<MapT>>;
+    mapLib?: MapLib | Promise<MapLib>;
     reuseMaps?: boolean;
     /** Map container id */
     id?: string;
     /** Map container CSS style */
     style?: CSSProperties;
-    children?: any;
-  };
-
-export default function Map<
-  MapOptions,
-  StyleT extends MapStyle,
-  CallbacksT extends Callbacks,
-  MapT extends MapInstance
->(
-  props: MapProps<MapOptions, StyleT, CallbacksT, MapT>,
-  ref: React.Ref<MapRef<MapT>>,
-  defaultLib: MapLib<MapT> | Promise<MapLib<MapT>>
-) {
+    children?: React.ReactNode;
+    /** Show Barikoi logo (default: true) */
+    showBarikoiLogo?: boolean;
+    /** Show Attribution (default: true) */
+    showAttribution?: boolean;
+  } & React.RefAttributes<MapRef>;
+
+function _Map(props: MapProps, ref: React.Ref<MapRef>) {
   const mountedMapsContext = useContext(MountedMapsContext);
-  const [mapInstance, setMapInstance] = useState<Mapbox<StyleT, CallbacksT, MapT>>(null);
+  const [mapInstance, setMapInstance] = useState<Maplibre>(null);
   const containerRef = useRef();
 
-  const {current: contextValue} = useRef<MapContextValue<MapT>>({mapLib: null, map: null});
+  const { current: contextValue } = useRef<MapContextValue>({
+    mapLib: null,
+    map: null,
+  });
 
   useEffect(() => {
     const mapLib = props.mapLib;
     let isMounted = true;
-    let mapbox: Mapbox<StyleT, CallbacksT, MapT>;
+    let maplibre: Maplibre;
 
-    Promise.resolve(mapLib || defaultLib)
-      .then((module: MapLib<MapT> | {default: MapLib<MapT>}) => {
+    Promise.resolve(mapLib || import("maplibre-gl"))
+      .then((module: MapLib | { default: MapLib }) => {
         if (!isMounted) {
           return;
         }
         if (!module) {
-          throw new Error('Invalid mapLib');
+          throw new Error("Invalid mapLib");
         }
-        const mapboxgl = 'Map' in module ? module : module.default;
+        const mapboxgl = "Map" in module ? module : module.default;
         if (!mapboxgl.Map) {
-          throw new Error('Invalid mapLib');
+          throw new Error("Invalid mapLib");
         }
 
-        // workerUrl & workerClass may change the result of supported()
-        // https://github.com/visgl/react-map-gl/discussions/2027
         setGlobals(mapboxgl, props);
-        if (!mapboxgl.supported || mapboxgl.supported(props)) {
-          if (props.reuseMaps) {
-            mapbox = Mapbox.reuse(props, containerRef.current);
-          }
-          if (!mapbox) {
-            mapbox = new Mapbox(mapboxgl.Map, props, containerRef.current);
-          }
-          contextValue.map = createRef(mapbox);
-          contextValue.mapLib = mapboxgl;
-
-          setMapInstance(mapbox);
-          mountedMapsContext?.onMapMount(contextValue.map, props.id);
-        } else {
-          throw new Error('Map is not supported by this browser');
+        if (props.reuseMaps) {
+          maplibre = Maplibre.reuse(props, containerRef.current);
         }
+        if (!maplibre) {
+          maplibre = new Maplibre(
+            mapboxgl.Map,
+            {
+              ...props,
+              // @ts-ignore
+              attributionControl: false,
+            },
+            containerRef.current,
+          );
+        }
+        contextValue.map = createRef(maplibre);
+        contextValue.mapLib = mapboxgl;
+
+        setMapInstance(maplibre);
+        mountedMapsContext?.onMapMount(contextValue.map, props.id);
       })
-      .catch(error => {
-        const {onError} = props;
+      .catch((error) => {
+        const { onError } = props;
         if (onError) {
           onError({
-            type: 'error',
+            type: "error",
             target: null,
             originalEvent: null,
-            error
+            error,
           });
         } else {
           console.error(error); // eslint-disable-line
@@ -108,12 +114,12 @@ export default function Map<
 
     return () => {
       isMounted = false;
-      if (mapbox) {
+      if (maplibre) {
         mountedMapsContext?.onMapUnmount(props.id);
         if (props.reuseMaps) {
-          mapbox.recycle();
+          maplibre.recycle();
         } else {
-          mapbox.destroy();
+          maplibre.destroy();
         }
       }
     };
@@ -129,16 +135,16 @@ export default function Map<
 
   const style: CSSProperties = useMemo(
     () => ({
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      ...props.style
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      ...props.style,
     }),
-    [props.style]
+    [props.style],
   );
 
   const CHILD_CONTAINER_STYLE = {
-    height: '100%'
+    height: "100%",
   };
 
   return (
@@ -146,6 +152,9 @@ export default function Map<
       {mapInstance && (
         <MapContext.Provider value={contextValue}>
           <div mapboxgl-children="" style={CHILD_CONTAINER_STYLE}>
+            {/* Automatically include Barikoi Logo and Attribution controls */}
+            <LogoControl position="bottom-left" />
+            <AttributionControl position="bottom-right" />
             {props.children}
           </div>
         </MapContext.Provider>
@@ -153,3 +162,5 @@ export default function Map<
     </div>
   );
 }
+
+export const Map: React.FC<MapProps> = React.forwardRef(_Map);

package/src/components/marker.ts

@@ -1,137 +1,155 @@
 /* global document */
-import * as React from 'react';
-import {createPortal} from 'react-dom';
-import {useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo} from 'react';
-import {applyReactStyle} from '../utils/apply-react-style';
-
-import type {MarkerEvent, MarkerDragEvent, PointLike, MarkerInstance} from '../types';
-
-import {MapContext} from './map';
-import {arePointsEqual} from '../utils/deep-equal';
-
-export type MarkerProps<OptionsT, MarkerT extends MarkerInstance> = OptionsT & {
+import * as React from "react";
+import { createPortal } from "react-dom";
+import {
+  useImperativeHandle,
+  useEffect,
+  useMemo,
+  useRef,
+  useContext,
+  forwardRef,
+  memo,
+} from "react";
+import { applyReactStyle } from "../utils/apply-react-style";
+
+import type {
+  Popup as PopupInstance,
+  Marker as MarkerInstance,
+  MarkerOptions,
+} from "../types/lib";
+import type { MarkerEvent, MarkerDragEvent } from "../types/events";
+
+import { MapContext } from "./map";
+import { arePointsEqual } from "../utils/deep-equal";
+import { compareClassNames } from "../utils/compare-class-names";
+
+export type MarkerProps = MarkerOptions & {
   /** Longitude of the anchor location */
   longitude: number;
   /** Latitude of the anchor location */
   latitude: number;
 
-  // These types will be further constraint by OptionsT
-  draggable?: boolean;
-  offset?: PointLike;
-  pitchAlignment?: string;
-  rotation?: number;
-  rotationAlignment?: string;
-  popup?: any;
+  popup?: PopupInstance;
 
   /** CSS style override, applied to the control's container */
   style?: React.CSSProperties;
-  onClick?: (e: MarkerEvent<MarkerT, MouseEvent>) => void;
-  onDragStart?: (e: MarkerDragEvent<MarkerT>) => void;
-  onDrag?: (e: MarkerDragEvent<MarkerT>) => void;
-  onDragEnd?: (e: MarkerDragEvent<MarkerT>) => void;
+  onClick?: (e: MarkerEvent<MouseEvent>) => void;
+  onDragStart?: (e: MarkerDragEvent) => void;
+  onDrag?: (e: MarkerDragEvent) => void;
+  onDragEnd?: (e: MarkerDragEvent) => void;
   children?: React.ReactNode;
 };
 
 /* eslint-disable complexity,max-statements */
-function Marker<MarkerOptions, MarkerT extends MarkerInstance>(
-  props: MarkerProps<MarkerOptions, MarkerT>,
-  ref: React.Ref<MarkerT>
-) {
-  const {map, mapLib} = useContext(MapContext);
-  const thisRef = useRef({props});
-  thisRef.current.props = props;
-
-  const marker: MarkerT = useMemo(() => {
-    let hasChildren = false;
-    React.Children.forEach(props.children, el => {
-      if (el) {
-        hasChildren = true;
-      }
-    });
-    const options = {
-      ...props,
-      element: hasChildren ? document.createElement('div') : null
-    };
-
-    const mk = new mapLib.Marker(options) as MarkerT;
-    mk.setLngLat([props.longitude, props.latitude]);
-
-    mk.getElement().addEventListener('click', (e: MouseEvent) => {
-      thisRef.current.props.onClick?.({
-        type: 'click',
-        target: mk,
-        originalEvent: e
+export const Marker: React.FC<MarkerProps> = memo(
+  forwardRef((props: MarkerProps, ref: React.Ref<MarkerInstance>) => {
+    const { map, mapLib } = useContext(MapContext);
+    const thisRef = useRef({ props });
+
+    const marker: MarkerInstance = useMemo(() => {
+      let hasChildren = false;
+      React.Children.forEach(props.children, (el) => {
+        if (el) {
+          hasChildren = true;
+        }
+      });
+      const options = {
+        ...props,
+        element: hasChildren ? document.createElement("div") : undefined,
+      };
+
+      const mk = new mapLib.Marker(options);
+      mk.setLngLat([props.longitude, props.latitude]);
+
+      mk.getElement().addEventListener("click", (e: MouseEvent) => {
+        thisRef.current.props.onClick?.({
+          type: "click",
+          target: mk,
+          originalEvent: e,
+        });
+      });
+
+      mk.on("dragstart", (e) => {
+        const evt = e as MarkerDragEvent;
+        evt.lngLat = marker.getLngLat();
+        thisRef.current.props.onDragStart?.(evt);
+      });
+      mk.on("drag", (e) => {
+        const evt = e as MarkerDragEvent;
+        evt.lngLat = marker.getLngLat();
+        thisRef.current.props.onDrag?.(evt);
+      });
+      mk.on("dragend", (e) => {
+        const evt = e as MarkerDragEvent;
+        evt.lngLat = marker.getLngLat();
+        thisRef.current.props.onDragEnd?.(evt);
       });
-    });
-
-    mk.on('dragstart', e => {
-      const evt = e as MarkerDragEvent<MarkerT>;
-      evt.lngLat = marker.getLngLat();
-      thisRef.current.props.onDragStart?.(evt);
-    });
-    mk.on('drag', e => {
-      const evt = e as MarkerDragEvent<MarkerT>;
-      evt.lngLat = marker.getLngLat();
-      thisRef.current.props.onDrag?.(evt);
-    });
-    mk.on('dragend', e => {
-      const evt = e as MarkerDragEvent<MarkerT>;
-      evt.lngLat = marker.getLngLat();
-      thisRef.current.props.onDragEnd?.(evt);
-    });
-
-    return mk;
-  }, []);
-
-  useEffect(() => {
-    marker.addTo(map.getMap());
-
-    return () => {
-      marker.remove();
-    };
-  }, []);
-
-  const {
-    longitude,
-    latitude,
-    offset,
-    style,
-    draggable = false,
-    popup = null,
-    rotation = 0,
-    rotationAlignment = 'auto',
-    pitchAlignment = 'auto'
-  } = props;
-
-  useEffect(() => {
-    applyReactStyle(marker.getElement(), style);
-  }, [style]);
-
-  useImperativeHandle(ref, () => marker, []);
-
-  if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {
-    marker.setLngLat([longitude, latitude]);
-  }
-  if (offset && !arePointsEqual(marker.getOffset(), offset)) {
-    marker.setOffset(offset);
-  }
-  if (marker.isDraggable() !== draggable) {
-    marker.setDraggable(draggable);
-  }
-  if (marker.getRotation() !== rotation) {
-    marker.setRotation(rotation);
-  }
-  if (marker.getRotationAlignment() !== rotationAlignment) {
-    marker.setRotationAlignment(rotationAlignment);
-  }
-  if (marker.getPitchAlignment() !== pitchAlignment) {
-    marker.setPitchAlignment(pitchAlignment);
-  }
-  if (marker.getPopup() !== popup) {
-    marker.setPopup(popup);
-  }
-
-  return createPortal(props.children, marker.getElement());
-}
-
-export default memo(forwardRef(Marker));
+
+      return mk;
+    }, []);
+
+    useEffect(() => {
+      marker.addTo(map.getMap());
+
+      return () => {
+        marker.remove();
+      };
+    }, []);
+
+    const {
+      longitude,
+      latitude,
+      offset,
+      style,
+      draggable = false,
+      popup = null,
+      rotation = 0,
+      rotationAlignment = "auto",
+      pitchAlignment = "auto",
+    } = props;
+
+    useEffect(() => {
+      applyReactStyle(marker.getElement(), style);
+    }, [style]);
+
+    useImperativeHandle(ref, () => marker, []);
+
+    const oldProps = thisRef.current.props;
+    if (
+      marker.getLngLat().lng !== longitude ||
+      marker.getLngLat().lat !== latitude
+    ) {
+      marker.setLngLat([longitude, latitude]);
+    }
+    if (offset && !arePointsEqual(marker.getOffset(), offset)) {
+      marker.setOffset(offset);
+    }
+    if (marker.isDraggable() !== draggable) {
+      marker.setDraggable(draggable);
+    }
+    if (marker.getRotation() !== rotation) {
+      marker.setRotation(rotation);
+    }
+    if (marker.getRotationAlignment() !== rotationAlignment) {
+      marker.setRotationAlignment(rotationAlignment);
+    }
+    if (marker.getPitchAlignment() !== pitchAlignment) {
+      marker.setPitchAlignment(pitchAlignment);
+    }
+    if (marker.getPopup() !== popup) {
+      marker.setPopup(popup);
+    }
+    const classNameDiff = compareClassNames(
+      oldProps.className,
+      props.className,
+    );
+    if (classNameDiff) {
+      for (const c of classNameDiff) {
+        marker.toggleClassName(c);
+      }
+    }
+
+    thisRef.current.props = props;
+    return createPortal(props.children, marker.getElement());
+  }),
+);

package/src/components/navigation-control.ts

@@ -1,22 +1,20 @@
-import * as React from 'react';
-import {useEffect, memo} from 'react';
-import {applyReactStyle} from '../utils/apply-react-style';
-import useControl from './use-control';
+import * as React from "react";
+import { useEffect, memo } from "react";
+import { applyReactStyle } from "../utils/apply-react-style";
+import { useControl } from "./use-control";
 
-import type {ControlPosition, NavigationControlInstance} from '../types';
+import type { ControlPosition, NavigationControlOptions } from "../types/lib";
 
-export type NavigationControlProps<OptionsT> = OptionsT & {
+export type NavigationControlProps = NavigationControlOptions & {
   /** Placement of the control relative to the map. */
   position?: ControlPosition;
   /** CSS style override, applied to the control's container */
   style?: React.CSSProperties;
 };
 
-function NavigationControl<NavigationControlOptions, ControlT extends NavigationControlInstance>(
-  props: NavigationControlProps<NavigationControlOptions>
-): null {
-  const ctrl = useControl<ControlT>(({mapLib}) => new mapLib.NavigationControl(props) as ControlT, {
-    position: props.position
+function _NavigationControl(props: NavigationControlProps) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.NavigationControl(props), {
+    position: props.position,
   });
 
   useEffect(() => {
@@ -26,4 +24,5 @@ function NavigationControl<NavigationControlOptions, ControlT extends Navigation
   return null;
 }
 
-export default memo(NavigationControl);
+export const NavigationControl: React.FC<NavigationControlProps> =
+  memo(_NavigationControl);