@maptiler/sdk 1.2.0 → 2.0.0

package/src/Minimap.ts

@@ -1,373 +0,0 @@
-/**
- * This is an extension adds support for adding a minimap to one of the map's control containers.
- */
-
-import { Map } from "./Map";
-import { DOMcreate, DOMremove } from "./tools";
-
-import type {
-  ControlPosition,
-  CustomLayerInterface,
-  FillLayerSpecification,
-  FilterSpecification,
-  GeoJSONSource,
-  IControl,
-  LayerSpecification,
-  LineLayerSpecification,
-  SourceSpecification,
-  StyleOptions,
-  StyleSetterOptions,
-  StyleSpecification,
-  StyleSwapOptions,
-} from "maplibre-gl";
-import type { MapOptions } from "./Map";
-import type { MapStyleVariant, ReferenceMapStyle } from "@maptiler/client";
-
-export interface ParentRect {
-  lineLayout: LineLayerSpecification["layout"];
-  linePaint: LineLayerSpecification["paint"];
-  fillPaint: FillLayerSpecification["paint"];
-}
-
-export interface MinimapOptionsInput {
-  /**
-   * Style of the map. Can be:
-   * - a full style URL (possibly with API key)
-   * - a shorthand with only the MapTIler style name (eg. `"streets-v2"`)
-   * - a longer form with the prefix `"maptiler://"` (eg. `"maptiler://streets-v2"`)
-   */
-  style?: ReferenceMapStyle | MapStyleVariant | StyleSpecification | string;
-
-  /**
-   * Set the zoom difference between the parent and the minimap
-   * If the parent is zoomed to 10 and the minimap is zoomed to 8, the zoomAdjust should be 2
-   * Default: -4
-   */
-  zoomAdjust?: number;
-
-  /** Set a zoom of the minimap and don't allow any future changes */
-  lockZoom?: number;
-
-  /** Adjust the pitch only if the user requests */
-  pitchAdjust?: boolean;
-
-  /** Set CSS properties of the container using object key-values */
-  containerStyle?: Record<string, string>;
-
-  /** Set the position of the minimap at either "top-left", "top-right", "bottom-left", or "bottom-right" */
-  position?: ControlPosition;
-
-  /** Set the parentRect fill and/or line options */
-  parentRect?: ParentRect;
-}
-
-export interface MinimapOptions extends MapOptions {
-  zoomAdjust: number;
-  pitchAdjust: boolean;
-  containerStyle: Record<string, string>;
-  parentRect?: ParentRect;
-}
-
-export default class Minimap implements IControl {
-  #options: MinimapOptions;
-  map!: Map;
-  #parentMap!: Map;
-  #container!: HTMLElement;
-  #canvasContainer!: HTMLElement;
-  #parentRect?: GeoJSON.Feature<GeoJSON.Polygon>;
-  #differentStyle = false;
-  #desync?: () => void;
-  constructor(options: MinimapOptionsInput, mapOptions: MapOptions) {
-    // check if the style is different
-    if (options.style !== undefined) this.#differentStyle = true;
-    // set options
-    this.#options = {
-      // set defaults
-      zoomAdjust: -4,
-      position: "top-right",
-      // inherit map options
-      ...mapOptions,
-      // override any lingering control options
-      forceNoAttributionControl: true,
-      attributionControl: false,
-      navigationControl: false,
-      geolocateControl: false,
-      maptilerLogo: false,
-      minimap: false,
-      hash: false,
-      pitchAdjust: false,
-      // override map options with new user defined minimap options
-      ...options,
-      containerStyle: {
-        border: "1px solid #000",
-        width: "400px",
-        height: "300px",
-        ...(options.containerStyle ?? {}),
-      },
-    };
-    if (options.lockZoom !== undefined) {
-      this.#options.minZoom = options.lockZoom;
-      this.#options.maxZoom = options.lockZoom;
-    }
-  }
-
-  setStyle(
-    style:
-      | null
-      | ReferenceMapStyle
-      | MapStyleVariant
-      | StyleSpecification
-      | string,
-    options?: StyleSwapOptions & StyleOptions,
-  ): void {
-    if (!this.#differentStyle) this.map.setStyle(style, options);
-    this.#setParentBounds();
-  }
-
-  addLayer(
-    layer:
-      | (LayerSpecification & {
-          source?: string | SourceSpecification;
-        })
-      | CustomLayerInterface,
-    beforeId?: string,
-  ): Map {
-    if (!this.#differentStyle) this.map.addLayer(layer, beforeId);
-    this.#setParentBounds();
-    return this.map;
-  }
-
-  moveLayer(id: string, beforeId?: string): Map {
-    if (!this.#differentStyle) this.map.moveLayer(id, beforeId);
-    this.#setParentBounds();
-    return this.map;
-  }
-
-  removeLayer(id: string): this {
-    if (!this.#differentStyle) this.map.removeLayer(id);
-    this.#setParentBounds();
-    return this;
-  }
-
-  setLayerZoomRange(layerId: string, minzoom: number, maxzoom: number): this {
-    if (!this.#differentStyle)
-      this.map.setLayerZoomRange(layerId, minzoom, maxzoom);
-    this.#setParentBounds();
-    return this;
-  }
-
-  setFilter(
-    layerId: string,
-    filter?: FilterSpecification | null,
-    options?: StyleSetterOptions,
-  ): this {
-    if (!this.#differentStyle) this.map.setFilter(layerId, filter, options);
-    this.#setParentBounds();
-    return this;
-  }
-
-  setPaintProperty(
-    layerId: string,
-    name: string,
-    // maplibre controlled types
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: any,
-    options?: StyleSetterOptions,
-  ): this {
-    if (!this.#differentStyle)
-      this.map.setPaintProperty(layerId, name, value, options);
-    this.#setParentBounds();
-    return this;
-  }
-
-  setLayoutProperty(
-    layerId: string,
-    name: string,
-    // maplibre controlled types
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: any,
-    options?: StyleSetterOptions,
-  ): this {
-    if (!this.#differentStyle)
-      this.map.setLayoutProperty(layerId, name, value, options);
-    this.#setParentBounds();
-    return this;
-  }
-
-  setGlyphs(glyphsUrl: string | null, options?: StyleSetterOptions): this {
-    if (!this.#differentStyle) this.map.setGlyphs(glyphsUrl, options);
-    this.#setParentBounds();
-    return this;
-  }
-
-  onAdd(parentMap: Map): HTMLElement {
-    this.#parentMap = parentMap;
-    //prep the container
-    this.#container = DOMcreate("div", "maplibregl-ctrl maplibregl-ctrl-group");
-    // adjust styling
-    for (const [key, value] of Object.entries(this.#options.containerStyle)) {
-      this.#container.style.setProperty(key, value);
-    }
-    this.#options.container = this.#container;
-    this.#options.zoom = parentMap.getZoom() + this.#options.zoomAdjust ?? -4;
-    this.map = new Map(this.#options);
-
-    // NOTE: For some reason the DOM doesn't properly update it's size in time
-    // for the minimap to convey it's size to the canvas.
-    this.map.once("style.load", () => {
-      this.map.resize();
-    });
-
-    // set options
-    this.map.once("load", () => {
-      this.#addParentRect(this.#options.parentRect);
-      this.#desync = this.#syncMaps();
-    });
-
-    return this.#container;
-  }
-
-  onRemove(): void {
-    this.#desync?.();
-    DOMremove(this.#container);
-  }
-
-  #addParentRect(rect?: ParentRect): void {
-    if (
-      rect === undefined ||
-      (rect.linePaint === undefined && rect.fillPaint === undefined)
-    ) {
-      return;
-    }
-    this.#parentRect = {
-      type: "Feature",
-      properties: {
-        name: "parentRect",
-      },
-      geometry: {
-        type: "Polygon",
-        coordinates: [[[], [], [], [], []]],
-      },
-    };
-
-    this.map.addSource("parentRect", {
-      type: "geojson",
-      data: this.#parentRect,
-    });
-    if (rect.lineLayout !== undefined || rect.linePaint !== undefined) {
-      this.map.addLayer({
-        id: "parentRectOutline",
-        type: "line",
-        source: "parentRect",
-        layout: {
-          ...rect.lineLayout,
-        },
-        paint: {
-          "line-color": "#FFF",
-          "line-width": 1,
-          "line-opacity": 0.85,
-          ...rect.linePaint,
-        },
-      });
-    }
-    if (rect.fillPaint !== undefined) {
-      this.map.addLayer({
-        id: "parentRectFill",
-        type: "fill",
-        source: "parentRect",
-        layout: {},
-        paint: {
-          "fill-color": "#08F",
-          "fill-opacity": 0.135,
-          ...rect.fillPaint,
-        },
-      });
-    }
-
-    this.#setParentBounds();
-  }
-
-  #setParentBounds() {
-    if (this.#parentRect === undefined) return;
-
-    const { devicePixelRatio } = window;
-    const canvas = this.#parentMap.getCanvas();
-    const width = canvas.width / devicePixelRatio;
-    const height = canvas.height / devicePixelRatio;
-
-    // Get coordinates for all four corners
-    const unproject = this.#parentMap.unproject.bind(this.#parentMap);
-    const northWest = unproject([0, 0]);
-    const northEast = unproject([width, 0]);
-    const southWest = unproject([0, height]);
-    const southEast = unproject([width, height]);
-
-    this.#parentRect.geometry.coordinates = [
-      [
-        southWest.toArray(),
-        southEast.toArray(),
-        northEast.toArray(),
-        northWest.toArray(),
-        southWest.toArray(),
-      ],
-    ];
-
-    const source = this.map.getSource("parentRect") as GeoJSONSource;
-    source.setData(this.#parentRect);
-  }
-
-  #syncMaps(): () => void {
-    const { pitchAdjust } = this.#options;
-    // syncing callbacks
-    const parentCallback = () => {
-      sync("parent");
-    };
-    const minimapCallback = () => {
-      sync("minimap");
-    };
-
-    // on off functions
-    const on = () => {
-      this.#parentMap.on("move", parentCallback);
-      this.map.on("move", minimapCallback);
-    };
-    const off = () => {
-      this.#parentMap.off("move", parentCallback);
-      this.map.off("move", minimapCallback);
-    };
-
-    // When one map moves, we turn off the movement listeners
-    // on all the maps, move it, then turn the listeners on again
-    const sync = (which: "parent" | "minimap") => {
-      // OFF
-      off();
-
-      // MOVE
-      const from = which === "parent" ? this.#parentMap : this.map;
-      const to = which === "parent" ? this.map : this.#parentMap;
-      const center = from.getCenter();
-      const zoom =
-        from.getZoom() +
-        (this.#options.zoomAdjust ?? -4) * (which === "parent" ? 1 : -1);
-      const bearing = from.getBearing();
-      const pitch = from.getPitch();
-      to.jumpTo({
-        center,
-        zoom,
-        bearing,
-        pitch: pitchAdjust ? pitch : 0,
-      });
-      // update parent rect
-      this.#setParentBounds();
-
-      // ON
-      on();
-    };
-
-    on();
-    // return a desync function
-    return () => {
-      off();
-    };
-  }
-}

package/src/NavigationControl.ts

@@ -1,13 +0,0 @@
-/**
- * This is an extension of MapLibre NavigationControl to make it fully type compatible with the SDK
- */
-
-import maplibregl from "maplibre-gl";
-import type { Map as MapMLGL } from "maplibre-gl";
-import { Map } from "./Map";
-
-export class NavigationControl extends maplibregl.NavigationControl {
-  onAdd(map: Map | MapMLGL) {
-    return super.onAdd(map as MapMLGL);
-  }
-}

package/src/Point.ts

@@ -1,334 +0,0 @@
-/**
- * This is TypeScript rewrite of the Point class to use instead of the version imported in MapLibre.
- * It also uses a class instead of prototypes.
- */
-
-/**
- * Row major 2x2 matrix
- */
-export type Matrix2 = [number, number, number, number];
-
-/**
- * a point
- */
-export class Point {
-  public x: number;
-  public y: number;
-
-  constructor(x: number, y: number) {
-    this.x = x;
-    this.y = y;
-  }
-
-  private _matMult(m: Matrix2): Point {
-    const x = m[0] * this.x + m[1] * this.y;
-    const y = m[2] * this.x + m[3] * this.y;
-    this.x = x;
-    this.y = y;
-    return this;
-  }
-
-  private _add(p: Point): Point {
-    this.x += p.x;
-    this.y += p.y;
-    return this;
-  }
-
-  private _sub(p: Point): Point {
-    this.x -= p.x;
-    this.y -= p.y;
-    return this;
-  }
-
-  private _mult(k: number): Point {
-    this.x *= k;
-    this.y *= k;
-    return this;
-  }
-
-  private _div(k: number): Point {
-    this.x /= k;
-    this.y /= k;
-    return this;
-  }
-
-  private _multByPoint(p: Point): Point {
-    this.x *= p.x;
-    this.y *= p.y;
-    return this;
-  }
-
-  private _divByPoint(p: Point): Point {
-    this.x /= p.x;
-    this.y /= p.y;
-    return this;
-  }
-
-  private _unit(): Point {
-    this._div(this.mag());
-    return this;
-  }
-
-  private _perp(): Point {
-    const y = this.y;
-    this.y = this.x;
-    this.x = -y;
-    return this;
-  }
-
-  private _rotate(angle: number): Point {
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-    const x = cos * this.x - sin * this.y;
-    const y = sin * this.x + cos * this.y;
-    this.x = x;
-    this.y = y;
-    return this;
-  }
-
-  private _rotateAround(angle: number, p: Point): Point {
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-    const x = p.x + cos * (this.x - p.x) - sin * (this.y - p.y);
-    const y = p.y + sin * (this.x - p.x) + cos * (this.y - p.y);
-    this.x = x;
-    this.y = y;
-    return this;
-  }
-
-  private _round(): Point {
-    this.x = Math.round(this.x);
-    this.y = Math.round(this.y);
-    return this;
-  }
-
-  /**
-   * Clone this point, returning a new point that can be modified
-   * without affecting the old one.
-   * @return {Point} the clone
-   */
-  clone(): Point {
-    return new Point(this.x, this.y);
-  }
-
-  /**
-   * Add this point's x & y coordinates to another point,
-   * yielding a new point.
-   * @param {Point} p the other point
-   * @return {Point} output point
-   */
-  add(p: Point): Point {
-    return this.clone()._add(p);
-  }
-
-  /**
-   * Subtract this point's x & y coordinates to from point,
-   * yielding a new point.
-   * @param {Point} p the other point
-   * @return {Point} output point
-   */
-  sub(p: Point): Point {
-    return this.clone()._sub(p);
-  }
-
-  /**
-   * Multiply this point's x & y coordinates by point,
-   * yielding a new point.
-   * @param {Point} p the other point
-   * @return {Point} output point
-   */
-  multByPoint(p: Point): Point {
-    return this.clone()._multByPoint(p);
-  }
-
-  /**
-   * Divide this point's x & y coordinates by point,
-   * yielding a new point.
-   * @param {Point} p the other point
-   * @return {Point} output point
-   */
-  divByPoint(p: Point): Point {
-    return this.clone()._divByPoint(p);
-  }
-
-  /**
-   * Multiply this point's x & y coordinates by a factor,
-   * yielding a new point.
-   * @param {Number} k factor
-   * @return {Point} output point
-   */
-  mult(k: number): Point {
-    return this.clone()._mult(k);
-  }
-
-  /**
-   * Divide this point's x & y coordinates by a factor,
-   * yielding a new point.
-   * @param {Point} k factor
-   * @return {Point} output point
-   */
-  div(k: number): Point {
-    return this.clone()._div(k);
-  }
-
-  /**
-   * Rotate this point around the 0, 0 origin by an angle a,
-   * given in radians
-   * @param {Number} a angle to rotate around, in radians
-   * @return {Point} output point
-   */
-  rotate(a: number): Point {
-    return this.clone()._rotate(a);
-  }
-
-  /**
-   * Rotate this point around p point by an angle a,
-   * given in radians
-   * @param {Number} a angle to rotate around, in radians
-   * @param {Point} p Point to rotate around
-   * @return {Point} output point
-   */
-  rotateAround(a: number, p: Point): Point {
-    return this.clone()._rotateAround(a, p);
-  }
-
-  /**
-   * Multiply this point by a 4x1 transformation matrix
-   * @param {Array<Number>} m transformation matrix
-   * @return {Point} output point
-   */
-  matMult(m: Matrix2): Point {
-    return this.clone()._matMult(m);
-  }
-
-  /**
-   * Calculate this point but as a unit vector from 0, 0, meaning
-   * that the distance from the resulting point to the 0, 0
-   * coordinate will be equal to 1 and the angle from the resulting
-   * point to the 0, 0 coordinate will be the same as before.
-   * @return {Point} unit vector point
-   */
-  unit(): Point {
-    return this.clone()._unit();
-  }
-
-  /**
-   * Compute a perpendicular point, where the new y coordinate
-   * is the old x coordinate and the new x coordinate is the old y
-   * coordinate multiplied by -1
-   * @return {Point} perpendicular point
-   */
-  perp(): Point {
-    return this.clone()._perp();
-  }
-
-  /**
-   * Return a version of this point with the x & y coordinates
-   * rounded to integers.
-   * @return {Point} rounded point
-   */
-  round(): Point {
-    return this.clone()._round();
-  }
-
-  /**
-   * Return the magnitude of this point: this is the Euclidean
-   * distance from the 0, 0 coordinate to this point's x and y
-   * coordinates.
-   * @return {Number} magnitude
-   */
-  mag(): number {
-    return Math.sqrt(this.x * this.x + this.y * this.y);
-  }
-
-  /**
-   * Judge whether this point is equal to another point, returning
-   * true or false.
-   * @param {Point} other the other point
-   * @return {boolean} whether the points are equal
-   */
-  equals(other: Point): boolean {
-    return this.x === other.x && this.y === other.y;
-  }
-
-  /**
-   * Calculate the distance from this point to another point
-   * @param {Point} p the other point
-   * @return {Number} distance
-   */
-  dist(p: Point): number {
-    return Math.sqrt(this.distSqr(p));
-  }
-
-  /**
-   * Calculate the distance from this point to another point,
-   * without the square root step. Useful if you're comparing
-   * relative distances.
-   * @param {Point} p the other point
-   * @return {Number} distance
-   */
-  distSqr(p: Point): number {
-    const dx = p.x - this.x;
-    const dy = p.y - this.y;
-    return dx * dx + dy * dy;
-  }
-
-  /**
-   * Get the angle from the 0, 0 coordinate to this point, in radians
-   * coordinates.
-   * @return {Number} angle
-   */
-  angle(): number {
-    return Math.atan2(this.y, this.x);
-  }
-
-  /**
-   * Get the angle from this point to another point, in radians
-   * @param {Point} b the other point
-   * @return {Number} angle
-   */
-  angleTo(b: Point): number {
-    return Math.atan2(this.y - b.y, this.x - b.x);
-  }
-
-  /**
-   * Get the angle between this point and another point, in radians
-   * @param {Point} b the other point
-   * @return {Number} angle
-   */
-  angleWith(b: Point): number {
-    return this.angleWithSep(b.x, b.y);
-  }
-
-  /*
-   * Find the angle of the two vectors, solving the formula for
-   * the cross product a x b = |a||b|sin(θ) for θ.
-   * @param {Number} x the x-coordinate
-   * @param {Number} y the y-coordinate
-   * @return {Number} the angle in radians
-   */
-  angleWithSep(x: number, y: number): number {
-    return Math.atan2(this.x * y - this.y * x, this.x * x + this.y * y);
-  }
-
-  /**
-   * Construct a point from an array if necessary, otherwise if the input
-   * is already a Point, or an unknown type, return it unchanged
-   * @param {Array<number> | Point} a any kind of input value
-   * @return {Point} constructed point, or passed-through value.
-   * @example
-   * // this
-   * var point = Point.convert([0, 1]);
-   * // is equivalent to
-   * var point = new Point(0, 1);
-   */
-  static convert(a: Point | Array<number>) {
-    if (a instanceof Point) {
-      return a;
-    }
-    if (Array.isArray(a)) {
-      return new Point(a[0], a[1]);
-    }
-    return a;
-  }
-}