@maptiler/sdk 1.1.1 → 1.2.0

package/src/MaptilerGeolocateControl.ts

@@ -1,4 +1,4 @@
-import type { LngLatLike } from "maplibre-gl";
+import type { LngLatLike, MapLibreEvent } from "maplibre-gl";
 import maplibregl from "maplibre-gl";
 import { GeolocateControl } from "./GeolocateControl";
 import { DOMcreate } from "./tools";
@@ -7,6 +7,10 @@ const Marker = maplibregl.Marker;
 const LngLat = maplibregl.LngLat;
 const LngLatBounds = maplibregl.LngLatBounds;
 
+type MoveEndEvent = MapLibreEvent<
+  MouseEvent | TouchEvent | WheelEvent | undefined
+> & { geolocateSource?: boolean };
+
 /**
  * The MaptilerGeolocateControl is an extension of the original GeolocateControl
  * with a few changes. In this version, the active mode persists as long as the
@@ -22,10 +26,10 @@ export class MaptilerGeolocateControl extends GeolocateControl {
    * @param {Position} position the Geolocation API Position
    * @private
    */
-  _updateCamera(position: GeolocationPosition) {
+  _updateCamera = (position: GeolocationPosition) => {
     const center = new LngLat(
       position.coords.longitude,
-      position.coords.latitude
+      position.coords.latitude,
     );
     const radius = position.coords.accuracy;
     const bearing = this._map.getBearing();
@@ -37,7 +41,7 @@ export class MaptilerGeolocateControl extends GeolocateControl {
 
     const currentMapZoom = this._map.getZoom();
 
-    if (currentMapZoom > this.options.fitBoundsOptions.maxZoom) {
+    if (currentMapZoom > (this.options?.fitBoundsOptions?.maxZoom ?? 30)) {
       options.zoom = currentMapZoom;
     }
 
@@ -73,30 +77,30 @@ export class MaptilerGeolocateControl extends GeolocateControl {
 
       this.lastUpdatedCenter = this._map.getCenter();
     });
-  }
+  };
 
-  _setupUI(supported: boolean) {
+  _setupUI = (supported: boolean) => {
     this.lastUpdatedCenter = this._map.getCenter();
 
     this._container.addEventListener("contextmenu", (e: MouseEvent) =>
-      e.preventDefault()
+      e.preventDefault(),
     );
     this._geolocateButton = DOMcreate(
       "button",
       "maplibregl-ctrl-geolocate",
-      this._container
+      this._container,
     );
     DOMcreate(
       "span",
       "maplibregl-ctrl-icon",
-      this._geolocateButton
+      this._geolocateButton,
     ).setAttribute("aria-hidden", "true");
     this._geolocateButton.type = "button";
 
     if (supported === false) {
       // warnOnce('Geolocation support is not available so the GeolocateControl will be disabled.');
       const title = this._map._getUIString(
-        "GeolocateControl.LocationNotAvailable"
+        "GeolocateControl.LocationNotAvailable",
       );
       this._geolocateButton.disabled = true;
       this._geolocateButton.title = title;
@@ -115,12 +119,11 @@ export class MaptilerGeolocateControl extends GeolocateControl {
     // when showUserLocation is enabled, keep the Geolocate button disabled until the device location marker is setup on the map
     if (this.options.showUserLocation) {
       this._dotElement = DOMcreate("div", "maplibregl-user-location-dot");
-
-      this._userLocationDotMarker = new Marker(this._dotElement);
+      this._userLocationDotMarker = new Marker({ element: this._dotElement });
 
       this._circleElement = DOMcreate(
         "div",
-        "maplibregl-user-location-accuracy-circle"
+        "maplibregl-user-location-accuracy-circle",
       );
       this._accuracyCircleMarker = new Marker({
         element: this._circleElement,
@@ -143,11 +146,11 @@ export class MaptilerGeolocateControl extends GeolocateControl {
     // is a zoom, rotation or pitch (where the center stays the same) then we can keep the ACTIVE_LOCK
     // mode ON.
     if (this.options.trackUserLocation) {
-      this._map.on("moveend", (event: any) => {
+      this._map.on("moveend", (event: MoveEndEvent) => {
         const fromResize =
           event.originalEvent && event.originalEvent.type === "resize";
         const movingDistance = this.lastUpdatedCenter.distanceTo(
-          this._map.getCenter()
+          this._map.getCenter(),
         );
 
         if (
@@ -158,17 +161,17 @@ export class MaptilerGeolocateControl extends GeolocateControl {
         ) {
           this._watchState = "BACKGROUND";
           this._geolocateButton.classList.add(
-            "maplibregl-ctrl-geolocate-background"
+            "maplibregl-ctrl-geolocate-background",
           );
           this._geolocateButton.classList.remove(
-            "maplibregl-ctrl-geolocate-active"
+            "maplibregl-ctrl-geolocate-active",
           );
 
           this.fire(new Event("trackuserlocationend"));
         }
       });
     }
-  }
+  };
 
   _updateCircleRadius() {
     if (
@@ -196,9 +199,9 @@ export class MaptilerGeolocateControl extends GeolocateControl {
     this._circleElement.style.height = `${circleDiameter}px`;
   }
 
-  _onZoom() {
+  _onZoom = () => {
     if (this.options.showUserLocation && this.options.showAccuracyCircle) {
       this._updateCircleRadius();
     }
-  }
+  };
 }

package/src/MaptilerLogoControl.ts

@@ -1,8 +1,7 @@
-import maplibregl from "maplibre-gl";
 import type { LogoOptions as LogoOptionsML } from "maplibre-gl";
 import { defaults } from "./defaults";
-import { Map } from "./Map";
 import { LogoControl } from "./LogoControl";
+import type { Map } from "./Map";
 
 type LogoOptions = LogoOptionsML & {
   logoURL?: string;
@@ -14,6 +13,7 @@ type LogoOptions = LogoOptionsML & {
  * any link URL. By default this is using MapTiler logo and URL.
  */
 export class MaptilerLogoControl extends LogoControl {
+  declare _compact: boolean;
   private logoURL = "";
   private linkURL = "";
 
@@ -26,7 +26,7 @@ export class MaptilerLogoControl extends LogoControl {
 
   onAdd(map: Map): HTMLElement {
     this._map = map;
-    this._compact = this.options && this.options.compact;
+    this._compact = this.options.compact ?? false;
     this._container = window.document.createElement("div");
     this._container.className = "maplibregl-ctrl";
     const anchor = window.document.createElement("a");

package/src/MaptilerNavigationControl.ts

@@ -1,7 +1,7 @@
 import { NavigationControl } from "./NavigationControl";
 
 type HTMLButtonElementPlus = HTMLButtonElement & {
-  clickFunction: (e?: any) => unknown;
+  clickFunction: (e?: Event) => unknown;
 };
 
 export class MaptilerNavigationControl extends NavigationControl {
@@ -15,7 +15,7 @@ export class MaptilerNavigationControl extends NavigationControl {
     // Removing the default click event
     this._compass.removeEventListener(
       "click",
-      (this._compass as HTMLButtonElementPlus).clickFunction
+      (this._compass as HTMLButtonElementPlus).clickFunction,
     );
 
     // Adding custom click event
@@ -40,7 +40,7 @@ export class MaptilerNavigationControl extends NavigationControl {
    */
   _createButton(
     className: string,
-    fn: (e?: any) => unknown
+    fn: (e?: Event) => unknown,
   ): HTMLButtonElementPlus {
     const button = super._createButton(className, fn) as HTMLButtonElementPlus;
     button.clickFunction = fn;
@@ -50,17 +50,20 @@ export class MaptilerNavigationControl extends NavigationControl {
   /**
    * Overloading: Limit how flat the compass icon can get
    */
-  _rotateCompassArrow() {
+  _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)
+            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/MaptilerTerrainControl.ts

@@ -1,32 +1,32 @@
 import { bindAll, DOMcreate, DOMremove } from "./tools";
 
-import { Map } from "./Map";
-import maplibregl from "maplibre-gl";
+import type { Map } from "./Map";
+import type { IControl } from "maplibre-gl";
 
 /**
  * A `MaptilerTerrainControl` control adds a button to turn terrain on and off
  * by triggering the terrain logic that is already deployed in the Map object.
  */
-export class MaptilerTerrainControl implements maplibregl.IControl {
-  _map: Map;
-  _container: HTMLElement;
-  _terrainButton: HTMLButtonElement;
+export class MaptilerTerrainControl implements IControl {
+  _map!: Map;
+  _container!: HTMLElement;
+  _terrainButton!: HTMLButtonElement;
 
   constructor() {
     bindAll(["_toggleTerrain", "_updateTerrainIcon"], this);
   }
 
-  onAdd(map: Map) {
+  onAdd(map: Map): HTMLElement {
     this._map = map;
     this._container = DOMcreate("div", "maplibregl-ctrl maplibregl-ctrl-group");
     this._terrainButton = DOMcreate(
       "button",
       "maplibregl-ctrl-terrain",
-      this._container
+      this._container,
     );
     DOMcreate("span", "maplibregl-ctrl-icon", this._terrainButton).setAttribute(
       "aria-hidden",
-      "true"
+      "true",
     );
     this._terrainButton.type = "button";
     this._terrainButton.addEventListener("click", this._toggleTerrain);
@@ -36,13 +36,14 @@ export class MaptilerTerrainControl implements maplibregl.IControl {
     return this._container;
   }
 
-  onRemove() {
+  onRemove(): void {
     DOMremove(this._container);
     this._map.off("terrain", this._updateTerrainIcon);
+    // @ts-expect-error: map will only be undefined on remove
     this._map = undefined;
   }
 
-  _toggleTerrain() {
+  _toggleTerrain(): void {
     if (this._map.hasTerrain()) {
       this._map.disableTerrain();
     } else {
@@ -52,19 +53,19 @@ export class MaptilerTerrainControl implements maplibregl.IControl {
     this._updateTerrainIcon();
   }
 
-  _updateTerrainIcon() {
+  _updateTerrainIcon(): void {
     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"
+        "TerrainControl.disableTerrain",
       );
     } else {
       this._terrainButton.classList.add("maplibregl-ctrl-terrain");
       this._terrainButton.title = this._map._getUIString(
-        "TerrainControl.enableTerrain"
+        "TerrainControl.enableTerrain",
       );
     }
   }

package/src/Minimap.ts

@@ -0,0 +1,373 @@
+/**
+ * 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/Point.ts

@@ -10,8 +10,6 @@ export type Matrix2 = [number, number, number, number];
 
 /**
  * a point
- * @param x
- * @param y
  */
 export class Point {
   public x: number;
@@ -249,7 +247,7 @@ export class Point {
    * @param {Point} other the other point
    * @return {boolean} whether the points are equal
    */
-  equals(other): boolean {
+  equals(other: Point): boolean {
     return this.x === other.x && this.y === other.y;
   }
 
@@ -258,7 +256,7 @@ export class Point {
    * @param {Point} p the other point
    * @return {Number} distance
    */
-  dist(p): number {
+  dist(p: Point): number {
     return Math.sqrt(this.distSqr(p));
   }
 
@@ -269,7 +267,7 @@ export class Point {
    * @param {Point} p the other point
    * @return {Number} distance
    */
-  distSqr(p): number {
+  distSqr(p: Point): number {
     const dx = p.x - this.x;
     const dy = p.y - this.y;
     return dx * dx + dy * dy;