@maptiler/sdk 1.0.11 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptiler/sdk",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
   "module": "dist/maptiler-sdk.mjs",
   "types": "dist/maptiler-sdk.d.ts",
@@ -60,10 +60,10 @@
     "typescript": "^5.0.4"
   },
   "dependencies": {
-    "@maptiler/client": "^1.3.0",
+    "@maptiler/client": "^1.5.0",
     "events": "^3.3.0",
     "js-base64": "^3.7.4",
-    "maplibre-gl": "3.0.0-pre.4",
+    "maplibre-gl": "3.0.1",
     "uuid": "^9.0.0"
   }
 }

package/readme.md

@@ -1,5 +1,5 @@
-
 <p align="center">
+  <a href="https://docs.maptiler.com/sdk-js/">official page →</a><br>
   <img src="images/maptiler-sdk-logo.svg" width="400px">
 </p>
 
@@ -372,11 +372,12 @@ Again, it will only apply `ENGLISH` as the language of this specific map instanc
 
 The list of supported languages is built-in and can be found [here](src/language.ts). In addition, there are spacial language *flags*:
 - `Language.AUTO` **[DEFAULT]** uses the language defined in the web browser
+- `Language.STYLE_LOCK` to strictly use the language defined in the style. Prevents any further language update
 - `Language.LOCAL` uses the language local to each country
 - `Language.LATIN` uses a default with latin characters
 - `Language.NON_LATIN` uses a default with non-latin characters
 
-Whenever a label is not supported in the defined language, it falls back to `Language.LATIN`.
+Whenever a label is not supported in the defined language, it falls back to `Language.LOCAL`.
 
 Here is a sample of some compatible languages:
 ![](images/screenshots/multilang.gif)

package/src/Map.ts

@@ -8,15 +8,13 @@ import type {
   MapDataEvent,
   Tile,
   RasterDEMSourceSpecification,
-  TerrainSpecification,
-  MapTerrainEvent,
+  RequestTransformFunction,
 } from "maplibre-gl";
-import { v4 as uuidv4 } from "uuid";
 import { ReferenceMapStyle, MapStyleVariant } from "@maptiler/client";
-import { config, SdkConfig } from "./config";
+import { config, MAPTILER_SESSION_ID, SdkConfig } from "./config";
 import { defaults } from "./defaults";
 import { MaptilerLogoControl } from "./MaptilerLogoControl";
-import { enableRTL } from "./tools";
+import { combineTransformRequest, enableRTL } from "./tools";
 import {
   getBrowserLanguage,
   isLanguageSupported,
@@ -56,8 +54,6 @@ export type StyleSwapOptions = {
   transformStyle?: TransformStyleFunction;
 };
 
-const MAPTILER_SESSION_ID = uuidv4();
-
 export const GeolocationType: {
   POINT: "POINT";
   COUNTRY: "COUNTRY";
@@ -197,37 +193,7 @@ export class Map extends maplibregl.Map {
       ...options,
       style,
       maplibreLogo: false,
-
-      transformRequest: (url: string) => {
-        let reqUrl = null;
-
-        try {
-          // The URL is expected to be absolute.
-          // Yet, if it's local we just return it without assuming a 'base' url (in the URL constructor)
-          // and we let the URL be locally resolved with a potential base path.
-          reqUrl = new URL(url);
-        } catch (e) {
-          return {
-            url,
-            headers: {},
-          };
-        }
-
-        if (reqUrl.host === defaults.maptilerApiHost) {
-          if (!reqUrl.searchParams.has("key")) {
-            reqUrl.searchParams.append("key", config.apiKey);
-          }
-
-          if (config.session) {
-            reqUrl.searchParams.append("mtsid", MAPTILER_SESSION_ID);
-          }
-        }
-
-        return {
-          url: reqUrl.href,
-          headers: {},
-        };
-      },
+      transformRequest: combineTransformRequest(options.transformRequest),
     });
 
     this.primaryLanguage = options.language ?? config.primaryLanguage;
@@ -384,7 +350,11 @@ export class Map extends maplibregl.Map {
 
         // if attribution in option is `false` but the the logo shows up in the tileJson, then the attribution must show anyways
         if (options.attributionControl === false) {
-          this.addControl(new AttributionControl(options));
+          this.addControl(
+            new AttributionControl({
+              customAttribution: options.customAttribution,
+            })
+          );
         }
       } else if (options.maptilerLogo) {
         this.addControl(new MaptilerLogoControl(), options.logoPosition);
@@ -586,6 +556,13 @@ export class Map extends maplibregl.Map {
    * @param language
    */
   setPrimaryLanguage(language: LanguageString = defaults.primaryLanguage) {
+    if (this.primaryLanguage === Language.STYLE_LOCK) {
+      console.warn(
+        "The language cannot be changed because this map has been instantiated with the STYLE_LOCK language flag."
+      );
+      return;
+    }
+
     if (!isLanguageSupported(language as string)) {
       return;
     }
@@ -617,7 +594,7 @@ export class Map extends maplibregl.Map {
         "case",
         ["has", langStr],
         ["get", langStr],
-        ["get", "name:latin"],
+        ["get", "name"],
       ];
 
       for (let i = 0; i < layers.length; i += 1) {
@@ -751,6 +728,14 @@ export class Map extends maplibregl.Map {
    * @param language
    */
   setSecondaryLanguage(language: LanguageString = defaults.secondaryLanguage) {
+    // Using the lock flag as a primaty language also applies to the secondary
+    if (this.primaryLanguage === Language.STYLE_LOCK) {
+      console.warn(
+        "The language cannot be changed because this map has been instantiated with the STYLE_LOCK language flag."
+      );
+      return;
+    }
+
     if (!isLanguageSupported(language as string)) {
       return;
     }
@@ -1192,4 +1177,20 @@ export class Map extends maplibregl.Map {
   getMaptilerSessionId(): string {
     return MAPTILER_SESSION_ID;
   }
+
+  /**
+   *  Updates the requestManager's transform request with a new function.
+   *
+   * @param transformRequest A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.
+   *    Expected to return an object with a `url` property and optionally `headers` and `credentials` properties
+   *
+   * @returns {Map} `this`
+   *
+   *  @example
+   *  map.setTransformRequest((url: string, resourceType: string) => {});
+   */
+  setTransformRequest(transformRequest: RequestTransformFunction) {
+    super.setTransformRequest(combineTransformRequest(transformRequest));
+    return this;
+  }
 }

package/src/MaptilerGeolocateControl.ts

@@ -5,6 +5,7 @@ import { DOMcreate } from "./tools";
 
 const Marker = maplibregl.Marker;
 const LngLat = maplibregl.LngLat;
+const LngLatBounds = maplibregl.LngLatBounds;
 
 /**
  * The MaptilerGeolocateControl is an extension of the original GeolocateControl
@@ -40,7 +41,7 @@ export class MaptilerGeolocateControl extends GeolocateControl {
       options.zoom = currentMapZoom;
     }
 
-    this._map.fitBounds(center.toBounds(radius), options, {
+    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
     });
 

package/src/MaptilerLogoControl.ts

@@ -43,13 +43,10 @@ export class MaptilerLogoControl extends LogoControl {
     anchor.style.height = "30px";
 
     anchor.target = "_blank";
-    anchor.rel = "noopener nofollow";
+    anchor.rel = "noopener";
     anchor.href = this.linkURL;
-    anchor.setAttribute(
-      "aria-label",
-      this._map._getUIString("LogoControl.Title")
-    );
-    anchor.setAttribute("rel", "noopener nofollow");
+    anchor.setAttribute("aria-label", "MapTiler logo");
+    anchor.setAttribute("rel", "noopener");
     this._container.appendChild(anchor);
     this._container.style.display = "block";
 

package/src/config.ts

@@ -1,8 +1,11 @@
 import EventEmitter from "events";
 import { Language, LanguageString } from "./language";
 import { config as clientConfig, FetchFunction } from "@maptiler/client";
+import { v4 as uuidv4 } from "uuid";
 import { Unit } from "./unit";
 
+export const MAPTILER_SESSION_ID = uuidv4();
+
 /**
  * Configuration class for the SDK
  */

package/src/index.ts

@@ -11,7 +11,7 @@ export * from "maplibre-gl";
 import maplibregl from "maplibre-gl";
 
 const {
-  supported,
+  // supported,
   setRTLTextPlugin,
   getRTLTextPluginStatus,
   LngLat,
@@ -50,7 +50,7 @@ const FullscreenControlMLGL = maplibregl.FullscreenControl;
 const TerrainControlMLGL = maplibregl.TerrainControl;
 
 export {
-  supported,
+  // supported,
   setRTLTextPlugin,
   getRTLTextPluginStatus,
   PopupMLGL,

package/src/language.ts

@@ -7,6 +7,13 @@ const Language = {
    */
   AUTO: "auto",
 
+  /**
+   * STYLE is a custom flag to keep the language of the map as defined into the style.
+   * If STYLE is set in the constructor, then further modification of the language
+   * with `.setLanguage()` is not possible.
+   */
+  STYLE_LOCK: "style_lock",
+
   /**
    * Default fallback languages that uses latin charaters
    */

package/src/tools.ts

@@ -1,5 +1,12 @@
 import maplibregl from "maplibre-gl";
+import type {
+  RequestParameters,
+  ResourceType,
+  RequestTransformFunction,
+} from "maplibre-gl";
 import { defaults } from "./defaults";
+import { config } from "./config";
+import { MAPTILER_SESSION_ID } from "./config";
 
 export function enableRTL() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -43,3 +50,70 @@ export function DOMremove(node: HTMLElement) {
     node.parentNode.removeChild(node);
   }
 }
+
+/**
+ * This function is meant to be used as transformRequest by any Map instance created.
+ * It adds the session ID as well as the MapTiler Cloud key from the config to all the requests
+ * performed on MapTiler Cloud servers.
+ * @param url
+ * @param resourceType
+ * @returns
+ */
+export function maptilerCloudTransformRequest(
+  url: string,
+  resourceType?: ResourceType
+): RequestParameters {
+  let reqUrl = null;
+
+  try {
+    // The URL is expected to be absolute.
+    // Yet, if it's local we just return it without assuming a 'base' url (in the URL constructor)
+    // and we let the URL be locally resolved with a potential base path.
+    reqUrl = new URL(url);
+  } catch (e) {
+    return {
+      url,
+    };
+  }
+
+  if (reqUrl.host === defaults.maptilerApiHost) {
+    if (!reqUrl.searchParams.has("key")) {
+      reqUrl.searchParams.append("key", config.apiKey);
+    }
+
+    if (config.session) {
+      reqUrl.searchParams.append("mtsid", MAPTILER_SESSION_ID);
+    }
+  }
+
+  return {
+    url: reqUrl.href,
+  };
+}
+
+/**
+ * This combines a user-defined tranformRequest function (optionnal)
+ * with the MapTiler Cloud-specific one: maptilerCloudTransformRequest
+ * @param userDefinedRTF
+ * @returns
+ */
+export function combineTransformRequest(
+  userDefinedRTF: RequestTransformFunction = null
+): RequestTransformFunction {
+  return function (
+    url: string,
+    resourceType?: ResourceType
+  ): RequestParameters {
+    if (userDefinedRTF) {
+      const rp = userDefinedRTF(url, resourceType);
+      const rp2 = maptilerCloudTransformRequest(rp.url);
+
+      return {
+        ...rp,
+        ...rp2,
+      };
+    } else {
+      return maptilerCloudTransformRequest(url);
+    }
+  };
+}