@maptiler/sdk 1.0.0

package/src/MaptilerNavigationControl.ts

@@ -0,0 +1,66 @@
+import maplibregl from "maplibre-gl";
+
+type HTMLButtonElementPlus = HTMLButtonElement & {
+  clickFunction: (e?: any) => unknown;
+};
+
+export class MaptilerNavigationControl extends maplibregl.NavigationControl {
+  constructor() {
+    super({
+      showCompass: true,
+      showZoom: true,
+      visualizePitch: true,
+    });
+
+    // Removing the default click event
+    this._compass.removeEventListener(
+      "click",
+      (this._compass as HTMLButtonElementPlus).clickFunction
+    );
+
+    // Adding custom click event
+    this._compass.addEventListener("click", (e) => {
+      {
+        const currentPitch = this._map.getPitch();
+        if (currentPitch === 0) {
+          this._map.easeTo({ pitch: Math.min(this._map.getMaxPitch(), 80) });
+        } else {
+          if (this.options.visualizePitch) {
+            this._map.resetNorthPitch({}, { originalEvent: e });
+          } else {
+            this._map.resetNorth({}, { originalEvent: e });
+          }
+        }
+      }
+    });
+  }
+
+  /**
+   * Overloading: the button now stores its click callback so that we can later on delete it and replace it
+   */
+  _createButton(
+    className: string,
+    fn: (e?: any) => unknown
+  ): HTMLButtonElementPlus {
+    const button = super._createButton(className, fn) as HTMLButtonElementPlus;
+    button.clickFunction = fn;
+    return button;
+  }
+
+  /**
+   * Overloading: Limit how flat the compass icon can get
+   */
+  _rotateCompassArrow() {
+    const rotate = this.options.visualizePitch
+      ? `scale(${Math.min(
+          1.5,
+          1 /
+            Math.pow(Math.cos(this._map.transform.pitch * (Math.PI / 180)), 0.5)
+        )}) rotateX(${Math.min(70, this._map.transform.pitch)}deg) rotateZ(${
+          this._map.transform.angle * (180 / Math.PI)
+        }deg)`
+      : `rotate(${this._map.transform.angle * (180 / Math.PI)}deg)`;
+
+    this._compassIcon.style.transform = rotate;
+  }
+}

package/src/Point.ts

@@ -0,0 +1,336 @@
+/**
+ * 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
+ * @param x
+ * @param y
+ */
+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): 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): 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): 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;
+  }
+}

package/src/TerrainControl.ts

@@ -0,0 +1,87 @@
+import { bindAll, DOMcreate, DOMremove } from "./tools";
+
+import { Map } from "./Map";
+import maplibregl from "maplibre-gl";
+
+/**
+ * An `TerrainControl` control adds a button to turn terrain on and off.
+ *
+ * @implements {IControl}
+ * @param {Object} [options]
+ * @param {string} [options.id] The ID of the raster-dem source to use.
+ * @param {Object} [options.options]
+ * @param {number} [options.options.exaggeration]
+ * @example
+ * var map = new maplibregl.Map({TerrainControl: false})
+ *     .addControl(new maplibregl.TerrainControl({
+ *         source: "terrain"
+ *     }));
+ */
+export class TerrainControl implements maplibregl.IControl {
+  _map: Map;
+  _container: HTMLElement;
+  _terrainButton: HTMLButtonElement;
+
+  constructor() {
+    bindAll(["_toggleTerrain", "_updateTerrainIcon"], this);
+  }
+
+  onAdd(map: Map) {
+    this._map = map;
+    this._container = DOMcreate("div", "maplibregl-ctrl maplibregl-ctrl-group");
+    this._terrainButton = DOMcreate(
+      "button",
+      "maplibregl-ctrl-terrain",
+      this._container
+    );
+    DOMcreate("span", "maplibregl-ctrl-icon", this._terrainButton).setAttribute(
+      "aria-hidden",
+      "true"
+    );
+    this._terrainButton.type = "button";
+    this._terrainButton.addEventListener("click", this._toggleTerrain);
+
+    this._updateTerrainIcon();
+    this._map.on("terrain", this._updateTerrainIcon);
+    return this._container;
+  }
+
+  onRemove() {
+    DOMremove(this._container);
+    this._map.off("terrain", this._updateTerrainIcon);
+    this._map = undefined;
+  }
+
+  _toggleTerrain() {
+    // if (this._map.getTerrain()) {
+    //     this._map.setTerrain(null);
+    // } else {
+    //     this._map.setTerrain(this.options);
+    // }
+
+    if (this._map.hasTerrain()) {
+      this._map.disableTerrain();
+    } else {
+      this._map.enableTerrain();
+    }
+
+    this._updateTerrainIcon();
+  }
+
+  _updateTerrainIcon() {
+    this._terrainButton.classList.remove("maplibregl-ctrl-terrain");
+    this._terrainButton.classList.remove("maplibregl-ctrl-terrain-enabled");
+    // if (this._map.terrain) {
+    if (this._map.hasTerrain()) {
+      this._terrainButton.classList.add("maplibregl-ctrl-terrain-enabled");
+      this._terrainButton.title = this._map._getUIString(
+        "TerrainControl.disableTerrain"
+      );
+    } else {
+      this._terrainButton.classList.add("maplibregl-ctrl-terrain");
+      this._terrainButton.title = this._map._getUIString(
+        "TerrainControl.enableTerrain"
+      );
+    }
+  }
+}

package/src/config.ts

@@ -0,0 +1,92 @@
+import EventEmitter from "events";
+import { Language, LanguageString } from "./language";
+import { config as clientConfig, FetchFunction } from "@maptiler/client";
+import { Unit } from "./unit";
+
+/**
+ * Configuration class for the SDK
+ */
+class SdkConfig extends EventEmitter {
+  /**
+   * The primary language. By default, the language of the web browser is used.
+   */
+  primaryLanguage: LanguageString | null = Language.AUTO;
+
+  /**
+   * The secondary language, to overwrite the default language defined in the map style.
+   * This settings is highly dependant on the style compatibility and may not work in most cases.
+   */
+  secondaryLanguage: LanguageString | null = null;
+
+  /**
+   * Setting on whether of not the SDK runs with a session logic.
+   * A "session" is started at the initialization of the SDK and finished when the browser
+   * page is being refreshed.
+   * When `session` is enabled (default: true), the extra URL param `mtsid` is added to queries
+   * on the MapTiler Cloud API. This allows MapTiler to enable "session based billing".
+   */
+  session = true;
+
+  /**
+   * Unit to be used
+   */
+  private _unit: Unit = "metric";
+
+  /**
+   * MapTiler Cloud API key
+   */
+  private _apiKey = "";
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Set the unit system
+   */
+  set unit(u: Unit) {
+    this._unit = u;
+    this.emit("unit", u);
+  }
+
+  /**
+   * Get the unit system
+   */
+  get unit(): Unit {
+    return this._unit;
+  }
+
+  /**
+   * Set the MapTiler Cloud API key
+   */
+  set apiKey(k: string) {
+    this._apiKey = k;
+    clientConfig.apiKey = k;
+    this.emit("apiKey", k);
+  }
+
+  /**
+   * Get the MapTiler Cloud API key
+   */
+  get apiKey(): string {
+    return this._apiKey;
+  }
+
+  /**
+   * Set a the custom fetch function to replace the default one
+   */
+  set fetch(f: FetchFunction) {
+    clientConfig.fetch = f;
+  }
+
+  /**
+   * Get the fetch fucntion
+   */
+  get fetch(): FetchFunction | null {
+    return clientConfig.fetch;
+  }
+}
+
+const config = new SdkConfig();
+
+export { config, SdkConfig };

package/src/defaults.ts

@@ -0,0 +1,20 @@
+import { Language } from "./language";
+
+/**
+ * Some default settings for the SDK
+ */
+const defaults = {
+  maptilerLogoURL: "https://api.maptiler.com/resources/logo.svg",
+  maptilerURL: "https://www.maptiler.com/",
+  maptilerApiHost: "api.maptiler.com",
+  rtlPluginURL:
+    "https://cdn.maptiler.com/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.min.js",
+  primaryLanguage: Language.AUTO,
+  secondaryLanguage: Language.LOCAL,
+  terrainSourceURL: "https://api.maptiler.com/tiles/terrain-rgb/tiles.json",
+  terrainSourceId: "maptiler-terrain",
+};
+
+Object.freeze(defaults);
+
+export { defaults };