@maptiler/sdk 1.2.1 → 2.0.0

package/src/MaptilerGeolocateControl.ts

@@ -1,207 +0,0 @@
-import type { LngLatLike, MapLibreEvent } from "maplibre-gl";
-import maplibregl from "maplibre-gl";
-import { GeolocateControl } from "./GeolocateControl";
-import { DOMcreate } from "./tools";
-
-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
- * location is still centered. This means it's robust to rotation, pitch and zoom.
- *
- */
-export class MaptilerGeolocateControl extends GeolocateControl {
-  private lastUpdatedCenter = new LngLat(0, 0);
-
-  /**
-   * Update the camera location to center on the current position
-   *
-   * @param {Position} position the Geolocation API Position
-   * @private
-   */
-  _updateCamera = (position: GeolocationPosition) => {
-    const center = new LngLat(
-      position.coords.longitude,
-      position.coords.latitude,
-    );
-    const radius = position.coords.accuracy;
-    const bearing = this._map.getBearing();
-    const options = {
-      bearing,
-      ...this.options.fitBoundsOptions,
-      linear: true,
-    };
-
-    const currentMapZoom = this._map.getZoom();
-
-    if (currentMapZoom > (this.options?.fitBoundsOptions?.maxZoom ?? 30)) {
-      options.zoom = currentMapZoom;
-    }
-
-    this._map.fitBounds(LngLatBounds.fromLngLat(center, radius), options, {
-      geolocateSource: true, // tag this camera change so it won't cause the control to change to background state
-    });
-
-    let hasFittingBeenDisrupted = false;
-
-    const flagFittingDisruption = () => {
-      hasFittingBeenDisrupted = true;
-    };
-
-    this._map.once("click", flagFittingDisruption);
-    this._map.once("dblclick", flagFittingDisruption);
-    this._map.once("dragstart", flagFittingDisruption);
-    this._map.once("mousedown", flagFittingDisruption);
-    this._map.once("touchstart", flagFittingDisruption);
-    this._map.once("wheel", flagFittingDisruption);
-
-    this._map.once("moveend", () => {
-      // Removing the events if not used
-      this._map.off("click", flagFittingDisruption);
-      this._map.off("dblclick", flagFittingDisruption);
-      this._map.off("dragstart", flagFittingDisruption);
-      this._map.off("mousedown", flagFittingDisruption);
-      this._map.off("touchstart", flagFittingDisruption);
-      this._map.off("wheel", flagFittingDisruption);
-
-      if (hasFittingBeenDisrupted) {
-        return;
-      }
-
-      this.lastUpdatedCenter = this._map.getCenter();
-    });
-  };
-
-  _setupUI = (supported: boolean) => {
-    this.lastUpdatedCenter = this._map.getCenter();
-
-    this._container.addEventListener("contextmenu", (e: MouseEvent) =>
-      e.preventDefault(),
-    );
-    this._geolocateButton = DOMcreate(
-      "button",
-      "maplibregl-ctrl-geolocate",
-      this._container,
-    );
-    DOMcreate(
-      "span",
-      "maplibregl-ctrl-icon",
-      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",
-      );
-      this._geolocateButton.disabled = true;
-      this._geolocateButton.title = title;
-      this._geolocateButton.setAttribute("aria-label", title);
-    } else {
-      const title = this._map._getUIString("GeolocateControl.FindMyLocation");
-      this._geolocateButton.title = title;
-      this._geolocateButton.setAttribute("aria-label", title);
-    }
-
-    if (this.options.trackUserLocation) {
-      this._geolocateButton.setAttribute("aria-pressed", "false");
-      this._watchState = "OFF";
-    }
-
-    // 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({ element: this._dotElement });
-
-      this._circleElement = DOMcreate(
-        "div",
-        "maplibregl-user-location-accuracy-circle",
-      );
-      this._accuracyCircleMarker = new Marker({
-        element: this._circleElement,
-        pitchAlignment: "map",
-      });
-
-      if (this.options.trackUserLocation) this._watchState = "OFF";
-
-      this._map.on("move", this._onZoom);
-    }
-
-    this._geolocateButton.addEventListener("click", this.trigger.bind(this));
-
-    this._setup = true;
-
-    // when the camera is changed (and it's not as a result of the Geolocation Control) change
-    // the watch mode to background watch, so that the marker is updated but not the camera.
-    // Addition: Yet the status change does not occur if the ditance it has moved to is less than
-    // one meter from the last auto-updated position. This is to guarrantee that if the move
-    // 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: MoveEndEvent) => {
-        const fromResize =
-          event.originalEvent && event.originalEvent.type === "resize";
-        const movingDistance = this.lastUpdatedCenter.distanceTo(
-          this._map.getCenter(),
-        );
-
-        if (
-          !event.geolocateSource &&
-          this._watchState === "ACTIVE_LOCK" &&
-          !fromResize &&
-          movingDistance > 1
-        ) {
-          this._watchState = "BACKGROUND";
-          this._geolocateButton.classList.add(
-            "maplibregl-ctrl-geolocate-background",
-          );
-          this._geolocateButton.classList.remove(
-            "maplibregl-ctrl-geolocate-active",
-          );
-
-          this.fire(new Event("trackuserlocationend"));
-        }
-      });
-    }
-  };
-
-  _updateCircleRadius() {
-    if (
-      this._watchState !== "BACKGROUND" &&
-      this._watchState !== "ACTIVE_LOCK"
-    ) {
-      return;
-    }
-
-    const lastKnownLocation: LngLatLike = [
-      this._lastKnownPosition.coords.longitude,
-      this._lastKnownPosition.coords.latitude,
-    ];
-
-    const projectedLocation = this._map.project(lastKnownLocation);
-    const a = this._map.unproject([projectedLocation.x, projectedLocation.y]);
-    const b = this._map.unproject([
-      projectedLocation.x + 20,
-      projectedLocation.y,
-    ]);
-    const metersPerPixel = a.distanceTo(b) / 20;
-
-    const circleDiameter = Math.ceil((2.0 * this._accuracy) / metersPerPixel);
-    this._circleElement.style.width = `${circleDiameter}px`;
-    this._circleElement.style.height = `${circleDiameter}px`;
-  }
-
-  _onZoom = () => {
-    if (this.options.showUserLocation && this.options.showAccuracyCircle) {
-      this._updateCircleRadius();
-    }
-  };
-}

package/src/MaptilerLogoControl.ts

@@ -1,58 +0,0 @@
-import type { LogoOptions as LogoOptionsML } from "maplibre-gl";
-import { defaults } from "./defaults";
-import { LogoControl } from "./LogoControl";
-import type { Map } from "./Map";
-
-type LogoOptions = LogoOptionsML & {
-  logoURL?: string;
-  linkURL?: string;
-};
-
-/**
- * This LogoControl extends the MapLibre LogoControl but instead can use any image URL and
- * any link URL. By default this is using MapTiler logo and URL.
- */
-export class MaptilerLogoControl extends LogoControl {
-  declare _compact: boolean;
-  private logoURL = "";
-  private linkURL = "";
-
-  constructor(options: LogoOptions = {}) {
-    super(options);
-
-    this.logoURL = options.logoURL ?? defaults.maptilerLogoURL;
-    this.linkURL = options.linkURL ?? defaults.maptilerURL;
-  }
-
-  onAdd(map: Map): HTMLElement {
-    this._map = map;
-    this._compact = this.options.compact ?? false;
-    this._container = window.document.createElement("div");
-    this._container.className = "maplibregl-ctrl";
-    const anchor = window.document.createElement("a");
-    anchor.style.backgroundRepeat = "no-repeat";
-    anchor.style.cursor = "pointer";
-    anchor.style.display = "block";
-    anchor.style.height = "23px";
-    anchor.style.margin = "0 0 -4px -4px";
-    anchor.style.overflow = "hidden";
-    anchor.style.width = "88px";
-    anchor.style.backgroundImage = `url(${this.logoURL})`;
-    anchor.style.backgroundSize = "100px 30px";
-    anchor.style.width = "100px";
-    anchor.style.height = "30px";
-
-    anchor.target = "_blank";
-    anchor.rel = "noopener";
-    anchor.href = this.linkURL;
-    anchor.setAttribute("aria-label", "MapTiler logo");
-    anchor.setAttribute("rel", "noopener");
-    this._container.appendChild(anchor);
-    this._container.style.display = "block";
-
-    this._map.on("resize", this._updateCompact);
-    this._updateCompact();
-
-    return this._container;
-  }
-}

package/src/MaptilerNavigationControl.ts

@@ -1,69 +0,0 @@
-import { NavigationControl } from "./NavigationControl";
-
-type HTMLButtonElementPlus = HTMLButtonElement & {
-  clickFunction: (e?: Event) => unknown;
-};
-
-export class MaptilerNavigationControl extends 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?: Event) => 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/MaptilerTerrainControl.ts

@@ -1,72 +0,0 @@
-import { bindAll, DOMcreate, DOMremove } from "./tools";
-
-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 IControl {
-  _map!: Map;
-  _container!: HTMLElement;
-  _terrainButton!: HTMLButtonElement;
-
-  constructor() {
-    bindAll(["_toggleTerrain", "_updateTerrainIcon"], this);
-  }
-
-  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,
-    );
-    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(): void {
-    DOMremove(this._container);
-    this._map.off("terrain", this._updateTerrainIcon);
-    // @ts-expect-error: map will only be undefined on remove
-    this._map = undefined;
-  }
-
-  _toggleTerrain(): void {
-    if (this._map.hasTerrain()) {
-      this._map.disableTerrain();
-    } else {
-      this._map.enableTerrain();
-    }
-
-    this._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",
-      );
-    } else {
-      this._terrainButton.classList.add("maplibregl-ctrl-terrain");
-      this._terrainButton.title = this._map._getUIString(
-        "TerrainControl.enableTerrain",
-      );
-    }
-  }
-}

package/src/Marker.ts

@@ -1,13 +0,0 @@
-/**
- * This is an extension of MapLibre Marker 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 Marker extends maplibregl.Marker {
-  addTo(map: Map | MapMLGL): this {
-    return super.addTo(map as MapMLGL);
-  }
-}