@maptiler/sdk 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptiler/sdk",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
   "module": "dist/maptiler-sdk.mjs",
   "types": "dist/maptiler-sdk.d.ts",

package/readme.md

@@ -215,19 +215,19 @@ It is sometimes handy to center map on the visitor's location, and there are mul
 
 Here is how the map gets centered on the visitor's location:
 ```js
-new maptiler.Map({
+new maptilersdk.Map({
   // ... other options
 
-  geolocate: maptiler.GeolocationType.POINT
+  geolocate: maptilersdk.GeolocationType.POINT
 })
 ```
 
 Here is how the map fits the visitor's country bounds:
 ```js
-new maptiler.Map({
+new maptilersdk.Map({
   // ... other options
 
-  geolocate: maptiler.GeolocationType.COUNTRY
+  geolocate: maptilersdk.GeolocationType.COUNTRY
 })
 ```
 
@@ -358,7 +358,7 @@ Our map SDK is not only about maps! We also provide plenty of wrapper to our API
 You want to know the longitude and latitude of a specific place, use the forward geocoding:
 ```ts
 // in an async function, or as a 'thenable':
-const result = await maptilerClient.geocoding.forward('paris');
+const result = await maptilersdk.geocoding.forward('paris');
 ```
 You can provide some options such as:
 - the proximity, given a lon-lat position, to sort the results
@@ -371,7 +371,7 @@ Read more about forward geocoding on our [official documentation](https://docs.m
 You wan to tknow the name of a place, given a longitude-latitude? Use the reverse geocoding:
 ```ts
 // in an async function, or as a 'thenable':
-const result = await maptilerClient.geocoding.reverse([6.249638, 46.402056]);
+const result = await maptilersdk.geocoding.reverse([6.249638, 46.402056]);
 ```
 The same option object as the forward geocoding can be provided.
 
@@ -381,7 +381,7 @@ Read more about reverse geocoding on our [official documentation](https://docs.m
 For both *forward* and *reverse* geocoding, this library provides a list of supported languages as shorthands to [ISO language codes](https://en.wikipedia.org/wiki/ISO_639-1). The result will be provided in multiple languages if the `language` options is an array:
 
 ```ts
-const result = await maptilerClient.geocoding.forward('paris', {language: [maptilerClient.geocoding.languages.SPANISH, maptilerClient.geocoding.languages.KOREAN]})
+const result = await maptilersdk.geocoding.forward('paris', {language: [maptilersdk.geocoding.languages.SPANISH, maptilersdk.geocoding.languages.KOREAN]})
 ```
 
 The special language `AUTO` will detect the platform/browser preferred language.
@@ -394,7 +394,7 @@ The geolocation uses the IP address of a visitors to provide informations about
 There is only a single function:
 ```ts
 // in an async function, or as a 'thenable':
-const result = await maptilerClient.geolocation.info();
+const result = await maptilersdk.geolocation.info();
 ```
 
 Read more about geolocation on our [official documentation](https://docs.maptiler.com/client-js/geolocation/).
@@ -406,10 +406,10 @@ If you are already familiar with [epsg.io](https://epsg.io/) (created by MapTile
 The `search` lets you perform a query in a free form fashion. Here are some examples:
 ```ts
 // in an async function, or as a 'thenable':
-const resultA = await maptilerClient.coordinates.search('mercator');
-const resultB = await maptilerClient.coordinates.search('plate carree');
-const resultC = await maptilerClient.coordinates.search('france');
-const resultD = await maptilerClient.coordinates.search('code:4326', {transformations: true}));
+const resultA = await maptilersdk.coordinates.search('mercator');
+const resultB = await maptilersdk.coordinates.search('plate carree');
+const resultC = await maptilersdk.coordinates.search('france');
+const resultD = await maptilersdk.coordinates.search('code:4326', {transformations: true}));
 ```
 
 The `transformations` options retrieves a lot more details about the CRS that MapTiler API is able to transform to/from than just their IDs.
@@ -425,10 +425,10 @@ If not provided, both the source (`sourceCrs`) and the destination (`targetCrs`)
 // in an async function, or as a 'thenable':
 
 // Providing one coordinate to transform, with a target CRS being EPSG:9793 (RGF93 v2 / Lambert-93, France official CRS)
-const resultA = await maptilerClient.coordinates.transform([1, 45], {targetCrs: 9793})
+const resultA = await maptilersdk.coordinates.transform([1, 45], {targetCrs: 9793})
 
 // Using the same logic, we can pass up to 50 coordinates to be transformed
-const resultB = await maptilerClient.coordinates.transform([[10, 48], [1, 45]], {targetCrs: 9793})
+const resultB = await maptilersdk.coordinates.transform([[10, 48], [1, 45]], {targetCrs: 9793})
 ```
 
 Read more about transforming coordinates on our [official documentation](https://docs.maptiler.com/client-js/coordinates/#transform).
@@ -438,7 +438,7 @@ MapTiler Cloud give its users the possibility to [upload and create data](https:
 
 ```ts
 // in an async function, or as a 'thenable':
-const result = await maptilerClient.data.get('my-dataset-unique-id')
+const result = await maptilersdk.data.get('my-dataset-unique-id')
 ```
 
 Since the result is a GeoJSON, it can easily be added to a `map` with `.addSource()` and `.addLayer()`.
@@ -499,7 +499,7 @@ This type of map is centered on a longitude-latitude coordinate and the zoom lev
 Note that if a path or markers are provided, the framing of the map will not automatically adapt to include those (use the `automatic` mode for that).
 
 ```ts
-const imageLink = maptilerClient.staticMaps.centered(
+const imageLink = maptilersdk.staticMaps.centered(
   // center position (Boston)
   [-71.06080, 42.362114], 
 
@@ -516,7 +516,7 @@ const imageLink = maptilerClient.staticMaps.centered(
     height: 1000,
 
     // Map style
-    style: maptilerClient.MapStyle.OUTDOOR,
+    style: maptilersdk.MapStyle.OUTDOOR,
   });
 ```
 
@@ -527,7 +527,7 @@ Read more about centered static maps on our official [API documentation](https:/
 This type of map requires a bounding box made of two points: the south-west bound and the north-east bound. The zoom level cannot be provided and is automatically deduced from the size of the bounding box.
 
 ```ts
-const imageLink = maptilerClient.staticMaps.bounded(
+const imageLink = maptilersdk.staticMaps.bounded(
   // The bounding box on Europe
   [
     -24,  // west bound (min x)
@@ -541,7 +541,7 @@ const imageLink = maptilerClient.staticMaps.bounded(
     hiDPI: true,
     width: 2048,
     height: 2048,
-    style: maptilerClient.MapStyle.STREETS.DARK,
+    style: maptilersdk.MapStyle.STREETS.DARK,
 
     // Extra space that will add around the bounding box, in percentage
     // (0.1 = 10% is actually the dafault)
@@ -572,13 +572,13 @@ In the following example, we are going to load a cycling track recorded by one o
 
 ```ts
 // Fetching the GeoJSON
-const bikeTrack = await maptilerClient.data.get('the-id-of-a-bike-track-in-montreal');
+const bikeTrack = await maptilersdk.data.get('the-id-of-a-bike-track-in-montreal');
 
 // Extracting the track points with the shape [[lng, lat], [lng, lat], ...]
 const trackPoints = bikeTrack.features[0].geometry.coordinates[0]
   .map(p => p.slice(0, 2));
 
-const imageLink = maptilerClient.staticMaps.automatic({
+const imageLink = maptilersdk.staticMaps.automatic({
   // hiDPI/Retina precision
   hiDPI: true,
 
@@ -587,7 +587,7 @@ const imageLink = maptilerClient.staticMaps.automatic({
   height: 1024 ,
 
   // A grey style on which the track will pop!
-  style: maptilerClient.MapStyle.STREETS.LIGHT,
+  style: maptilersdk.MapStyle.STREETS.LIGHT,
 
   // Draw a path with the trackpoints
   path: trackPoints,

package/src/Map.ts

@@ -10,7 +10,7 @@ import { v4 as uuidv4 } from "uuid";
 import { ReferenceMapStyle, MapStyleVariant } from "@maptiler/client";
 import { config } from "./config";
 import { defaults } from "./defaults";
-import { CustomLogoControl } from "./CustomLogoControl";
+import { MaptilerLogoControl } from "./MaptilerLogoControl";
 import { enableRTL } from "./tools";
 import {
   getBrowserLanguage,
@@ -19,10 +19,10 @@ import {
   LanguageString,
 } from "./language";
 import { styleToStyle } from "./mapstyle";
-import { TerrainControl } from "./TerrainControl";
+import { MaptilerTerrainControl } from "./MaptilerTerrainControl";
 import { MaptilerNavigationControl } from "./MaptilerNavigationControl";
 import { geolocation } from "@maptiler/client";
-import { CustomGeolocateControl } from "./CustomGeolocateControl";
+import { MaptilerGeolocateControl } from "./MaptilerGeolocateControl";
 
 // StyleSwapOptions is not exported by Maplibre, but we can redefine it (used for setStyle)
 export type TransformStyleFunction = (
@@ -323,7 +323,7 @@ export class Map extends maplibregl.Map {
         const logoURL: string = tileJsonContent.logo;
 
         this.addControl(
-          new CustomLogoControl({ logoURL }),
+          new MaptilerLogoControl({ logoURL }),
           options.logoPosition
         );
 
@@ -332,7 +332,7 @@ export class Map extends maplibregl.Map {
           this.addControl(new maplibregl.AttributionControl(options));
         }
       } else if (options.maptilerLogo) {
-        this.addControl(new CustomLogoControl(), options.logoPosition);
+        this.addControl(new MaptilerLogoControl(), options.logoPosition);
       }
 
       // the other controls at init time but be after
@@ -376,7 +376,7 @@ export class Map extends maplibregl.Map {
 
         this.addControl(
           // new maplibregl.GeolocateControl({
-          new CustomGeolocateControl({
+          new MaptilerGeolocateControl({
             positionOptions: {
               enableHighAccuracy: true,
               maximumAge: 0,
@@ -401,7 +401,7 @@ export class Map extends maplibregl.Map {
             ? "top-right"
             : options.terrainControl
         ) as ControlPosition;
-        this.addControl(new TerrainControl(), position);
+        this.addControl(new MaptilerTerrainControl(), position);
       }
 
       // By default, no fullscreen control

package/src/{CustomGeolocateControl.ts → MaptilerGeolocateControl.ts}

@@ -6,7 +6,13 @@ const GeolocateControl = maplibregl.GeolocateControl;
 const Marker = maplibregl.Marker;
 const LngLat = maplibregl.LngLat;
 
-export class CustomGeolocateControl extends GeolocateControl {
+/**
+ * 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);
 
   /**

package/src/{CustomLogoControl.ts → MaptilerLogoControl.ts}

@@ -1,8 +1,9 @@
 import maplibregl from "maplibre-gl";
+import type { LogoOptions as LogoOptionsML } from "maplibre-gl";
 import { defaults } from "./defaults";
 import { Map } from "./Map";
 
-type LogoOptions = maplibregl.LogoOptions & {
+type LogoOptions = LogoOptionsML & {
   logoURL?: string;
   linkURL?: string;
 };
@@ -11,7 +12,7 @@ type LogoOptions = maplibregl.LogoOptions & {
  * 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 {
+export class MaptilerLogoControl extends maplibregl.LogoControl {
   private logoURL = "";
   private linkURL = "";
 

package/src/{TerrainControl.ts → MaptilerTerrainControl.ts}

@@ -4,20 +4,10 @@ import { Map } from "./Map";
 import maplibregl from "maplibre-gl";
 
 /**
- * An `TerrainControl` control adds a button to turn terrain on and off.
- *
- * @implements {IControl}
- * @param {Object} [options]
- * @param {string} [options.id] The ID of the raster-dem source to use.
- * @param {Object} [options.options]
- * @param {number} [options.options.exaggeration]
- * @example
- * var map = new maplibregl.Map({TerrainControl: false})
- *     .addControl(new maplibregl.TerrainControl({
- *         source: "terrain"
- *     }));
+ * 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 TerrainControl implements maplibregl.IControl {
+export class MaptilerTerrainControl implements maplibregl.IControl {
   _map: Map;
   _container: HTMLElement;
   _terrainButton: HTMLButtonElement;

package/src/defaults.ts

@@ -11,7 +11,7 @@ const defaults = {
     "https://cdn.maptiler.com/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.min.js",
   primaryLanguage: Language.AUTO,
   secondaryLanguage: Language.LOCAL,
-  terrainSourceURL: "https://api.maptiler.com/tiles/terrain-rgb/tiles.json",
+  terrainSourceURL: "https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json",
   terrainSourceId: "maptiler-terrain",
 };
 

package/src/index.ts

@@ -97,6 +97,10 @@ export {
 import { Map, GeolocationType } from "./Map";
 import type { MapOptions } from "./Map";
 
+import { MaptilerGeolocateControl } from "./MaptilerGeolocateControl";
+import { MaptilerLogoControl } from "./MaptilerLogoControl";
+import { MaptilerTerrainControl } from "./MaptilerTerrainControl";
+
 // importing client functions to expose them as part of the SDK
 import type {
   BBox,
@@ -168,4 +172,7 @@ export {
   Point,
   ReferenceMapStyle,
   MapStyleVariant,
+  MaptilerGeolocateControl,
+  MaptilerLogoControl,
+  MaptilerTerrainControl,
 };