react-bkoi-gl 1.0.1

package/src/types/common.ts

@@ -0,0 +1,94 @@
+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;
+};
+
+/* Public */
+
+/** Describes the camera's state */
+export type ViewState = {
+  /** Longitude at map center */
+  longitude: number;
+  /** Latitude at map center */
+  latitude: number;
+  /** Map zoom level */
+  zoom: number;
+  /** Map rotation bearing in degrees counter-clockwise from north */
+  bearing: number;
+  /** Map angle in degrees at which the camera is looking at the ground */
+  pitch: number;
+  /** Dimensions in pixels applied on each side of the viewport for shifting the vanishing point. */
+  padding: PaddingOptions;
+};
+
+export type ControlPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+export interface ImmutableLike<T> {
+  toJS: () => T;
+}

package/src/types/events-bkoi-gl.ts

@@ -0,0 +1,78 @@
+import {
+  Map,
+  MapLibreEvent as MapEvent,
+  MapMouseEvent,
+  MapLayerMouseEvent,
+  MapTouchEvent,
+  MapLayerTouchEvent,
+  MapStyleDataEvent,
+  MapSourceDataEvent,
+  MapWheelEvent,
+  MapLibreZoomEvent as MapBoxZoomEvent
+  // @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+} from 'bkoi-gl';
+import {ErrorEvent as _ErrorEvent, ViewStateChangeEvent as _ViewStateChangeEvent} from './events';
+
+export type {
+  MapEvent,
+  MapMouseEvent,
+  MapLayerMouseEvent,
+  MapTouchEvent,
+  MapLayerTouchEvent,
+  MapStyleDataEvent,
+  MapSourceDataEvent,
+  MapWheelEvent,
+  MapBoxZoomEvent
+};
+
+export type ErrorEvent = _ErrorEvent<Map>;
+export type ViewStateChangeEvent = _ViewStateChangeEvent<Map>;
+
+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: MapEvent) => void;
+  onLoad?: (e: MapEvent) => void;
+  onRender?: (e: MapEvent) => void;
+  onIdle?: (e: MapEvent) => void;
+  onError?: (e: ErrorEvent) => void;
+  onRemove?: (e: MapEvent) => void;
+  onData?: (e: MapStyleDataEvent | MapSourceDataEvent) => void;
+  onStyleData?: (e: MapStyleDataEvent) => void;
+  onSourceData?: (e: MapSourceDataEvent) => void;
+};

package/src/types/events-mapbox.ts

@@ -0,0 +1,76 @@
+import {
+  Map,
+  MapboxEvent as MapEvent,
+  MapMouseEvent,
+  MapLayerMouseEvent,
+  MapTouchEvent,
+  MapLayerTouchEvent,
+  MapStyleDataEvent,
+  MapSourceDataEvent,
+  MapWheelEvent,
+  MapBoxZoomEvent
+} from 'mapbox-gl';
+import {ErrorEvent as _ErrorEvent, ViewStateChangeEvent as _ViewStateChangeEvent} from './events';
+
+export type {
+  MapEvent,
+  MapMouseEvent,
+  MapLayerMouseEvent,
+  MapTouchEvent,
+  MapLayerTouchEvent,
+  MapStyleDataEvent,
+  MapSourceDataEvent,
+  MapWheelEvent,
+  MapBoxZoomEvent
+};
+
+export type ErrorEvent = _ErrorEvent<Map>;
+export type ViewStateChangeEvent = _ViewStateChangeEvent<Map>;
+
+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: MapEvent) => void;
+  onLoad?: (e: MapEvent) => void;
+  onRender?: (e: MapEvent) => void;
+  onIdle?: (e: MapEvent) => void;
+  onError?: (e: ErrorEvent) => void;
+  onRemove?: (e: MapEvent) => void;
+  onData?: (e: MapStyleDataEvent | MapSourceDataEvent) => void;
+  onStyleData?: (e: MapStyleDataEvent) => void;
+  onSourceData?: (e: MapSourceDataEvent) => void;
+};

package/src/types/events.ts

@@ -0,0 +1,73 @@
+import type {ViewState, Point, LngLat, MapGeoJSONFeature} from './common';
+import type {
+  MapInstance,
+  Evented,
+  MarkerInstance,
+  PopupInstance,
+  GeolocateControlInstance
+} from './lib';
+
+export interface Callbacks {
+  [key: `on${string}`]: Function;
+}
+
+export interface MapEvent<SourceT extends Evented, OriginalEventT = undefined> {
+  type: string;
+  target: SourceT;
+  originalEvent: OriginalEventT;
+}
+
+export type ErrorEvent<MapT extends MapInstance> = MapEvent<MapT> & {
+  type: 'error';
+  error: Error;
+};
+
+export type MapMouseEvent<MapT extends MapInstance> = MapEvent<MapT, MouseEvent> & {
+  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';
+      viewState: ViewState;
+    })
+  | (MapEvent<MapT, MouseEvent | TouchEvent | undefined> & {
+      type:
+        | 'rotatestart'
+        | 'rotate'
+        | 'rotateend'
+        | 'dragstart'
+        | 'drag'
+        | 'dragend'
+        | 'pitchstart'
+        | 'pitch'
+        | 'pitchend';
+      viewState: ViewState;
+    });
+
+export type PopupEvent<PopupT extends PopupInstance> = {
+  type: 'open' | 'close';
+  target: PopupT;
+};
+
+export type MarkerEvent<MarkerT extends MarkerInstance, OriginalEventT = undefined> = MapEvent<
+  MarkerT,
+  OriginalEventT
+>;
+
+export type MarkerDragEvent<MarkerT extends MarkerInstance> = MarkerEvent<MarkerT> & {
+  type: 'dragstart' | 'drag' | 'dragend';
+  target: MarkerT;
+  lngLat: LngLat;
+};
+
+export type GeolocateEvent<GeolocateControlT extends GeolocateControlInstance> =
+  MapEvent<GeolocateControlT>;
+
+export type GeolocateResultEvent<GeolocateControlT extends GeolocateControlInstance> =
+  GeolocateEvent<GeolocateControlT> & GeolocationPosition;
+
+export type GeolocateErrorEvent<GeolocateControlT extends GeolocateControlInstance> =
+  GeolocateEvent<GeolocateControlT> & GeolocationPositionError;

package/src/types/index.ts

@@ -0,0 +1,93 @@
+export * from './common';
+export * from './lib';
+export * from './events';
+
+import type GeoJSON from 'geojson';
+import type {CustomSourceImplementation} from './lib';
+
+// Internal: source implementations
+
+export interface ISource {
+  type: string;
+}
+
+export interface ILayer {
+  id: string;
+  type: string;
+
+  metadata?: any;
+  source?: unknown;
+
+  minzoom?: number;
+  maxzoom?: number;
+
+  filter?: any;
+  layout?: {
+    [property: string]: any;
+  };
+  paint?: {
+    [property: string]: any;
+  };
+}
+
+export interface MapStyle {
+  name?: string;
+  metadata?: unknown;
+  version: number;
+  layers: ILayer[];
+  sources: {
+    [sourceName: string]: object;
+  };
+
+  fog?: any;
+  terrain?: any;
+  light?: any;
+}
+
+export interface GeoJSONSourceImplementation {
+  type: 'geojson';
+  setData(
+    data: GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry> | String
+  ): this;
+}
+
+export interface ImageSourceImplemtation {
+  type: 'image';
+  updateImage(options: {url?: string; coordinates?: number[][]}): this;
+  setCoordinates(coordinates: number[][]): this;
+}
+
+export interface CanvasSourceImplemtation {
+  type: 'canvas';
+  play(): void;
+  pause(): void;
+  getCanvas(): HTMLCanvasElement;
+  setCoordinates(coordinates: number[][]): this;
+}
+
+export interface VectorSourceImplementation {
+  type: 'vector';
+  setTiles(tiles: ReadonlyArray<string>): this;
+  setUrl(url: string): this;
+}
+
+export interface RasterSourceImplementation {
+  type: 'raster' | 'raster-dem';
+  setTiles(tiles: ReadonlyArray<string>): this;
+  setUrl(url: string): this;
+}
+
+export interface VideoSourceImplementation {
+  type: 'video';
+  getVideo(): HTMLVideoElement;
+  setCoordinates(coordinates: number[][]): this;
+}
+
+export type AnySourceImplementation =
+  | GeoJSONSourceImplementation
+  | VideoSourceImplementation
+  | ImageSourceImplemtation
+  | CanvasSourceImplemtation
+  | VectorSourceImplementation
+  | RasterSourceImplementation
+  | CustomSourceImplementation<HTMLImageElement | ImageData | ImageBitmap>;

package/src/types/lib.ts

@@ -0,0 +1,279 @@
+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;
+}
+
+/**
+ * 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> {
+  supported?: (options: any) => boolean;
+
+  Map: {new (options: any): MapT};
+
+  Marker: {new (...options: any[]): MarkerInstance};
+
+  Popup: {new (options: any): PopupInstance};
+
+  AttributionControl: {new (options: any): AttributionControlInstance};
+
+  FullscreenControl: {new (options: any): FullscreenControlInstance};
+
+  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;
+  };
+};
+
+// Custom layer
+export interface CustomLayerInterface {
+  id: string;
+  type: 'custom';
+  renderingMode?: '2d' | '3d';
+
+  onRemove?(map: MapInstance, gl: WebGLRenderingContext): void;
+  onAdd?(map: MapInstance, gl: WebGLRenderingContext): void;
+
+  prerender?(gl: WebGLRenderingContext, matrix: number[]): void;
+  render(gl: WebGLRenderingContext, matrix: number[]): void;
+}
+
+// Custom source
+
+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;
+}
+
+export interface CustomSource<TileDataT = unknown> {
+  id: string;
+  type: 'custom';
+  scheme: string;
+  minzoom: number;
+  maxzoom: number;
+  tileSize: number;
+  attribution: string;
+
+  _implementation: CustomSourceImplementation<TileDataT>;
+}

package/src/types/public.ts

@@ -0,0 +1,9 @@
+export type {ViewState, ControlPosition} from './common';
+export type {
+  IControl,
+  MapInstance,
+  MapLib,
+  CustomLayerInterface,
+  CustomSource,
+  CustomSourceImplementation
+} from './lib';