@maptiler/sdk 1.0.0

package/rollup.config.js

@@ -0,0 +1,161 @@
+import os from "os";
+import path from "path";
+import dts from "rollup-plugin-dts";
+import esbuild from "rollup-plugin-esbuild";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import globals from "rollup-plugin-node-globals";
+import commonjs from "@rollup/plugin-commonjs";
+import copy from 'rollup-plugin-copy-merge'
+import json from '@rollup/plugin-json';
+import execute from "rollup-plugin-shell";
+
+const outputName = "maptiler-sdk";
+const externals = ["maplibre-gl", "@maptiler/client", "@mapbox/point-geometry", "uuid", "@mapbox/unitbezier", "events", "js-base64"];
+
+const cssMaplibreFilepath = "node_modules/maplibre-gl/dist/maplibre-gl.css";
+const cssTemplateFilepath = "src/style/style_template.css";
+const cssIntermatdiateFilepath = path.join(os.tmpdir(), `${outputName}-style.css`);
+const cssDistribution = `dist/${outputName}.css`;
+
+const replaceCssPath = execute({ commands: [`node scripts/replace-path-with-content.js ${cssTemplateFilepath} ${cssIntermatdiateFilepath}`], hook: "buildStart" })
+
+const copyCssPlugin = copy({
+  targets: [
+    {
+      src: [cssMaplibreFilepath, cssIntermatdiateFilepath],
+      file: cssDistribution,
+    },
+  ],
+});
+
+const copyUmdBundle = copy({
+  targets: [
+    {
+      src: `dist/${outputName}.umd.js`,
+      dest: "demos/",
+    },
+    {
+      src: `dist/${outputName}.css`,
+      dest: "demos/",
+    },
+  ],
+  hook: "writeBundle"
+});
+
+
+const bundles = [ 
+  // ES module, not minified + sourcemap
+  {
+    plugins: [
+      replaceCssPath,
+      copyCssPlugin,
+      json(),
+      esbuild()
+    ],
+    output: [
+      {
+        file: `dist/${outputName}.mjs`,
+        format: "es",
+        sourcemap: true,
+      },
+    ], 
+    input: "src/index.ts", 
+    watch: {
+      include: "src/**",
+    }, 
+    external: externals, 
+  },
+
+  // UMD module, not minified
+  {
+    plugins: [
+      replaceCssPath,
+      copyCssPlugin,
+      nodeResolve({
+        preferBuiltins: false,
+      }), // for the standalone UMD, we want to resolve so that the bundle contains all the dep.
+      commonjs({ include: "node_modules/**" }),
+      globals(),
+      json(),
+      esbuild(),
+      copyUmdBundle, 
+    ],
+    output: [
+      {
+        name: "maptilersdk",
+        file: `dist/${outputName}.umd.js`,
+        format: "umd",
+        sourcemap: true,
+      },
+    ],
+    input: "src/index.ts",
+    watch: {
+      include: "src/**",
+    },
+  },
+
+  // types
+  {
+    plugins: [dts()], 
+    output: {
+      file: `dist/${outputName}.d.ts`,
+      format: "es",
+    },
+    input: "src/index.ts",
+  },
+];
+
+if (process.env.NODE_ENV === "production") {
+  bundles.push(
+    // ES module, minified
+    {
+      plugins: [
+        replaceCssPath,
+        copyCssPlugin,
+        json(),
+        esbuild({
+          sourceMap: false,
+          minify: true,
+        }),
+      ],
+      output: [
+        {
+          file: `dist/${outputName}.min.mjs`,
+          format: "es",
+        },
+      ],
+      input: "src/index.ts",
+      external: externals,
+    },
+    {
+      plugins: [
+        replaceCssPath,
+        copyCssPlugin,
+        nodeResolve({
+          preferBuiltins: false,
+        }), // for the standalone UMD, we want to resolve so that the bundle contains all the dep.
+        commonjs({ include: "node_modules/**" }),
+        globals(),
+        json(),
+        esbuild({
+          sourceMap: false,
+          minify: true,
+        }),
+      ],
+      output: [
+        {
+          name: "maptilersdk",
+          file: `dist/${outputName}.umd.min.js`,
+          format: "umd",
+          sourcemap: false,
+        },
+      ],
+      input: "src/index.ts",
+      watch: {
+        include: "src/**",
+      },
+    },
+  );
+}
+
+export default bundles;

package/scripts/replace-path-with-content.js

@@ -0,0 +1,51 @@
+/**
+ * This script takes a text file as input and a text file as output.
+ * The input text is supposed to contain occurences of filepath between
+ * square brackets such as "foo bar [some/file/path.txt] foofoo barbar".
+ * 
+ * This script replaces this pattern by the actual content of the file
+ * between square brackets.
+ * 
+ * The main purpose is to inject actual SVG string (URL encoded) into CSS
+ * for `background-image` properties. If need be, we could also apply the
+ * same logic for more file types such as png with base64 string.
+ * 
+ * This script is used by rollup.config.js , so check there to see it in
+ * application.
+ */
+
+import fs from 'fs';
+import { exit } from 'process';
+
+if (process.argv.length !== 4) {
+  console.error("This script takes 2 arguments: input_filepath.txt output_filpath.txt")
+  exit(1);
+}
+
+let text = fs.readFileSync(process.argv[2], "utf8");
+
+// replace based on file extension
+const transforms = {
+  svg: (filepath) => {
+    const fileText = encodeURIComponent(fs.readFileSync(filepath, "utf8"));
+    return `"data:image/svg+xml;charset=utf-8,${fileText}"`;
+  }
+}
+
+// Find all occurrences of file paths between square brackets
+let filePaths = text.match(/\[(.*?)\]/g);
+
+// Replace all occurrences of file paths with the actual text contained in the files
+filePaths.forEach(filePath => {
+  let filepath = filePath.slice(1, -1); // remove the square brackets
+  const extension = filepath.split(".").pop().toLowerCase();
+
+  if (!(extension in transforms)) {
+    return;
+  }
+
+  text = text.replace(filePath, transforms[extension](filepath))
+});
+
+// console.log(text);
+fs.writeFileSync(process.argv[3], text);

package/src/CustomGeolocateControl.ts

@@ -0,0 +1,193 @@
+import { GeolocateControl, LngLat, LngLatLike, Marker } from "maplibre-gl";
+import { DOMcreate } from "./tools";
+
+export class CustomGeolocateControl extends GeolocateControl {
+  private lastUpdatedCenter: LngLat;
+  private lastUpdatedZoom: number;
+
+  /**
+   * 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,
+    };
+
+    console.log("moving camera");
+
+    this._map.fitBounds(center.toBounds(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 = () => {
+      console.log("DISRUPTED FITTING!");
+      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", () => {
+      console.log("done moving, with disruption:", hasFittingBeenDisrupted);
+
+      // 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();
+      this.lastUpdatedZoom = this._map.getZoom();
+    });
+  }
+
+  _setupUI(supported: boolean) {
+    this.lastUpdatedCenter = this._map.getCenter();
+    this.lastUpdatedZoom = this._map.getZoom();
+
+    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(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: any) => {
+        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/CustomLogoControl.ts

@@ -0,0 +1,59 @@
+import maplibregl from "maplibre-gl";
+import { defaults } from "./defaults";
+import { Map } from "./Map";
+
+type LogoOptions = maplibregl.LogoOptions & {
+  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 CustomLogoControl extends maplibregl.LogoControl {
+  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 && this.options.compact;
+    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 nofollow";
+    anchor.href = this.linkURL;
+    anchor.setAttribute(
+      "aria-label",
+      this._map._getUIString("LogoControl.Title")
+    );
+    anchor.setAttribute("rel", "noopener nofollow");
+    this._container.appendChild(anchor);
+    this._container.style.display = "block";
+
+    this._map.on("resize", this._updateCompact);
+    this._updateCompact();
+
+    return this._container;
+  }
+}