@maptiler/sdk 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptiler/sdk",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
   "module": "dist/maptiler-sdk.mjs",
   "types": "dist/maptiler-sdk.d.ts",
@@ -62,7 +62,7 @@
     "typescript": "^4.8.4"
   },
   "dependencies": {
-    "@maptiler/client": "^1.1.3",
+    "@maptiler/client": "^1.3.0",
     "events": "^3.3.0",
     "js-base64": "^3.7.4",
     "maplibre-gl": "^3.0.0-pre.3",

package/readme.md

@@ -509,9 +509,12 @@ In the following static map functions, the `option` object features a `style` pr
 - `MapStyle.STREETS`, reference style for navigation and city exploration
   - `MapStyle.STREETS.DARK` (variant)
   - `MapStyle.STREETS.LIGHT` (variant)
+  - `MapStyle.STREETS.NIGHT` (variant)
   - `MapStyle.STREETS.PASTEL` (variant)
 - `MapStyle.OUTDOOR` reference style for adventure
+  - `MapStyle.OUTDOOR.DARK` (variant)
 - `MapStyle.WINTER` reference style for winter adventure
+  - `MapStyle.WINTER.DARK` (variant)
 - `MapStyle.SATELLITE` reference style satellite and airborne imagery (no variants)
 - `MapStyle.HYBRID` reference style satellite and airborne imagery with labels (no variants)
 - `MapStyle.BASIC` reference style for minimalist design and general purpose

package/src/AttributionControl.ts

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

package/src/CanvasSource.ts

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

package/src/FullscreenControl.ts

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

package/src/GeoJSONSource.ts

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

package/src/GeolocateControl.ts

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

package/src/ImageSource.ts

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

package/src/LogoControl.ts

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

package/src/Map.ts

@@ -23,6 +23,9 @@ import { MaptilerTerrainControl } from "./MaptilerTerrainControl";
 import { MaptilerNavigationControl } from "./MaptilerNavigationControl";
 import { geolocation } from "@maptiler/client";
 import { MaptilerGeolocateControl } from "./MaptilerGeolocateControl";
+import { AttributionControl } from "./AttributionControl";
+import { ScaleControl } from "./ScaleControl";
+import { FullscreenControl } from "./FullscreenControl";
 
 // StyleSwapOptions is not exported by Maplibre, but we can redefine it (used for setStyle)
 export type TransformStyleFunction = (
@@ -136,18 +139,12 @@ export type MapOptions = Omit<MapOptionsML, "style" | "maplibreLogo"> & {
  * The Map class can be instanciated to display a map in a `<div>`
  */
 export class Map extends maplibregl.Map {
-  private languageShouldUpdate = false;
-  private isStyleInitialized = false;
   private isTerrainEnabled = false;
   private terrainExaggeration = 1;
   private primaryLanguage: LanguageString | null = null;
   private secondaryLanguage: LanguageString | null = null;
 
   constructor(options: MapOptions) {
-    // if (options.language) {
-    //   config.primaryLanguage = options.language;
-    // }
-
     if (options.apiKey) {
       config.apiKey = options.apiKey;
     }
@@ -206,7 +203,8 @@ export class Map extends maplibregl.Map {
     this.once("styledata", async () => {
       // Not using geolocation centering if...
 
-      if (options.geolocate === false) {
+      // the geolcoate option is not provided or is falsy
+      if (!options.geolocate) {
         return;
       }
 
@@ -335,7 +333,7 @@ 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 maplibregl.AttributionControl(options));
+          this.addControl(new AttributionControl(options));
         }
       } else if (options.maptilerLogo) {
         this.addControl(new MaptilerLogoControl(), options.logoPosition);
@@ -353,7 +351,7 @@ export class Map extends maplibregl.Map {
             : options.scaleControl
         ) as ControlPosition;
 
-        const scaleControl = new maplibregl.ScaleControl({ unit: config.unit });
+        const scaleControl = new ScaleControl({ unit: config.unit });
         this.addControl(scaleControl, position);
         config.on("unit", (unit) => {
           scaleControl.setUnit(unit);
@@ -420,7 +418,7 @@ export class Map extends maplibregl.Map {
             : options.fullscreenControl
         ) as ControlPosition;
 
-        this.addControl(new maplibregl.FullscreenControl({}), position);
+        this.addControl(new FullscreenControl({}), position);
       }
     });
 

package/src/MaptilerGeolocateControl.ts

@@ -1,8 +1,8 @@
 import type { LngLatLike } from "maplibre-gl";
 import maplibregl from "maplibre-gl";
+import { GeolocateControl } from "./GeolocateControl";
 import { DOMcreate } from "./tools";
 
-const GeolocateControl = maplibregl.GeolocateControl;
 const Marker = maplibregl.Marker;
 const LngLat = maplibregl.LngLat;
 

package/src/MaptilerLogoControl.ts

@@ -2,6 +2,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";
 
 type LogoOptions = LogoOptionsML & {
   logoURL?: string;
@@ -12,7 +13,7 @@ type LogoOptions = LogoOptionsML & {
  * 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 maplibregl.LogoControl {
+export class MaptilerLogoControl extends LogoControl {
   private logoURL = "";
   private linkURL = "";
 

package/src/MaptilerNavigationControl.ts

@@ -1,10 +1,10 @@
-import maplibregl from "maplibre-gl";
+import { NavigationControl } from "./NavigationControl";
 
 type HTMLButtonElementPlus = HTMLButtonElement & {
   clickFunction: (e?: any) => unknown;
 };
 
-export class MaptilerNavigationControl extends maplibregl.NavigationControl {
+export class MaptilerNavigationControl extends NavigationControl {
   constructor() {
     super({
       showCompass: true,

package/src/Marker.ts

@@ -0,0 +1,13 @@
+/**
+ * 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);
+  }
+}

package/src/NavigationControl.ts

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

package/src/Popup.ts

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

package/src/RasterDEMTileSource.ts

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

package/src/RasterTileSource.ts

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

package/src/ScaleControl.ts

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

package/src/Style.ts

@@ -0,0 +1,13 @@
+/**
+ * This is an extension of MapLibre Style to make it fully type compatible with the SDK
+ */
+
+import maplibregl from "maplibre-gl";
+import type { Map as MapMLGL, StyleOptions } from "maplibre-gl";
+import { Map } from "./Map";
+
+export class Style extends maplibregl.Style {
+  constructor(map: Map, options: StyleOptions = {}) {
+    super(map as MapMLGL, options);
+  }
+}

package/src/TerrainControl.ts

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

package/src/VectorTileSource.ts

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

package/src/VideoSource.ts

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

package/src/index.ts

@@ -14,28 +14,18 @@ const {
   supported,
   setRTLTextPlugin,
   getRTLTextPluginStatus,
-  NavigationControl,
-  GeolocateControl,
-  AttributionControl,
-  LogoControl,
-  ScaleControl,
-  FullscreenControl,
-  TerrainControl,
-  Popup,
-  Marker,
-  Style,
+  // NavigationControl,
+  // GeolocateControl,
+  // AttributionControl,
+  // LogoControl,
+  // ScaleControl,
+  // FullscreenControl,
+  // TerrainControl,
   LngLat,
   LngLatBounds,
   MercatorCoordinate,
   Evented,
   AJAXError,
-  CanvasSource,
-  GeoJSONSource,
-  ImageSource,
-  RasterDEMTileSource,
-  RasterTileSource,
-  VectorTileSource,
-  VideoSource,
   prewarm,
   clearPrewarmedResources,
   version,
@@ -45,28 +35,47 @@ const {
   workerUrl,
   addProtocol,
   removeProtocol,
-
   // isSafari,
   // getPerformanceMetrics,
   // config,
   // Point,
 } = maplibregl;
 
+// We still want to export maplibregl.Map, but as a different name
+const MapMLGL = maplibregl.Map;
+const MarkerMLGL = maplibregl.Marker;
+const PopupMLGL = maplibregl.Popup;
+const StyleMLGL = maplibregl.Style;
+const CanvasSourceMLGL = maplibregl.CanvasSource;
+const GeoJSONSourceMLGL = maplibregl.GeoJSONSource;
+const ImageSourceMLGL = maplibregl.ImageSource;
+const RasterTileSourceMLGL = maplibregl.RasterTileSource;
+const RasterDEMTileSourceMLGL = maplibregl.RasterDEMTileSource;
+const VectorTileSourceMLGL = maplibregl.VectorTileSource;
+const VideoSourceMLGL = maplibregl.VideoSource;
+const NavigationControlMLGL = maplibregl.NavigationControl;
+const GeolocateControlMLGL = maplibregl.GeolocateControl;
+const AttributionControlMLGL = maplibregl.AttributionControl;
+const LogoControlMLGL = maplibregl.LogoControl;
+const ScaleControlMLGL = maplibregl.ScaleControl;
+const FullscreenControlMLGL = maplibregl.FullscreenControl;
+const TerrainControlMLGL = maplibregl.TerrainControl;
+
 export {
   supported,
   setRTLTextPlugin,
   getRTLTextPluginStatus,
   // Map,
-  NavigationControl,
-  GeolocateControl,
-  AttributionControl,
-  LogoControl,
-  ScaleControl,
-  FullscreenControl,
-  TerrainControl,
-  Popup,
-  Marker,
-  Style,
+  // NavigationControl,
+  // GeolocateControl,
+  // AttributionControl,
+  // LogoControl,
+  // ScaleControl,
+  // FullscreenControl,
+  // TerrainControl,
+  PopupMLGL,
+  MarkerMLGL,
+  StyleMLGL,
   LngLat,
   LngLatBounds,
   // Point,
@@ -74,13 +83,13 @@ export {
   Evented,
   AJAXError,
   // config,
-  CanvasSource,
-  GeoJSONSource,
-  ImageSource,
-  RasterDEMTileSource,
-  RasterTileSource,
-  VectorTileSource,
-  VideoSource,
+  CanvasSourceMLGL,
+  GeoJSONSourceMLGL,
+  ImageSourceMLGL,
+  RasterDEMTileSourceMLGL,
+  RasterTileSourceMLGL,
+  VectorTileSourceMLGL,
+  VideoSourceMLGL,
   prewarm,
   clearPrewarmedResources,
   version,
@@ -90,13 +99,63 @@ export {
   workerUrl,
   addProtocol,
   removeProtocol,
+  MapMLGL,
   // isSafari,
   // getPerformanceMetrics
 };
 
+// Exporting types of class instances from MapLibre:
+export type NavigationControlMLGL = InstanceType<typeof NavigationControlMLGL>;
+export type GeolocateControlMLGL = InstanceType<typeof GeolocateControlMLGL>;
+export type AttributionControlMLGL = InstanceType<
+  typeof AttributionControlMLGL
+>;
+export type LogoControlMLGL = InstanceType<typeof LogoControlMLGL>;
+export type ScaleControlMLGL = InstanceType<typeof ScaleControlMLGL>;
+export type FullscreenControlMLGL = InstanceType<typeof FullscreenControlMLGL>;
+export type TerrainControlMLGL = InstanceType<typeof TerrainControlMLGL>;
+export type MarkerMLGL = InstanceType<typeof MarkerMLGL>;
+export type PopupMLGL = InstanceType<typeof PopupMLGL>;
+export type StyleMLGL = InstanceType<typeof StyleMLGL>;
+export type LngLat = InstanceType<typeof LngLat>;
+export type LngLatBounds = InstanceType<typeof LngLatBounds>;
+export type MercatorCoordinate = InstanceType<typeof MercatorCoordinate>;
+export type Evented = InstanceType<typeof Evented>;
+export type AJAXError = InstanceType<typeof AJAXError>;
+export type CanvasSourceMLGL = InstanceType<typeof CanvasSourceMLGL>;
+export type GeoJSONSourceMLGL = InstanceType<typeof GeoJSONSourceMLGL>;
+export type ImageSourceMLGL = InstanceType<typeof ImageSourceMLGL>;
+export type RasterDEMTileSourceMLGL = InstanceType<
+  typeof RasterDEMTileSourceMLGL
+>;
+export type RasterTileSourceMLGL = InstanceType<typeof RasterTileSourceMLGL>;
+export type VectorTileSourceMLGL = InstanceType<typeof VectorTileSourceMLGL>;
+export type VideoSourceMLGL = InstanceType<typeof VideoSourceMLGL>;
+export type MapMLGL = InstanceType<typeof MapMLGL>;
+
+// SDK specific
 import { Map, GeolocationType } from "./Map";
 import type { MapOptions } from "./Map";
 
+import { Marker } from "./Marker";
+import { Popup } from "./Popup";
+import { Style } from "./Style";
+import { CanvasSource } from "./CanvasSource";
+import { GeoJSONSource } from "./GeoJSONSource";
+import { ImageSource } from "./ImageSource";
+import { RasterTileSource } from "./RasterTileSource";
+import { RasterDEMTileSource } from "./RasterDEMTileSource";
+import { VectorTileSource } from "./VectorTileSource";
+import { VideoSource } from "./VideoSource";
+import { NavigationControl } from "./NavigationControl";
+import { GeolocateControl } from "./GeolocateControl";
+import { AttributionControl } from "./AttributionControl";
+import { LogoControl } from "./LogoControl";
+import { ScaleControl } from "./ScaleControl";
+import { FullscreenControl } from "./FullscreenControl";
+import { TerrainControl } from "./TerrainControl";
+
+// Import of modified versions of the controls
 import { MaptilerGeolocateControl } from "./MaptilerGeolocateControl";
 import { MaptilerLogoControl } from "./MaptilerLogoControl";
 import { MaptilerTerrainControl } from "./MaptilerTerrainControl";
@@ -157,6 +216,23 @@ export type {
 // Exporting classes, objects, functions, etc.
 export {
   Map,
+  Marker,
+  Popup,
+  Style,
+  CanvasSource,
+  GeoJSONSource,
+  ImageSource,
+  RasterTileSource,
+  RasterDEMTileSource,
+  VideoSource,
+  NavigationControl,
+  GeolocateControl,
+  AttributionControl,
+  LogoControl,
+  ScaleControl,
+  FullscreenControl,
+  TerrainControl,
+  VectorTileSource,
   GeolocationType,
   SdkConfig,
   config,