react-bkoi-gl 1.0.7 → 2.0.0

package/src/types/common.ts

@@ -1,73 +1,15 @@
-import type GeoJSON from 'geojson';
-
-/* Data types that are compatible with both mapbox and maplibre. Not exposed to the end user. */
-
-/** @mapbox/point-geometry */
-export interface Point {
-  x: number;
-  y: number;
-}
-export type PointLike = Point | [number, number];
-
-export interface LngLat {
-  lng: number;
-  lat: number;
-
-  wrap(): LngLat;
-  /** Return a LngLat as an array */
-  toArray(): number[];
-  /** Return a LngLat as a string */
-  toString(): string;
-  /** Returns the approximate distance between a pair of coordinates in meters
-   * Uses the Haversine Formula (from R.W. Sinnott, "Virtues of the Haversine", Sky and Telescope, vol. 68, no. 2, 1984, p. 159) */
-  distanceTo(lngLat: LngLat): number;
-}
-export type LngLatLike =
-  | [number, number]
-  | LngLat
-  | {lng: number; lat: number}
-  | {lon: number; lat: number};
-
-export interface LngLatBounds {
-  contains(lnglat: LngLatLike): boolean;
-  setNorthEast(ne: LngLatLike): this;
-  setSouthWest(sw: LngLatLike): this;
-  extend(obj: LngLatLike | LngLatBoundsLike): this;
-
-  getCenter(): LngLat;
-  getSouthWest(): LngLat;
-  getNorthEast(): LngLat;
-  getNorthWest(): LngLat;
-  getSouthEast(): LngLat;
-
-  getWest(): number;
-  getSouth(): number;
-  getEast(): number;
-  getNorth(): number;
-
-  toArray(): number[][];
-  toString(): string;
-  isEmpty(): boolean;
-}
-export type LngLatBoundsLike =
-  | LngLatBounds
-  | [LngLatLike, LngLatLike]
-  | [number, number, number, number]
-  | LngLatLike;
-
-export type MapGeoJSONFeature = GeoJSON.Feature<GeoJSON.Geometry> & {
-  layer: any;
-  source: string;
-  sourceLayer: string;
-  state: {[key: string]: any};
-};
-
-export type PaddingOptions = {
-  top: number;
-  bottom: number;
-  left: number;
-  right: number;
-};
+import type { PaddingOptions } from "maplibre-gl";
+
+export type {
+  Point,
+  PointLike,
+  LngLat,
+  LngLatLike,
+  LngLatBounds,
+  LngLatBoundsLike,
+  PaddingOptions,
+  MapGeoJSONFeature,
+} from "maplibre-gl";
 
 /* Public */
 
@@ -87,8 +29,6 @@ export type ViewState = {
   padding: PaddingOptions;
 };
 
-export type ControlPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-
 export interface ImmutableLike<T> {
   toJS: () => T;
 }

package/src/types/events.ts

@@ -1,73 +1,133 @@
-import type {ViewState, Point, LngLat, MapGeoJSONFeature} from './common';
+import type { Point, LngLat, MapGeoJSONFeature, ViewState } from "./common";
+
 import type {
-  MapInstance,
-  Evented,
-  MarkerInstance,
-  PopupInstance,
-  GeolocateControlInstance
-} from './lib';
-
-export interface Callbacks {
-  [key: `on${string}`]: Function;
-}
+  Map,
+  Marker,
+  Popup,
+  GeolocateControl,
+  MapLibreEvent,
+  MapMouseEvent as _MapMouseEvent,
+  MapLayerMouseEvent,
+  MapTouchEvent,
+  MapLayerTouchEvent,
+  MapStyleDataEvent,
+  MapSourceDataEvent,
+  MapWheelEvent,
+  MapLibreZoomEvent as MapBoxZoomEvent,
+} from "maplibre-gl";
+
+export type {
+  MapLibreEvent as MapEvent,
+  MapLayerMouseEvent,
+  MapTouchEvent,
+  MapLayerTouchEvent,
+  MapStyleDataEvent,
+  MapSourceDataEvent,
+  MapWheelEvent,
+  MapBoxZoomEvent,
+};
+
+export type MapCallbacks = {
+  onMouseDown?: (e: MapLayerMouseEvent) => void;
+  onMouseUp?: (e: MapLayerMouseEvent) => void;
+  onMouseOver?: (e: MapLayerMouseEvent) => void;
+  onMouseMove?: (e: MapLayerMouseEvent) => void;
+  onClick?: (e: MapLayerMouseEvent) => void;
+  onDblClick?: (e: MapLayerMouseEvent) => void;
+  onMouseEnter?: (e: MapLayerMouseEvent) => void;
+  onMouseLeave?: (e: MapLayerMouseEvent) => void;
+  onMouseOut?: (e: MapLayerMouseEvent) => void;
+  onContextMenu?: (e: MapLayerMouseEvent) => void;
+  onTouchStart?: (e: MapLayerTouchEvent) => void;
+  onTouchEnd?: (e: MapLayerTouchEvent) => void;
+  onTouchMove?: (e: MapLayerTouchEvent) => void;
+  onTouchCancel?: (e: MapLayerTouchEvent) => void;
+
+  onMoveStart?: (e: ViewStateChangeEvent) => void;
+  onMove?: (e: ViewStateChangeEvent) => void;
+  onMoveEnd?: (e: ViewStateChangeEvent) => void;
+  onDragStart?: (e: ViewStateChangeEvent) => void;
+  onDrag?: (e: ViewStateChangeEvent) => void;
+  onDragEnd?: (e: ViewStateChangeEvent) => void;
+  onZoomStart?: (e: ViewStateChangeEvent) => void;
+  onZoom?: (e: ViewStateChangeEvent) => void;
+  onZoomEnd?: (e: ViewStateChangeEvent) => void;
+  onRotateStart?: (e: ViewStateChangeEvent) => void;
+  onRotate?: (e: ViewStateChangeEvent) => void;
+  onRotateEnd?: (e: ViewStateChangeEvent) => void;
+  onPitchStart?: (e: ViewStateChangeEvent) => void;
+  onPitch?: (e: ViewStateChangeEvent) => void;
+  onPitchEnd?: (e: ViewStateChangeEvent) => void;
+
+  onWheel?: (e: MapWheelEvent) => void;
+  onBoxZoomStart?: (e: MapBoxZoomEvent) => void;
+  onBoxZoomEnd?: (e: MapBoxZoomEvent) => void;
+  onBoxZoomCancel?: (e: MapBoxZoomEvent) => void;
+
+  onResize?: (e: MapLibreEvent) => void;
+  onLoad?: (e: MapLibreEvent) => void;
+  onRender?: (e: MapLibreEvent) => void;
+  onIdle?: (e: MapLibreEvent) => void;
+  onError?: (e: ErrorEvent) => void;
+  onRemove?: (e: MapLibreEvent) => void;
+  onData?: (e: MapStyleDataEvent | MapSourceDataEvent) => void;
+  onStyleData?: (e: MapStyleDataEvent) => void;
+  onSourceData?: (e: MapSourceDataEvent) => void;
+};
 
-export interface MapEvent<SourceT extends Evented, OriginalEventT = undefined> {
+interface MapEvent<SourceT, OriginalEventT = undefined> {
   type: string;
   target: SourceT;
   originalEvent: OriginalEventT;
 }
 
-export type ErrorEvent<MapT extends MapInstance> = MapEvent<MapT> & {
-  type: 'error';
+export type ErrorEvent = MapEvent<Map> & {
+  type: "error";
   error: Error;
 };
 
-export type MapMouseEvent<MapT extends MapInstance> = MapEvent<MapT, MouseEvent> & {
+export type MapMouseEvent = _MapMouseEvent & {
   point: Point;
   lngLat: LngLat;
   features?: MapGeoJSONFeature[];
 };
 
-export type ViewStateChangeEvent<MapT extends MapInstance> =
-  | (MapEvent<MapT, MouseEvent | TouchEvent | WheelEvent | undefined> & {
-      type: 'movestart' | 'move' | 'moveend' | 'zoomstart' | 'zoom' | 'zoomend';
+export type ViewStateChangeEvent =
+  | (MapEvent<Map, MouseEvent | TouchEvent | WheelEvent | undefined> & {
+      type: "movestart" | "move" | "moveend" | "zoomstart" | "zoom" | "zoomend";
       viewState: ViewState;
     })
-  | (MapEvent<MapT, MouseEvent | TouchEvent | undefined> & {
+  | (MapEvent<Map, MouseEvent | TouchEvent | undefined> & {
       type:
-        | 'rotatestart'
-        | 'rotate'
-        | 'rotateend'
-        | 'dragstart'
-        | 'drag'
-        | 'dragend'
-        | 'pitchstart'
-        | 'pitch'
-        | 'pitchend';
+        | "rotatestart"
+        | "rotate"
+        | "rotateend"
+        | "dragstart"
+        | "drag"
+        | "dragend"
+        | "pitchstart"
+        | "pitch"
+        | "pitchend";
       viewState: ViewState;
     });
 
-export type PopupEvent<PopupT extends PopupInstance> = {
-  type: 'open' | 'close';
-  target: PopupT;
+export type PopupEvent = {
+  type: "open" | "close";
+  target: Popup;
 };
 
-export type MarkerEvent<MarkerT extends MarkerInstance, OriginalEventT = undefined> = MapEvent<
-  MarkerT,
+export type MarkerEvent<OriginalEventT = undefined> = MapEvent<
+  Marker,
   OriginalEventT
 >;
 
-export type MarkerDragEvent<MarkerT extends MarkerInstance> = MarkerEvent<MarkerT> & {
-  type: 'dragstart' | 'drag' | 'dragend';
-  target: MarkerT;
+export type MarkerDragEvent = MarkerEvent & {
+  type: "dragstart" | "drag" | "dragend";
   lngLat: LngLat;
 };
 
-export type GeolocateEvent<GeolocateControlT extends GeolocateControlInstance> =
-  MapEvent<GeolocateControlT>;
+export type GeolocateEvent = MapEvent<GeolocateControl>;
 
-export type GeolocateResultEvent<GeolocateControlT extends GeolocateControlInstance> =
-  GeolocateEvent<GeolocateControlT> & GeolocationPosition;
+export type GeolocateResultEvent = GeolocateEvent & GeolocationPosition;
 
-export type GeolocateErrorEvent<GeolocateControlT extends GeolocateControlInstance> =
-  GeolocateEvent<GeolocateControlT> & GeolocationPositionError;
+export type GeolocateErrorEvent = GeolocateEvent & GeolocationPositionError;

package/src/types/internal.ts

@@ -0,0 +1,26 @@
+// Internal types
+import type { LngLat, PaddingOptions } from "maplibre-gl";
+
+/**
+ * maplibre's Transform interface / CameraUpdateTransformFunction argument
+ */
+export type TransformLike = {
+  center: LngLat;
+  zoom: number;
+  roll?: number;
+  pitch: number;
+  bearing: number;
+  elevation: number;
+  padding?: PaddingOptions;
+};
+
+export type {
+  GeoJSONSource as GeoJSONSourceImplementation,
+  ImageSource as ImageSourceImplementation,
+  CanvasSource as CanvasSourceImplementation,
+  VectorTileSource as VectorSourceImplementation,
+  RasterTileSource as RasterSourceImplementation,
+  RasterDEMTileSource as RasterDemSourceImplementation,
+  VideoSource as VideoSourceImplementation,
+  Source as AnySourceImplementation,
+} from "maplibre-gl";

package/src/types/lib.ts

@@ -1,279 +1,84 @@
-import type {PaddingOptions, LngLat, Point, LngLatLike, PointLike, ControlPosition} from './common';
-
-export interface IControl<MapT extends MapInstance = MapInstance> {
-  onAdd(map: MapT): HTMLElement;
-
-  onRemove(map: MapT): void;
-
-  getDefaultPosition?: (() => string) | undefined;
-}
-
-type Listener = (event?: any) => any;
-
-export interface Evented {
-  on(type: string, listener: Listener);
-
-  off(type?: string | any, listener?: Listener);
-
-  once(type: string, listener: Listener);
-}
-
-/**
- * A user-facing type that represents the minimal intersection between Mapbox.Map and Maplibre.Map
- * User provided `mapLib.Map` is supposed to implement this interface
- * Only losely typed for compatibility
- */
-export interface MapInstance extends Evented {
-  // https://github.com/mapbox/mapbox-gl-js/issues/6522
-  fire(type: string, properties?: {[key: string]: any});
-
-  addControl(control: IControl<this>, position?: ControlPosition);
-
-  removeControl(control: IControl<this>);
-
-  hasControl(control: IControl<this>): boolean;
-
-  resize(): this;
-
-  queryRenderedFeatures(geometry?: any, options?: any): any[];
-
-  setStyle(style: any, options?: any);
-
-  isMoving(): boolean;
-
-  getStyle(): any;
-
-  isStyleLoaded(): boolean | void;
-
-  addSource(id: string, source: any);
-
-  removeSource(id: string): this;
-
-  getSource(id: string): any;
-
-  addLayer(layer: any, before?: string);
-
-  moveLayer(id: string, beforeId?: string);
-
-  removeLayer(id: string);
-
-  getLayer(id: string): any;
-
-  setFilter(layer: string, filter?: any[] | boolean | null);
-
-  setLayerZoomRange(layerId: string, minzoom: number, maxzoom: number);
-
-  setPaintProperty(layer: string, name: string, value: any);
-
-  setLayoutProperty(layer: string, name: string, value: any);
-
-  project(lnglat: any): Point;
-
-  unproject(point: any): LngLat;
-
-  queryTerrainElevation?(lngLat: any, options?: any): number | null;
-
-  getContainer(): HTMLElement;
-
-  getCanvas(): HTMLCanvasElement;
-
-  remove(): void;
-
-  triggerRepaint(): void;
-
-  setPadding(padding: PaddingOptions);
-
-  fitBounds(bounds: any, options?: any);
-
-  setFog?(fog: any);
-
-  setLight?(options: any, lightOptions?: any);
-
-  setTerrain?(terrain?: any);
-}
-
-export interface MarkerInstance extends Evented {
-  addTo(map: MapInstance): this;
-  remove(): this;
-
-  getLngLat(): LngLat;
-  setLngLat(lngLat: LngLatLike): this;
-
-  getElement(): HTMLElement;
-
-  setPopup(popup?: any): this;
-  getPopup(): any;
-
-  getOffset(): PointLike;
-  setOffset(offset: PointLike): this;
-
-  setDraggable(value: boolean): this;
-  isDraggable(): boolean;
-
-  getRotation(): number;
-  setRotation(rotation: number): this;
-
-  getRotationAlignment(): any;
-  setRotationAlignment(alignment: any): this;
-
-  getPitchAlignment(): any;
-  setPitchAlignment(alignment: any): this;
-}
-
-export interface PopupInstance extends Evented {
-  options?: any;
-
-  addTo(map: MapInstance): this;
-  remove(): this;
-
-  isOpen(): boolean;
-
-  getLngLat(): LngLat;
-  setLngLat(lnglat: LngLatLike): this;
-
-  getElement(): HTMLElement;
-
-  setDOMContent(htmlNode: any): this;
-
-  getMaxWidth(): any;
-  setMaxWidth(maxWidth: any): this;
-
-  addClassName(className: string): void;
-  removeClassName(className: string): void;
-
-  setOffset(offset?: any): this;
-}
-
-export interface AttributionControlInstance extends IControl {
-  _container?: HTMLElement;
-}
-
-export interface FullscreenControlInstance extends IControl {
-  _controlContainer?: HTMLElement;
-}
-
-export interface GeolocateControlInstance extends IControl, Evented {
-  _container?: HTMLElement;
-  trigger();
-}
-
-export interface NavigationControlInstance extends IControl {
-  _container?: HTMLElement;
-}
-
-export interface ScaleControlInstance extends IControl {
-  _container?: HTMLElement;
-  options?: any;
-  setUnit(unit: any): void;
-}
+import type {
+  Map,
+  MapOptions,
+  Marker,
+  MarkerOptions,
+  Popup,
+  PopupOptions,
+  AttributionControl,
+  AttributionControlOptions,
+  FullscreenControl,
+  FullscreenControlOptions,
+  GeolocateControl,
+  GeolocateControlOptions,
+  NavigationControl,
+  NavigationControlOptions,
+  ScaleControl,
+  ScaleControlOptions,
+  TerrainControl,
+  TerrainSpecification,
+  LogoControl,
+  LogoControlOptions,
+} from "maplibre-gl";
+
+export type {
+  ControlPosition,
+  IControl,
+  Map,
+  MapOptions,
+  Marker,
+  MarkerOptions,
+  Popup,
+  PopupOptions,
+  AttributionControl,
+  AttributionControlOptions,
+  FullscreenControl,
+  FullscreenControlOptions,
+  GeolocateControl,
+  GeolocateControlOptions,
+  NavigationControl,
+  NavigationControlOptions,
+  ScaleControl,
+  ScaleControlOptions,
+  TerrainControl,
+  LogoControl,
+  LogoControlOptions,
+  CustomLayerInterface,
+} from "maplibre-gl";
 
 /**
  * A user-facing type that represents the minimal intersection between Mapbox and Maplibre
  * User provided `mapLib` is supposed to implement this interface
  * Only losely typed for compatibility
  */
-export interface MapLib<MapT extends MapInstance> {
+export interface MapLib {
   supported?: (options: any) => boolean;
 
-  Map: {new (options: any): MapT};
-
-  Marker: {new (...options: any[]): MarkerInstance};
-
-  Popup: {new (options: any): PopupInstance};
+  Map: { new (options: MapOptions): Map };
 
-  AttributionControl: {new (options: any): AttributionControlInstance};
+  Marker: { new (options: MarkerOptions): Marker };
 
-  FullscreenControl: {new (options: any): FullscreenControlInstance};
+  Popup: { new (options: PopupOptions): Popup };
 
-  GeolocateControl: {new (options: any): GeolocateControlInstance};
-
-  NavigationControl: {new (options: any): NavigationControlInstance};
-
-  ScaleControl: {new (options: any): ScaleControlInstance};
-}
-
-/**
- * Stub for mapbox's Transform class
- * https://github.com/mapbox/mapbox-gl-js/blob/main/src/geo/transform.js
- */
-export type Transform = {
-  width: number;
-  height: number;
-  center: LngLat;
-  zoom: number;
-  bearing: number;
-  pitch: number;
-  padding: PaddingOptions;
-  elevation: any;
-  pixelsToGLUnits: [number, number];
-  cameraElevationReference: 'ground' | 'sea';
-
-  clone: () => Transform;
-  resize: (width: number, height: number) => void;
-  isPaddingEqual: (value: PaddingOptions) => boolean;
-  getBounds: () => any;
-  locationPoint: (lngLat: LngLat) => Point;
-  pointLocation: (p: Point) => LngLat;
-
-  // Mapbox only
-  getProjection?: () => any;
-  setProjection?: (projection: any) => void;
-};
-
-export type MapInstanceInternal<MapT extends MapInstance> = MapT & {
-  transform: Transform;
-
-  _render: Function;
-
-  _renderTaskQueue: {
-    run: Function;
+  AttributionControl: {
+    new (options: AttributionControlOptions): AttributionControl;
   };
-};
-
-// Custom layer
-export interface CustomLayerInterface {
-  id: string;
-  type: 'custom';
-  renderingMode?: '2d' | '3d';
 
-  onRemove?(map: MapInstance, gl: WebGLRenderingContext): void;
-  onAdd?(map: MapInstance, gl: WebGLRenderingContext): void;
+  FullscreenControl: {
+    new (options: FullscreenControlOptions): FullscreenControl;
+  };
 
-  prerender?(gl: WebGLRenderingContext, matrix: number[]): void;
-  render(gl: WebGLRenderingContext, matrix: number[]): void;
-}
+  GeolocateControl: {
+    new (options: GeolocateControlOptions): GeolocateControl;
+  };
 
-// Custom source
+  NavigationControl: {
+    new (options: NavigationControlOptions): NavigationControl;
+  };
 
-export interface CustomSourceImplementation<TileDataT> {
-  id: string;
-  type: 'custom';
-  dataType: 'raster';
-  minzoom?: number;
-  maxzoom?: number;
-  scheme?: string;
-  tileSize?: number;
-  attribution?: string;
-  bounds?: [number, number, number, number];
-  hasTile?: (tileID: {z: number; x: number; y: number}) => boolean;
-  loadTile: (
-    tileID: {z: number; x: number; y: number},
-    options: {signal: AbortSignal}
-  ) => Promise<TileDataT>;
-  prepareTile?: (tileID: {z: number; x: number; y: number}) => TileDataT | undefined;
-  unloadTile?: (tileID: {z: number; x: number; y: number}) => void;
-  onAdd?: (map: MapInstance) => void;
-  onRemove?: (map: MapInstance) => void;
-}
+  ScaleControl: { new (options: ScaleControlOptions): ScaleControl };
 
-export interface CustomSource<TileDataT = unknown> {
-  id: string;
-  type: 'custom';
-  scheme: string;
-  minzoom: number;
-  maxzoom: number;
-  tileSize: number;
-  attribution: string;
+  TerrainControl: { new (options: TerrainSpecification): TerrainControl };
 
-  _implementation: CustomSourceImplementation<TileDataT>;
+  LogoControl: { new (options: LogoControlOptions): LogoControl };
 }

package/src/types/style-spec.ts

@@ -0,0 +1,34 @@
+/*
+ * Maplibre Style Specification types
+ * Type names are aligned with mapbox
+ */
+export type {
+  // Layers
+  LayerSpecification,
+  FillLayerSpecification,
+  LineLayerSpecification,
+  SymbolLayerSpecification,
+  CircleLayerSpecification,
+  HeatmapLayerSpecification,
+  FillExtrusionLayerSpecification,
+  RasterLayerSpecification,
+  HillshadeLayerSpecification,
+  BackgroundLayerSpecification,
+
+  // Sources
+  SourceSpecification,
+  VectorSourceSpecification,
+  RasterSourceSpecification,
+  RasterDEMSourceSpecification,
+  GeoJSONSourceSpecification,
+  VideoSourceSpecification,
+  ImageSourceSpecification,
+  CanvasSourceSpecification,
+
+  // Style
+  StyleSpecification,
+  SkySpecification,
+  LightSpecification,
+  TerrainSpecification,
+  ProjectionSpecification,
+} from "maplibre-gl";

package/src/utils/apply-react-style.ts

@@ -1,9 +1,13 @@
-import * as React from 'react';
+import * as React from "react";
 // This is a simplified version of
 // https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSPropertyOperations.js#L62
-const unitlessNumber = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;
+const unitlessNumber =
+  /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;
 
-export function applyReactStyle(element: HTMLElement, styles: React.CSSProperties) {
+export function applyReactStyle(
+  element: HTMLElement,
+  styles: React.CSSProperties,
+) {
   if (!element || !styles) {
     return;
   }