react-bkoi-gl 2.0.0 → 2.1.0

package/src/components/layer.ts

@@ -1,141 +0,0 @@
-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 { Map as MapInstance, CustomLayerInterface } from "../types/lib";
-import type { LayerSpecification } from "../types/style-spec";
-
-// 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 = (
-  | OptionalSource<OptionalId<LayerSpecification>>
-  | CustomLayerInterface
-) & {
-  /** If set, the layer will be inserted before the specified layer */
-  beforeId?: string;
-};
-
-/* eslint-disable complexity, max-statements */
-function updateLayer(
-  map: MapInstance,
-  id: string,
-  props: LayerProps,
-  prevProps: LayerProps,
-) {
-  assert(props.id === prevProps.id, "layer id changed");
-  assert(props.type === prevProps.type, "layer type changed");
-
-  if (props.type === "custom" || prevProps.type === "custom") {
-    return;
-  }
-
-  // @ts-ignore filter does not exist in some Layer types
-  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);
-      }
-    }
-  }
-
-  // @ts-ignore filter does not exist in some Layer types
-  if (!deepEqual(filter, prevProps.filter)) {
-    map.setFilter(id, filter);
-  }
-  if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {
-    map.setLayerZoomRange(id, minzoom, maxzoom);
-  }
-}
-
-function createLayer(map: MapInstance, id: string, props: LayerProps) {
-  // @ts-ignore
-  if (
-    map.style &&
-    map.style._loaded &&
-    (!("source" in props) || map.getSource(props.source))
-  ) {
-    const options: LayerProps = { ...props, id };
-    delete options.beforeId;
-
-    // @ts-ignore
-    map.addLayer(options, props.beforeId);
-  }
-}
-
-/* eslint-enable complexity, max-statements */
-
-let layerCounter = 0;
-
-export function Layer(props: LayerProps) {
-  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;
-}

package/src/components/logo-control.ts

@@ -1,44 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
-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, LogoControlOptions } from "../types/lib";
-
-export type LogoControlProps = LogoControlOptions & {
-  /** Placement of the control relative to the map. */
-  position?: ControlPosition;
-  /** CSS style override, applied to the control's container */
-  style?: React.CSSProperties;
-};
-
-function _LogoControl(props: LogoControlProps) {
-  const ctrl = useControl(({ mapLib }) => new mapLib.LogoControl(props), {
-    position: props.position,
-  });
-
-  useEffect(() => {
-    applyReactStyle(ctrl._container, props.style);
-
-    // Update the DOM structure and attributes directly
-    const logoElement = ctrl._container?.querySelector(
-      ".maplibregl-ctrl-logo",
-    ) as HTMLAnchorElement | null;
-    if (logoElement) {
-      // Update the link attributes
-      logoElement.href = "https://barikoi.com/";
-      logoElement.setAttribute("aria-label", "Barikoi logo");
-      logoElement.target = "_blank";
-      logoElement.rel = "noopener nofollow";
-      logoElement.style.cursor = "pointer";
-
-      // Remove any existing click handlers
-      logoElement.replaceWith(logoElement.cloneNode(true));
-    }
-  }, [props.style, ctrl._container]);
-
-  return null;
-}
-
-export const LogoControl: React.FC<LogoControlProps> = memo(_LogoControl);

package/src/components/map.tsx

@@ -1,166 +0,0 @@
-/* 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 = Omit<
-  MapOptions,
-  "style" | "container" | "bounds" | "fitBoundsOptions" | "center"
->;
-
-export type MapProps = MapInitOptions &
-  MaplibreProps &
-  GlobalSettings & {
-    mapLib?: MapLib | Promise<MapLib>;
-    reuseMaps?: boolean;
-    /** Map container id */
-    id?: string;
-    /** Map container CSS style */
-    style?: CSSProperties;
-    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<Maplibre>(null);
-  const containerRef = useRef();
-
-  const { current: contextValue } = useRef<MapContextValue>({
-    mapLib: null,
-    map: null,
-  });
-
-  useEffect(() => {
-    const mapLib = props.mapLib;
-    let isMounted = true;
-    let maplibre: Maplibre;
-
-    Promise.resolve(mapLib || import("maplibre-gl"))
-      .then((module: MapLib | { default: MapLib }) => {
-        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");
-        }
-
-        setGlobals(mapboxgl, props);
-        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;
-        if (onError) {
-          onError({
-            type: "error",
-            target: null,
-            originalEvent: null,
-            error,
-          });
-        } else {
-          console.error(error); // eslint-disable-line
-        }
-      });
-
-    return () => {
-      isMounted = false;
-      if (maplibre) {
-        mountedMapsContext?.onMapUnmount(props.id);
-        if (props.reuseMaps) {
-          maplibre.recycle();
-        } else {
-          maplibre.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}>
-            {/* Automatically include Barikoi Logo and Attribution controls */}
-            <LogoControl position="bottom-left" />
-            <AttributionControl position="bottom-right" />
-            {props.children}
-          </div>
-        </MapContext.Provider>
-      )}
-    </div>
-  );
-}
-
-export const Map: React.FC<MapProps> = React.forwardRef(_Map);

package/src/components/marker.ts

@@ -1,155 +0,0 @@
-/* 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 {
-  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;
-
-  popup?: PopupInstance;
-
-  /** CSS style override, applied to the control's container */
-  style?: React.CSSProperties;
-  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 */
-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);
-      });
-
-      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,28 +0,0 @@
-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, NavigationControlOptions } from "../types/lib";
-
-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(props: NavigationControlProps) {
-  const ctrl = useControl(({ mapLib }) => new mapLib.NavigationControl(props), {
-    position: props.position,
-  });
-
-  useEffect(() => {
-    applyReactStyle(ctrl._container, props.style);
-  }, [props.style]);
-
-  return null;
-}
-
-export const NavigationControl: React.FC<NavigationControlProps> =
-  memo(_NavigationControl);

package/src/components/popup.ts

@@ -1,113 +0,0 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */
-/* 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 { Popup as PopupInstance, PopupOptions } from "../types/lib";
-import type { PopupEvent } from "../types/events";
-
-import { MapContext } from "./map";
-import { deepEqual } from "../utils/deep-equal";
-import { compareClassNames } from "../utils/compare-class-names";
-
-export type PopupProps = PopupOptions & {
-  /** Longitude of the anchor location */
-  longitude: number;
-  /** Latitude of the anchor location */
-  latitude: number;
-
-  /** CSS style override, applied to the control's container */
-  style?: React.CSSProperties;
-
-  onOpen?: (e: PopupEvent) => void;
-  onClose?: (e: PopupEvent) => void;
-  children?: React.ReactNode;
-};
-
-/* eslint-disable complexity,max-statements */
-export const Popup: React.FC<PopupProps> = memo(
-  forwardRef((props: PopupProps, ref: React.Ref<PopupInstance>) => {
-    const { map, mapLib } = useContext(MapContext);
-    const container = useMemo(() => {
-      return document.createElement("div");
-    }, []);
-    const thisRef = useRef({ props });
-
-    const popup: PopupInstance = useMemo(() => {
-      const options = { ...props };
-      const pp = new mapLib.Popup(options);
-      pp.setLngLat([props.longitude, props.latitude]);
-      pp.once("open", (e) => {
-        thisRef.current.props.onOpen?.(e as PopupEvent);
-      });
-      return pp;
-    }, []);
-
-    useEffect(() => {
-      const onClose = (e) => {
-        thisRef.current.props.onClose?.(e as PopupEvent);
-      };
-      popup.on("close", onClose);
-      popup.setDOMContent(container).addTo(map.getMap());
-
-      return () => {
-        // https://github.com/visgl/react-map-gl/issues/1825
-        // onClose should not be fired if the popup is removed by unmounting
-        // When using React strict mode, the component is mounted twice.
-        // Firing the onClose callback here would be a false signal to remove the component.
-        popup.off("close", onClose);
-        if (popup.isOpen()) {
-          popup.remove();
-        }
-      };
-    }, []);
-
-    useEffect(() => {
-      applyReactStyle(popup.getElement(), props.style);
-    }, [props.style]);
-
-    useImperativeHandle(ref, () => popup, []);
-
-    if (popup.isOpen()) {
-      const oldProps = thisRef.current.props;
-      if (
-        popup.getLngLat().lng !== props.longitude ||
-        popup.getLngLat().lat !== props.latitude
-      ) {
-        popup.setLngLat([props.longitude, props.latitude]);
-      }
-      if (props.offset && !deepEqual(oldProps.offset, props.offset)) {
-        popup.setOffset(props.offset);
-      }
-      if (
-        oldProps.anchor !== props.anchor ||
-        oldProps.maxWidth !== props.maxWidth
-      ) {
-        popup.options.anchor = props.anchor;
-        popup.setMaxWidth(props.maxWidth);
-      }
-      const classNameDiff = compareClassNames(
-        oldProps.className,
-        props.className,
-      );
-      if (classNameDiff) {
-        for (const c of classNameDiff) {
-          popup.toggleClassName(c);
-        }
-      }
-      thisRef.current.props = props;
-    }
-
-    return createPortal(props.children, container);
-  }),
-);

package/src/components/scale-control.ts

@@ -1,44 +0,0 @@
-import * as React from "react";
-import { useEffect, useRef, memo } from "react";
-import { applyReactStyle } from "../utils/apply-react-style";
-import { useControl } from "./use-control";
-
-import type { ControlPosition, ScaleControlOptions } from "../types/lib";
-
-export type ScaleControlProps = ScaleControlOptions & {
-  // These props will be further constraint by OptionsT
-  unit?: string;
-  maxWidth?: number;
-
-  /** Placement of the control relative to the map. */
-  position?: ControlPosition;
-  /** CSS style override, applied to the control's container */
-  style?: React.CSSProperties;
-};
-
-function _ScaleControl(props: ScaleControlProps) {
-  const ctrl = useControl(({ mapLib }) => new mapLib.ScaleControl(props), {
-    position: props.position,
-  });
-  const propsRef = useRef<ScaleControlProps>(props);
-
-  const prevProps = propsRef.current;
-  propsRef.current = props;
-
-  const { style } = props;
-
-  if (props.maxWidth !== undefined && props.maxWidth !== prevProps.maxWidth) {
-    ctrl.options.maxWidth = props.maxWidth;
-  }
-  if (props.unit !== undefined && props.unit !== prevProps.unit) {
-    ctrl.setUnit(props.unit);
-  }
-
-  useEffect(() => {
-    applyReactStyle(ctrl._container, style);
-  }, [style]);
-
-  return null;
-}
-
-export const ScaleControl: React.FC<ScaleControlProps> = memo(_ScaleControl);