@maptiler/sdk 1.0.7 → 1.0.9

package/CHANGELOG.md

@@ -1,4 +1,59 @@
 # Changelog
+## [v1.0.9](https://github.com/maptiler/maptiler-sdk-js/releases/tag/v1.0.9)
+- FIX: if the geolocate option is missing from `Map` constructor, then it's considered `false`
+
+- FIX: The instance types for the following MapLibre classes are now fully exported:
+  - `NavigationControl`
+  - `GeolocateControl`
+  - `AttributionControl`
+  - `LogoControl`
+  - `ScaleControl`
+  - `FullscreenControl`
+  - `TerrainControl`
+  - `Popup`
+  - `Marker`
+  - `Style`
+  - `LngLat`
+  - `LngLatBounds`
+  - `MercatorCoordinate`
+  - `Evented`
+  - `AJAXError`
+  - `CanvasSource`
+  - `GeoJSONSource`
+  - `ImageSource`
+  - `RasterDEMTileSource`
+  - `RasterTileSource`
+  - `VectorTileSource`
+  - `VideoSource`
+  - `MapMLGL`
+
+- FIX: The following class have been extended to provide greater compatibility with SDK,s MapL
+  - `Popup`
+  - `Marker`
+  - `Style`
+  - `CanvasSource`
+  - `GeoJSONSource`
+  - `ImageSource`
+  - `RasterDEMTileSource`
+  - `RasterTileSource`
+  - `VectorTileSource`
+  - `VideoSource`
+  - `NavigationControl`
+  - `GeolocateControl`
+  - `AttributionControl`
+  - `LogoControl`
+  - `ScaleControl`
+  - `FullscreenControl`
+  - `TerrainControl`
+
+- ADD: new styles:
+  - `MapStyle.STREETS.NIGHT`
+  - `MapStyle.WINTER.DARK`
+  - `MapStyle.OUTDOOR.DARK`
+
+## [v1.0.8](https://github.com/maptiler/maptiler-sdk-js/releases/tag/v1.0.8)
+- FIX: Since v1.0.7, the `Map` primary language (when custom) was no longer persistant on style update.
+
 ## [v1.0.7](https://github.com/maptiler/maptiler-sdk-js/releases/tag/v1.0.7)
 - The `apiKey` can now be specified in the `Map` constructor (will propagate to `config`)
 - The `language` can now be speficifed in the `Map` constructo (will **not** propagete to `config` and will apply only to this specific instance)

package/demos/maptiler-sdk.umd.js

@@ -1156,6 +1156,30 @@
 	  400: "Query too long / Invalid parameters",
 	  403: "Key is missing, invalid or restricted"
 	};
+	function addLanguageGeocodingOptions(searchParams, options) {
+	  if (options.language == void 0) {
+	    return;
+	  }
+	  const languages = Array.from(
+	    new Set(
+	      (Array.isArray(options.language) ? options.language : [options.language]).map(
+	        (lang) => lang === LanguageGeocoding.AUTO ? getAutoLanguageGeocoding() : lang
+	      )
+	    )
+	  ).join(",");
+	  searchParams.set("language", languages);
+	}
+	function addCommonForwardAndReverseGeocodingOptions(searchParams, options) {
+	  var _a;
+	  searchParams.set("key", (_a = options.apiKey) != null ? _a : config$1.apiKey);
+	  if (options.limit != void 0) {
+	    searchParams.set("limit", String(options.limit));
+	  }
+	  if (options.types != void 0) {
+	    searchParams.set("types", options.types.join(","));
+	  }
+	  addLanguageGeocodingOptions(searchParams, options);
+	}
 	function forward(_0) {
 	  return __async$3(this, arguments, function* (query, options = {}) {
 	    var _a;
@@ -1166,30 +1190,27 @@
 	      `geocoding/${encodeURIComponent(query)}.json`,
 	      defaults$1.maptilerApiURL
 	    );
-	    endpoint.searchParams.set("key", (_a = options.apiKey) != null ? _a : config$1.apiKey);
-	    if ("bbox" in options) {
-	      endpoint.searchParams.set("bbox", options.bbox.join(","));
-	    }
-	    if ("proximity" in options) {
-	      endpoint.searchParams.set("proximity", options.proximity.join(","));
-	    }
-	    if ("language" in options) {
-	      const languages = Array.from(
-	        new Set(
-	          (Array.isArray(options.language) ? options.language : [options.language]).map(
-	            (lang) => lang === LanguageGeocoding.AUTO ? getAutoLanguageGeocoding() : lang
-	          )
-	        )
-	      ).join(",");
-	      endpoint.searchParams.set("language", languages);
+	    const { searchParams } = endpoint;
+	    addCommonForwardAndReverseGeocodingOptions(searchParams, options);
+	    if (options.bbox != void 0) {
+	      searchParams.set("bbox", options.bbox.join(","));
+	    }
+	    if (options.proximity != void 0) {
+	      searchParams.set("proximity", options.proximity.join(","));
+	    }
+	    if (options.country != void 0) {
+	      searchParams.set("country", options.country.join(","));
+	    }
+	    if (options.fuzzyMatch != void 0) {
+	      searchParams.set("fuzzyMatch", options.fuzzyMatch ? "true" : "false");
+	    }
+	    if (options.autocomplete != void 0) {
+	      searchParams.set("autocomplete", options.autocomplete ? "true" : "false");
 	    }
 	    const urlWithParams = endpoint.toString();
 	    const res = yield callFetch(urlWithParams);
 	    if (!res.ok) {
-	      throw new ServiceError(
-	        res,
-	        res.status in customMessages$3 ? customMessages$3[res.status] : ""
-	      );
+	      throw new ServiceError(res, (_a = customMessages$3[res.status]) != null ? _a : "");
 	    }
 	    const obj = yield res.json();
 	    return obj;
@@ -1205,24 +1226,25 @@
 	      `geocoding/${position[0]},${position[1]}.json`,
 	      defaults$1.maptilerApiURL
 	    );
-	    endpoint.searchParams.set("key", (_a = options.apiKey) != null ? _a : config$1.apiKey);
-	    if ("language" in options) {
-	      const languages = Array.from(
-	        new Set(
-	          (Array.isArray(options.language) ? options.language : [options.language]).map(
-	            (lang) => lang === LanguageGeocoding.AUTO ? getAutoLanguageGeocoding() : lang
-	          )
-	        )
-	      ).join(",");
-	      endpoint.searchParams.set("language", languages);
+	    addCommonForwardAndReverseGeocodingOptions(endpoint.searchParams, options);
+	    const urlWithParams = endpoint.toString();
+	    const res = yield callFetch(urlWithParams);
+	    if (!res.ok) {
+	      throw new ServiceError(res, (_a = customMessages$3[res.status]) != null ? _a : "");
 	    }
+	    const obj = yield res.json();
+	    return obj;
+	  });
+	}
+	function byId(_0) {
+	  return __async$3(this, arguments, function* (id, options = {}) {
+	    var _a;
+	    const endpoint = new URL(`geocoding/${id}.json`, defaults$1.maptilerApiURL);
+	    addLanguageGeocodingOptions(endpoint.searchParams, options);
 	    const urlWithParams = endpoint.toString();
 	    const res = yield callFetch(urlWithParams);
 	    if (!res.ok) {
-	      throw new ServiceError(
-	        res,
-	        res.status in customMessages$3 ? customMessages$3[res.status] : ""
-	      );
+	      throw new ServiceError(res, (_a = customMessages$3[res.status]) != null ? _a : "");
 	    }
 	    const obj = yield res.json();
 	    return obj;
@@ -1231,6 +1253,7 @@
 	const geocoding = {
 	  forward,
 	  reverse,
+	  byId,
 	  language: LanguageGeocoding
 	};
 
@@ -1618,6 +1641,13 @@
 	        description: "",
 	        imageURL: ""
 	      },
+	      {
+	        id: "streets-v2-night",
+	        name: "Night",
+	        variantType: "NIGHT",
+	        description: "",
+	        imageURL: ""
+	      },
 	      {
 	        id: "streets-v2-pastel",
 	        name: "Pastel",
@@ -1638,6 +1668,13 @@
 	        variantType: "DEFAULT",
 	        description: "",
 	        imageURL: ""
+	      },
+	      {
+	        id: "outdoor-v2-dark",
+	        name: "Dark",
+	        variantType: "DARK",
+	        description: "",
+	        imageURL: ""
 	      }
 	    ]
 	  },
@@ -1648,10 +1685,17 @@
 	    variants: [
 	      {
 	        id: "winter-v2",
-	        name: "Winter",
+	        name: "Default",
 	        variantType: "DEFAULT",
 	        description: "",
 	        imageURL: ""
+	      },
+	      {
+	        id: "winter-v2-dark",
+	        name: "Dark",
+	        variantType: "DARK",
+	        description: "",
+	        imageURL: ""
 	      }
 	    ]
 	  },
@@ -1772,6 +1816,13 @@
 	        description: "",
 	        imageURL: ""
 	      },
+	      {
+	        id: "topo-v2-dark",
+	        name: "Dark",
+	        variantType: "DARK",
+	        description: "",
+	        imageURL: ""
+	      },
 	      {
 	        id: "topo-v2-shiny",
 	        name: "Shiny",
@@ -2248,7 +2299,13 @@
 	};
 	Object.freeze(defaults);
 
-	class MaptilerLogoControl extends maplibregl.LogoControl {
+	class LogoControl extends maplibregl.LogoControl {
+	  onAdd(map) {
+	    return super.onAdd(map);
+	  }
+	}
+
+	class MaptilerLogoControl extends LogoControl {
 	  constructor(options = {}) {
 	    var _a, _b;
 	    super(options);
@@ -2393,7 +2450,13 @@
 	  }
 	}
 
-	class MaptilerNavigationControl extends maplibregl.NavigationControl {
+	class NavigationControl extends maplibregl.NavigationControl {
+	  onAdd(map) {
+	    return super.onAdd(map);
+	  }
+	}
+
+	class MaptilerNavigationControl extends NavigationControl {
 	  constructor() {
 	    super({
 	      showCompass: true,
@@ -2433,6 +2496,12 @@
 	  }
 	}
 
+	class GeolocateControl extends maplibregl.GeolocateControl {
+	  onAdd(map) {
+	    return super.onAdd(map);
+	  }
+	}
+
 	var __defProp$1 = Object.defineProperty;
 	var __defProps$1 = Object.defineProperties;
 	var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
@@ -2452,10 +2521,9 @@
 	  return a;
 	};
 	var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-	const GeolocateControl$1 = maplibregl.GeolocateControl;
 	const Marker$1 = maplibregl.Marker;
 	const LngLat$1 = maplibregl.LngLat;
-	class MaptilerGeolocateControl extends GeolocateControl$1 {
+	class MaptilerGeolocateControl extends GeolocateControl {
 	  constructor() {
 	    super(...arguments);
 	    this.lastUpdatedCenter = new LngLat$1(0, 0);
@@ -2597,6 +2665,24 @@
 	  }
 	}
 
+	class AttributionControl extends maplibregl.AttributionControl {
+	  onAdd(map) {
+	    return super.onAdd(map);
+	  }
+	}
+
+	class ScaleControl extends maplibregl.ScaleControl {
+	  onAdd(map) {
+	    return super.onAdd(map);
+	  }
+	}
+
+	class FullscreenControl extends maplibregl.FullscreenControl {
+	  onAdd(map) {
+	    return super.onAdd(map);
+	  }
+	}
+
 	var __defProp = Object.defineProperty;
 	var __defProps = Object.defineProperties;
 	var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -2643,7 +2729,7 @@
 	};
 	class Map$1 extends maplibregl.Map {
 	  constructor(options) {
-	    var _a;
+	    var _a, _b;
 	    if (options.apiKey) {
 	      config.apiKey = options.apiKey;
 	    }
@@ -2681,12 +2767,14 @@
 	        };
 	      }
 	    }));
-	    this.languageShouldUpdate = false;
-	    this.isStyleInitialized = false;
 	    this.isTerrainEnabled = false;
 	    this.terrainExaggeration = 1;
+	    this.primaryLanguage = null;
+	    this.secondaryLanguage = null;
+	    this.primaryLanguage = (_a = options.language) != null ? _a : config.primaryLanguage;
+	    this.secondaryLanguage = config.secondaryLanguage;
 	    this.once("styledata", () => __async(this, null, function* () {
-	      if (options.geolocate === false) {
+	      if (!options.geolocate) {
 	        return;
 	      }
 	      if (options.center) {
@@ -2734,22 +2822,9 @@
 	        );
 	      }
 	    }));
-	    this.on("styledataloading", () => {
-	      this.languageShouldUpdate = !!config.primaryLanguage || !!config.secondaryLanguage;
-	    });
-	    let initLanguageFromConstructor = true;
 	    this.on("styledata", () => {
-	      if (options.language && initLanguageFromConstructor) {
-	        this.setPrimaryLanguage(options.language);
-	      } else if (config.primaryLanguage && (this.languageShouldUpdate || !this.isStyleInitialized)) {
-	        this.setPrimaryLanguage(config.primaryLanguage);
-	      }
-	      if (config.secondaryLanguage && (this.languageShouldUpdate || !this.isStyleInitialized)) {
-	        this.setSecondaryLanguage(config.secondaryLanguage);
-	      }
-	      this.languageShouldUpdate = false;
-	      this.isStyleInitialized = true;
-	      initLanguageFromConstructor = false;
+	      this.setPrimaryLanguage(this.primaryLanguage);
+	      this.setSecondaryLanguage(this.secondaryLanguage);
 	    });
 	    this.on("styledata", () => {
 	      if (this.getTerrain() === null && this.isTerrainEnabled) {
@@ -2782,14 +2857,14 @@
 	          options.logoPosition
 	        );
 	        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);
 	      }
 	      if (options.scaleControl) {
 	        const position = options.scaleControl === true || options.scaleControl === void 0 ? "bottom-right" : options.scaleControl;
-	        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);
@@ -2824,12 +2899,12 @@
 	      }
 	      if (options.fullscreenControl) {
 	        const position = options.fullscreenControl === true || options.fullscreenControl === void 0 ? "top-right" : options.fullscreenControl;
-	        this.addControl(new maplibregl.FullscreenControl({}), position);
+	        this.addControl(new FullscreenControl({}), position);
 	      }
 	    }));
 	    if (options.terrain) {
 	      this.enableTerrain(
-	        (_a = options.terrainExaggeration) != null ? _a : this.terrainExaggeration
+	        (_b = options.terrainExaggeration) != null ? _b : this.terrainExaggeration
 	      );
 	    }
 	  }
@@ -2846,6 +2921,7 @@
 	    if (!isLanguageSupported(language)) {
 	      return;
 	    }
+	    this.primaryLanguage = language;
 	    this.onStyleReady(() => {
 	      if (language === Language.AUTO) {
 	        return this.setPrimaryLanguage(getBrowserLanguage());
@@ -2919,6 +2995,7 @@
 	    if (!isLanguageSupported(language)) {
 	      return;
 	    }
+	    this.secondaryLanguage = language;
 	    this.onStyleReady(() => {
 	      if (language === Language.AUTO) {
 	        return this.setSecondaryLanguage(getBrowserLanguage());
@@ -2978,6 +3055,12 @@
 	      }
 	    });
 	  }
+	  getPrimaryLanguage() {
+	    return this.primaryLanguage;
+	  }
+	  getSecondaryLanguage() {
+	    return this.secondaryLanguage;
+	  }
 	  getTerrainExaggeration() {
 	    return this.terrainExaggeration;
 	  }
@@ -3075,6 +3158,72 @@
 	  }
 	}
 
+	class Marker extends maplibregl.Marker {
+	  addTo(map) {
+	    return super.addTo(map);
+	  }
+	}
+
+	class Popup extends maplibregl.Popup {
+	  addTo(map) {
+	    return super.addTo(map);
+	  }
+	}
+
+	class Style extends maplibregl.Style {
+	  constructor(map, options = {}) {
+	    super(map, options);
+	  }
+	}
+
+	class CanvasSource extends maplibregl.CanvasSource {
+	  onAdd(map) {
+	    super.onAdd(map);
+	  }
+	}
+
+	class GeoJSONSource extends maplibregl.GeoJSONSource {
+	  onAdd(map) {
+	    super.onAdd(map);
+	  }
+	}
+
+	class ImageSource extends maplibregl.ImageSource {
+	  onAdd(map) {
+	    super.onAdd(map);
+	  }
+	}
+
+	class RasterTileSource extends maplibregl.RasterTileSource {
+	  onAdd(map) {
+	    super.onAdd(map);
+	  }
+	}
+
+	class RasterDEMTileSource extends maplibregl.RasterDEMTileSource {
+	  onAdd(map) {
+	    super.onAdd(map);
+	  }
+	}
+
+	class VectorTileSource extends maplibregl.VectorTileSource {
+	  onAdd(map) {
+	    super.onAdd(map);
+	  }
+	}
+
+	class VideoSource extends maplibregl.VideoSource {
+	  onAdd(map) {
+	    super.onAdd(map);
+	  }
+	}
+
+	class TerrainControl extends maplibregl.TerrainControl {
+	  onAdd(map) {
+	    return super.onAdd(map);
+	  }
+	}
+
 	class Point {
 	  constructor(x, y) {
 	    this.x = x;
@@ -3230,28 +3379,11 @@
 	  supported,
 	  setRTLTextPlugin,
 	  getRTLTextPluginStatus,
-	  NavigationControl,
-	  GeolocateControl,
-	  AttributionControl,
-	  LogoControl,
-	  ScaleControl,
-	  FullscreenControl,
-	  TerrainControl,
-	  Popup,
-	  Marker,
-	  Style,
 	  LngLat,
 	  LngLatBounds,
 	  MercatorCoordinate,
 	  Evented,
 	  AJAXError,
-	  CanvasSource,
-	  GeoJSONSource,
-	  ImageSource,
-	  RasterDEMTileSource,
-	  RasterTileSource,
-	  VectorTileSource,
-	  VideoSource,
 	  prewarm,
 	  clearPrewarmedResources,
 	  version,
@@ -3262,42 +3394,71 @@
 	  addProtocol,
 	  removeProtocol
 	} = maplibregl;
+	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;
+	maplibregl.NavigationControl;
+	maplibregl.GeolocateControl;
+	maplibregl.AttributionControl;
+	maplibregl.LogoControl;
+	maplibregl.ScaleControl;
+	maplibregl.FullscreenControl;
+	maplibregl.TerrainControl;
 
 	exports.AJAXError = AJAXError;
 	exports.AttributionControl = AttributionControl;
 	exports.CanvasSource = CanvasSource;
+	exports.CanvasSourceMLGL = CanvasSourceMLGL;
 	exports.Evented = Evented;
 	exports.FullscreenControl = FullscreenControl;
 	exports.GeoJSONSource = GeoJSONSource;
+	exports.GeoJSONSourceMLGL = GeoJSONSourceMLGL;
 	exports.GeolocateControl = GeolocateControl;
 	exports.GeolocationType = GeolocationType;
 	exports.ImageSource = ImageSource;
+	exports.ImageSourceMLGL = ImageSourceMLGL;
 	exports.Language = Language;
 	exports.LanguageGeocoding = LanguageGeocoding;
 	exports.LngLat = LngLat;
 	exports.LngLatBounds = LngLatBounds;
 	exports.LogoControl = LogoControl;
 	exports.Map = Map$1;
+	exports.MapMLGL = MapMLGL;
 	exports.MapStyle = MapStyle;
 	exports.MapStyleVariant = MapStyleVariant;
 	exports.MaptilerGeolocateControl = MaptilerGeolocateControl;
 	exports.MaptilerLogoControl = MaptilerLogoControl;
 	exports.MaptilerTerrainControl = MaptilerTerrainControl;
 	exports.Marker = Marker;
+	exports.MarkerMLGL = MarkerMLGL;
 	exports.MercatorCoordinate = MercatorCoordinate;
 	exports.NavigationControl = NavigationControl;
 	exports.Point = Point;
 	exports.Popup = Popup;
+	exports.PopupMLGL = PopupMLGL;
 	exports.RasterDEMTileSource = RasterDEMTileSource;
+	exports.RasterDEMTileSourceMLGL = RasterDEMTileSourceMLGL;
 	exports.RasterTileSource = RasterTileSource;
+	exports.RasterTileSourceMLGL = RasterTileSourceMLGL;
 	exports.ReferenceMapStyle = ReferenceMapStyle;
 	exports.ScaleControl = ScaleControl;
 	exports.SdkConfig = SdkConfig;
 	exports.ServiceError = ServiceError;
 	exports.Style = Style;
+	exports.StyleMLGL = StyleMLGL;
 	exports.TerrainControl = TerrainControl;
 	exports.VectorTileSource = VectorTileSource;
+	exports.VectorTileSourceMLGL = VectorTileSourceMLGL;
 	exports.VideoSource = VideoSource;
+	exports.VideoSourceMLGL = VideoSourceMLGL;
 	exports.addProtocol = addProtocol;
 	exports.clearPrewarmedResources = clearPrewarmedResources;
 	exports.clearStorage = clearStorage;

package/demos/simple.html

@@ -36,15 +36,16 @@
     <script src ="maptiler-sdk.umd.js"></script>
     
     <script>
-      // maptilersdk.config.apiKey = "ZFEK2gQSwT4Jcimbtcy7";
+      maptilersdk.config.apiKey = "YOUR_API_KEY";
 
       const map = new maptilersdk.Map({
         container: document.getElementById("map-container"),
+        style: maptilersdk.MapStyle.OUTDOOR.DARK,
         hash: true,
-        maxPitch: 85,
         scaleControl: true,
         fullscreenControl: true,
         terrainControl: true,
+        geolocate: true,
       })
 
       const styleDropDown = document.getElementById("mapstyles-picker")