react-bkoi-gl 1.0.1

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "react-bkoi-gl",
+  "version": "1.0.1",
+  "description": "React components for Barikoi GL JS",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "author": "barikoi",
+  "readme": "README.md",
+  "license": "MIT",
+  "homepage": "https://docs.barikoi.com/docs/maps-api",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./bkoi-gl": {
+      "types": "./dist/exports-bkoi-gl.d.ts",
+      "require": "./dist/exports-bkoi-gl.cjs",
+      "import": "./dist/exports-bkoi-gl.js"
+    },
+    "./styles": {
+      "import": "./dist/styles/react-bkoi-gl.css",
+      "default": "./dist/styles/react-bkoi-gl.css"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "bkoi-gl",
+    "README.md"
+  ],
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "build": "ocular-clean && ocular-build && node scripts/copy-css.js",
+    "lint": "ocular-lint",
+    "cover": "ocular-test cover",
+    "test": "yarn typecheck && ocular-test",
+    "test-fast": "yarn typecheck && ocular-test node",
+    "metrics": "ocular-metrics",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@maplibre/maplibre-gl-style-spec": "^19.2.1",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "bkoi-gl": ">=2.0.0",
+    "mapbox-gl": "^1.13.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.4.1",
+    "@commitlint/config-conventional": "^19.4.1",
+    "bkoi-gl": ">=2.0.0",
+    "@types/mapbox-gl": "^3.4.0",
+    "@types/react": "^16.0.0",
+    "husky": "^9.1.5",
+    "ocular-dev-tools": "2.0.0-alpha.15",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "keywords": [
+    "barikoi",
+    "bkoi-gl",
+    "react",
+    "react-bkoi-gl",
+    "react bkoi"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/barikoi/react-bkoi-gl.git"
+  }
+}

package/src/components/attribution-control.ts

@@ -0,0 +1,32 @@
+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, AttributionControlInstance} from '../types';
+
+export type AttributionControlProps<OptionsT> = OptionsT & {
+  /** Placement of the control relative to the map. */
+  position?: ControlPosition;
+  /** CSS style override, applied to the control's container */
+  style?: React.CSSProperties;
+};
+
+function AttributionControl<AttributionControlOptions, ControlT extends AttributionControlInstance>(
+  props: AttributionControlProps<AttributionControlOptions>
+): null {
+  const ctrl = useControl<ControlT>(
+    ({mapLib}) => new mapLib.AttributionControl(props) as ControlT,
+    {
+      position: props.position
+    }
+  );
+
+  useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+
+  return null;
+}
+
+export default memo(AttributionControl);

package/src/components/fullscreen-control.tsx

@@ -0,0 +1,37 @@
+/* global document */
+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, FullscreenControlInstance} from '../types';
+
+export type FullscreenControlProps<OptionsT> = Omit<OptionsT, 'container'> & {
+  /** Id of the DOM element which should be made full screen. By default, the map container
+   * element will be made full screen. */
+  containerId?: string;
+  /** Placement of the control relative to the map. */
+  position?: ControlPosition;
+  /** CSS style override, applied to the control's container */
+  style?: React.CSSProperties;
+};
+
+function FullscreenControl<FullscreenControlOptions, ControlT extends FullscreenControlInstance>(
+  props: FullscreenControlProps<FullscreenControlOptions>
+): null {
+  const ctrl = useControl<ControlT>(
+    ({mapLib}) =>
+      new mapLib.FullscreenControl({
+        container: props.containerId && document.getElementById(props.containerId)
+      }) as ControlT,
+    {position: props.position}
+  );
+
+  useEffect(() => {
+    applyReactStyle(ctrl._controlContainer, props.style);
+  }, [props.style]);
+
+  return null;
+}
+
+export default memo(FullscreenControl);

package/src/components/geolocate-control.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import {useImperativeHandle, useRef, useEffect, forwardRef, memo} from 'react';
+import {applyReactStyle} from '../utils/apply-react-style';
+import useControl from './use-control';
+
+import type {
+  ControlPosition,
+  GeolocateControlInstance,
+  GeolocateEvent,
+  GeolocateResultEvent,
+  GeolocateErrorEvent
+} from '../types';
+
+export type GeolocateControlProps<
+  OptionsT,
+  ControlT extends GeolocateControlInstance
+> = OptionsT & {
+  /** Placement of the control relative to the map. */
+  position?: ControlPosition;
+  /** CSS style override, applied to the control's container */
+  style?: React.CSSProperties;
+
+  /** Called on each Geolocation API position update that returned as success. */
+  onGeolocate?: (e: GeolocateResultEvent<ControlT>) => void;
+  /** Called on each Geolocation API position update that returned as an error. */
+  onError?: (e: GeolocateErrorEvent<ControlT>) => void;
+  /** Called on each Geolocation API position update that returned as success but user position
+   * is out of map `maxBounds`. */
+  onOutOfMaxBounds?: (e: GeolocateResultEvent<ControlT>) => void;
+  /** Called when the GeolocateControl changes to the active lock state. */
+  onTrackUserLocationStart?: (e: GeolocateEvent<ControlT>) => void;
+  /** Called when the GeolocateControl changes to the background state. */
+  onTrackUserLocationEnd?: (e: GeolocateEvent<ControlT>) => void;
+};
+
+function GeolocateControl<GeolocateControlOptions, ControlT extends GeolocateControlInstance>(
+  props: GeolocateControlProps<GeolocateControlOptions, ControlT>,
+  ref: React.Ref<ControlT>
+) {
+  const thisRef = useRef({props});
+
+  const ctrl = useControl<ControlT>(
+    ({mapLib}) => {
+      const gc = new mapLib.GeolocateControl(props) as ControlT;
+
+      // Hack: fix GeolocateControl reuse
+      // When using React strict mode, the component is mounted twice.
+      // GeolocateControl's UI creation is asynchronous. Removing and adding it back causes the UI to be initialized twice.
+      // @ts-expect-error private method
+      const setupUI = gc._setupUI;
+      // @ts-expect-error private method
+      gc._setupUI = args => {
+        if (!gc._container.hasChildNodes()) {
+          setupUI(args);
+        }
+      };
+
+      gc.on('geolocate', e => {
+        thisRef.current.props.onGeolocate?.(e as GeolocateResultEvent<ControlT>);
+      });
+      gc.on('error', e => {
+        thisRef.current.props.onError?.(e as GeolocateErrorEvent<ControlT>);
+      });
+      gc.on('outofmaxbounds', e => {
+        thisRef.current.props.onOutOfMaxBounds?.(e as GeolocateResultEvent<ControlT>);
+      });
+      gc.on('trackuserlocationstart', e => {
+        thisRef.current.props.onTrackUserLocationStart?.(e as GeolocateEvent<ControlT>);
+      });
+      gc.on('trackuserlocationend', e => {
+        thisRef.current.props.onTrackUserLocationEnd?.(e as GeolocateEvent<ControlT>);
+      });
+
+      return gc;
+    },
+    {position: props.position}
+  );
+
+  thisRef.current.props = props;
+
+  useImperativeHandle(ref, () => ctrl, []);
+
+  useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+
+  return null;
+}
+
+export default memo(forwardRef(GeolocateControl));

package/src/components/layer.ts

@@ -0,0 +1,133 @@
+import {useContext, useEffect, useMemo, useState, useRef} from 'react';
+import {MapContext} from './map';
+import assert from '../utils/assert';
+import {deepEqual} from '../utils/deep-equal';
+
+import type {MapInstance, CustomLayerInterface, ILayer} from '../types';
+
+// Omiting property from a union type, see
+// https://github.com/microsoft/TypeScript/issues/39556#issuecomment-656925230
+type OptionalId<T> = T extends {id: string} ? Omit<T, 'id'> & {id?: string} : T;
+type OptionalSource<T> = T extends {source: string} ? Omit<T, 'source'> & {source?: string} : T;
+
+export type LayerProps<LayerT> = OptionalSource<OptionalId<LayerT>> & {
+  /** If set, the layer will be inserted before the specified layer */
+  beforeId?: string;
+};
+
+/* eslint-disable complexity, max-statements */
+function updateLayer<LayerT extends ILayer>(
+  map: MapInstance,
+  id: string,
+  props: LayerProps<LayerT>,
+  prevProps: LayerProps<LayerT>
+) {
+  assert(props.id === prevProps.id, 'layer id changed');
+  assert(props.type === prevProps.type, 'layer type changed');
+
+  if (props.type === 'custom' || prevProps.type === 'custom') {
+    return;
+  }
+
+  const {layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId} = props;
+
+  if (beforeId !== prevProps.beforeId) {
+    map.moveLayer(id, beforeId);
+  }
+  if (layout !== prevProps.layout) {
+    const prevLayout = prevProps.layout || {};
+    for (const key in layout) {
+      if (!deepEqual(layout[key], prevLayout[key])) {
+        map.setLayoutProperty(id, key, layout[key]);
+      }
+    }
+    for (const key in prevLayout) {
+      if (!layout.hasOwnProperty(key)) {
+        map.setLayoutProperty(id, key, undefined);
+      }
+    }
+  }
+  if (paint !== prevProps.paint) {
+    const prevPaint = prevProps.paint || {};
+    for (const key in paint) {
+      if (!deepEqual(paint[key], prevPaint[key])) {
+        map.setPaintProperty(id, key, paint[key]);
+      }
+    }
+    for (const key in prevPaint) {
+      if (!paint.hasOwnProperty(key)) {
+        map.setPaintProperty(id, key, undefined);
+      }
+    }
+  }
+
+  if (!deepEqual(filter, prevProps.filter)) {
+    map.setFilter(id, filter);
+  }
+  if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {
+    map.setLayerZoomRange(id, minzoom, maxzoom);
+  }
+}
+
+function createLayer<LayerT extends ILayer>(
+  map: MapInstance,
+  id: string,
+  props: LayerProps<LayerT>
+) {
+  // @ts-ignore
+  if (map.style && map.style._loaded && (!('source' in props) || map.getSource(props.source))) {
+    const options: LayerProps<LayerT> = {...props, id};
+    delete options.beforeId;
+
+    // @ts-ignore
+    map.addLayer(options, props.beforeId);
+  }
+}
+
+/* eslint-enable complexity, max-statements */
+
+let layerCounter = 0;
+
+function Layer<LayerT extends ILayer>(props: LayerProps<LayerT | CustomLayerInterface>) {
+  const map = useContext(MapContext).map.getMap();
+  const propsRef = useRef(props);
+  const [, setStyleLoaded] = useState(0);
+
+  const id = useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);
+
+  useEffect(() => {
+    if (map) {
+      const forceUpdate = () => setStyleLoaded(version => version + 1);
+      map.on('styledata', forceUpdate);
+      forceUpdate();
+
+      return () => {
+        map.off('styledata', forceUpdate);
+        // @ts-ignore
+        if (map.style && map.style._loaded && map.getLayer(id)) {
+          map.removeLayer(id);
+        }
+      };
+    }
+    return undefined;
+  }, [map]);
+
+  // @ts-ignore
+  const layer = map && map.style && map.getLayer(id);
+  if (layer) {
+    try {
+      updateLayer(map, id, props, propsRef.current);
+    } catch (error) {
+      console.warn(error); // eslint-disable-line
+    }
+  } else {
+    createLayer(map, id, props);
+  }
+
+  // Store last rendered props
+  propsRef.current = props;
+
+  return null;
+}
+
+export default Layer;

package/src/components/map.tsx

@@ -0,0 +1,155 @@
+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>;
+};
+
+export const MapContext = React.createContext<MapContextValue>(null);
+
+type MapInitOptions<MapOptions> = Omit<
+  MapOptions,
+  'style' | 'container' | 'bounds' | 'fitBoundsOptions' | 'center'
+>;
+
+export type MapProps<
+  MapOptions,
+  StyleT extends MapStyle,
+  CallbacksT extends Callbacks,
+  MapT extends MapInstance
+> = MapInitOptions<MapOptions> &
+  MapboxProps<StyleT, CallbacksT> &
+  GlobalSettings & {
+    mapLib?: MapLib<MapT> | Promise<MapLib<MapT>>;
+    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>>
+) {
+  const mountedMapsContext = useContext(MountedMapsContext);
+  const [mapInstance, setMapInstance] = useState<Mapbox<StyleT, CallbacksT, MapT>>(null);
+  const containerRef = useRef();
+
+  const {current: contextValue} = useRef<MapContextValue<MapT>>({mapLib: null, map: null});
+
+  useEffect(() => {
+    const mapLib = props.mapLib;
+    let isMounted = true;
+    let mapbox: Mapbox<StyleT, CallbacksT, MapT>;
+
+    Promise.resolve(mapLib || defaultLib)
+      .then((module: MapLib<MapT> | {default: MapLib<MapT>}) => {
+        if (!isMounted) {
+          return;
+        }
+        if (!module) {
+          throw new Error('Invalid mapLib');
+        }
+        const mapboxgl = 'Map' in module ? module : module.default;
+        if (!mapboxgl.Map) {
+          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');
+        }
+      })
+      .catch(error => {
+        const {onError} = props;
+        if (onError) {
+          onError({
+            type: 'error',
+            target: null,
+            originalEvent: null,
+            error
+          });
+        } else {
+          console.error(error); // eslint-disable-line
+        }
+      });
+
+    return () => {
+      isMounted = false;
+      if (mapbox) {
+        mountedMapsContext?.onMapUnmount(props.id);
+        if (props.reuseMaps) {
+          mapbox.recycle();
+        } else {
+          mapbox.destroy();
+        }
+      }
+    };
+  }, []);
+
+  useIsomorphicLayoutEffect(() => {
+    if (mapInstance) {
+      mapInstance.setProps(props);
+    }
+  });
+
+  useImperativeHandle(ref, () => contextValue.map, [mapInstance]);
+
+  const style: CSSProperties = useMemo(
+    () => ({
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      ...props.style
+    }),
+    [props.style]
+  );
+
+  const CHILD_CONTAINER_STYLE = {
+    height: '100%'
+  };
+
+  return (
+    <div id={props.id} ref={containerRef} style={style}>
+      {mapInstance && (
+        <MapContext.Provider value={contextValue}>
+          <div mapboxgl-children="" style={CHILD_CONTAINER_STYLE}>
+            {props.children}
+          </div>
+        </MapContext.Provider>
+      )}
+    </div>
+  );
+}

package/src/components/marker.ts

@@ -0,0 +1,137 @@
+/* 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 & {
+  /** 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;
+
+  /** 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;
+  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
+      });
+    });
+
+    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));

package/src/components/navigation-control.ts

@@ -0,0 +1,29 @@
+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';
+
+export type NavigationControlProps<OptionsT> = OptionsT & {
+  /** 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
+  });
+
+  useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+
+  return null;
+}
+
+export default memo(NavigationControl);