@maptiler/sdk 2.0.3 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptiler/sdk",
-  "version": "2.0.3",
+  "version": "2.2.0",
   "description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
   "module": "dist/maptiler-sdk.mjs",
   "types": "dist/maptiler-sdk.d.ts",
@@ -36,32 +36,25 @@
   "scripts": {
     "build": "rm -rf dist/* && NODE_ENV=production rollup -c",
     "dev": "rm -rf dist/* && NODE_ENV=development rollup -c -w",
-    "format:fix": "prettier --write \"src/**/*.{js,ts,tsx}\"",
-    "format": "prettier -c \"src/**/*.{js,ts,tsx}\"",
-    "lint:fix": "eslint --fix \"src/**/*.{js,ts}\"",
-    "lint": "eslint \"src/**/*.{js,ts}\"",
+    "biome": "biome check --max-diagnostics=1000",
+    "biome:fix": "npx @biomejs/biome check --max-diagnostics=1000 --write",
     "doc": "rm -rf docs/* && typedoc --out docs && cp -r images docs/",
-    "prepare": "npm run format:fix && npm run lint:fix && npm run build && npm run test",
+    "prepare": "npm run biome:fix && npm run build && npm run test",
     "test:dev": "vitest dev",
     "test": "vitest run"
   },
   "author": "MapTiler",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^24.1.0",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@biomejs/biome": "1.8.3",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@types/uuid": "^9.0.2",
     "@types/xmldom": "^0.1.31",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "prettier": "^3.0.3",
-    "rollup": "^3.20.6",
-    "rollup-plugin-copy-merge": "^1.0.0",
-    "rollup-plugin-dts": "^5.3.0",
-    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup": "^4.18.0",
+    "rollup-plugin-copy-merge": "^1.0.2",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-shell": "^1.0.9",
     "rollup-plugin-string": "^3.0.0",
@@ -77,7 +70,7 @@
     "@maptiler/client": "^1.8.1",
     "events": "^3.3.0",
     "js-base64": "^3.7.4",
-    "maplibre-gl": "^4.1.3",
+    "maplibre-gl": "4.4.1",
     "uuid": "^9.0.0"
   }
 }

package/readme.md

@@ -30,7 +30,7 @@ npm install --save @maptiler/sdk
 ```
 
 # API documentation
-In addition to the details and examples provided in this readme, check out the [complete API documentation](https://maptiler.github.io/maptiler-sdk-js) (see the [Markdown version](docsmd/README.md))
+In addition to the details and examples provided in this readme, check out the [complete API documentation](https://docs.maptiler.com/sdk-js/api/)
 
 # Quick start
 
@@ -53,7 +53,7 @@ const map = new maptilersdk.Map({
 });
 ```
 
-Alternativelly, the `apiKey` can be set as Map option intead of in the `config` object. Yet, this will still internally propagate to the `config` object:
+Alternatively, the `apiKey` can be set as Map option instead of in the `config` object. Yet, this will still internally propagate to the `config` object:
 ```ts
 import * as maptilersdk from '@maptiler/sdk';
 
@@ -69,7 +69,7 @@ const map = new maptilersdk.Map({
 
 By default, the map will be initialized with the style [streets-v2](https://www.maptiler.com/maps/#style=streets-v2).
 
-Depending on the framework and environment your are using for your application, you will have to also include the CSS file. 
+Depending on the framework and environment you are using for your application, you will have to also include the CSS file. 
 
 For example, with a [NextJS](https://nextjs.org/) app, this can take place at the top of the file `_app.ts/js`:
 ```ts
@@ -78,9 +78,9 @@ import "@maptiler/sdk/dist/maptiler-sdk.css";
 
 
 ## With CDN
-The SDK hosted on our CDN is bundled as *[Universal Module Definition](https://github.com/umdjs/umd)* (UMD) to make it standalone and containing all its dependencies. The CDN also serves the style sheet (css).
+The SDK hosted on our CDN is bundled as *[Universal Module Definition](https://github.com/umdjs/umd)* (UMD) to make it standalone and contain all its dependencies. The CDN also serves the style sheet (CSS).
 
-**Recommended for:** simple map intergration example and demos
+**Recommended for:** simple map integration example and demos
 
 ```html
 <html>
@@ -123,11 +123,12 @@ The SDK hosted on our CDN is bundled as *[Universal Module Definition](https://g
   </body>
 </html>
 ```
-Checkout the minimalist code samples in the [demos](demos) directory.
+
+Check out the minimalist code samples in the [demos](demos) directory.
 
 
 # Many styles to choose from
-MapTiler teams maintains a few styles that we have decided to expose from the SDK. This has two advantages:
+MapTiler teams maintain a few styles that we have decided to expose from the SDK. This has two advantages:
 - they are easier to remember, no need to type along style URL
 - if we make an update to a style, you will benefit from it without modifying your codebase
 
@@ -160,7 +161,7 @@ The styles with a shorthand provided by the SDK are the following:
 <details>
   <summary>Know more about built-in map styles</summary>
 
-MapTiler provides some **reference styles** as well as some **variants** for each. A **reference syle** sets some guidelines about what kind of information is displayed, the granularity of the information, and more generaly defines a purpose for which this style is the most relevant: street navigation, outdoor adventure, minimalist dashboard, etc. Then, each **reference style** offers a range of **variants** that contain the same level of information and has the same purpose but using different colors schemes.
+MapTiler provides some **reference styles** as well as some **variants** for each. A **reference style** sets some guidelines about what kind of information is displayed, the granularity of the information, and more generally defines a purpose for which this style is the most relevant: street navigation, outdoor adventure, minimalist dashboard, etc. Then, each **reference style** offers a range of **variants** that contain the same level of information and have the same purpose but use different color schemes.
 
 Here is the full list:
 - `MapStyle.STREETS`, reference style for navigation and city exploration
@@ -180,7 +181,7 @@ Here is the full list:
 - `MapStyle.BASIC` reference style for minimalist design and general purpose
   - `MapStyle.BASIC.DARK` (variant)
   - `MapStyle.BASIC.LIGHT` (variant)
-- `MapStyle.BRIGHT` reference style for high contrast navigation
+- `MapStyle.BRIGHT` reference style for high-contrast navigation
   - `MapStyle.BRIGHT.DARK` (variant)
   - `MapStyle.BRIGHT.LIGHT` (variant)
   - `MapStyle.BRIGHT.PASTEL` (variant)
@@ -199,13 +200,13 @@ Here is the full list:
 - `MapStyle.OPENSTREETMAP` (reference style, this one does not have any variants)
 
 
-All reference styles (instances of `ReferenceMapStyle`) and style variants (instances of `MapStyleVariant`) have methods to know the alternative styles and variant that belong to the same reference style (`.getVariants()`). This is handy to provide a default/dark/light alternative color scheme, yet preserving the same level of details as in the reference style. Read more about about [ReferenceMapStyle](docsmd/classes/ReferenceMapStyle.md) and [MapStyleVariant](docsmd/classes/MapStyleVariant.md).
+All reference styles (instances of `ReferenceMapStyle`) and style variants (instances of `MapStyleVariant`) have methods to know the alternative styles and variants that belong to the same reference style (`.getVariants()`). This is handy to provide a default/dark/light alternative color scheme, yet preserving the same level of details as in the reference style. Read more about about [ReferenceMapStyle](https://docs.maptiler.com/sdk-js/api/map-styles/#referencemapstyle) and [MapStyleVariant](https://docs.maptiler.com/sdk-js/api/map-styles/#mapstylevariant).
 </details>  
 
 ___
 
 
-Still, you can still use some classic styles with just a *string* if you know their MapTiler CLoud ID:
+Still, you can still use some classic styles with just a *string* if you know their MapTiler Cloud ID:
 
 ```ts
 map.setStyle('outdoor-v2');
@@ -230,8 +231,8 @@ map.setStyle("maptiler://c912ffc8-2360-487a-973b-59d037fb15b8");
 ```
 
 # Centering the map on visitors
-It is sometimes handy to center map on the visitor's location, and there are multiple ways of doing it but for the SDK, we have decided to make this extra simple by using the [IP geolocation](#%EF%B8%8F%EF%B8%8F-geolocation) API provided by [MapTiler Cloud](https://docs.maptiler.com/cloud/api/geolocation/), directly exposed as a single option of the `Map` constructor. There are two strategies:
-1. `POINT`: centering the map on the actual visitor location, optionnaly using the `zoom` option (zoom level `13` if none is provided). As a more precise option, if the user has previously granted access to the browser location (more precise) then this is going to be used.
+It is sometimes handy to center the map on the visitor's location, and there are multiple ways of doing it but for the SDK, we have decided to make this extra simple by using the [IP geolocation](#%EF%B8%8F%EF%B8%8F-geolocation) API provided by [MapTiler Cloud](https://docs.maptiler.com/cloud/api/geolocation/), directly exposed as a single option of the `Map` constructor. There are two strategies:
+1. `POINT`: centering the map on the actual visitor location, optionally using the `zoom` option (zoom level `13` if none is provided). As a more precise option, if the user has previously granted access to the browser location (more precise) then this is going to be used.
 2. `COUNTRY`: fitting the map view on the bounding box of the visitor's country. In this case, the `zoom` option, if provided, will be ignored
 
 Here is how the map gets centered on the visitor's location:
@@ -253,21 +254,21 @@ new maptilersdk.Map({
 ```
 
 The `geolocation` options will not be taken into consideration in the following cases:
-- if the `center` options is provided, then it prevails
-- if the `hash` options is provided with the value `true` **AND** a location hash is already part of the URL. If `hash` is `true` but there is not yet a location hash in the URL, then the geolocation will work.
+- if the `center` option is provided, then it prevails
+- if the `hash` option is provided with the value `true` **AND** a location hash is already part of the URL. If `hash` is `true` but there is not yet a location hash in the URL, then the geolocation will work.
 
 > 📣 *__Note:__* if none of the options `center` or `hash` is provided to the `Map` constructor, then the map will be centered using the `POINT` strategy, unless the `geolocate` has the value `false`.
 
 > 📣 *__Note 2:__* the term *IP geolocation* refers to finding the physical location of a computer using its *IP address*. The *IP address* is a numerical identifier of a computer within a network, just like the phone number for a telephone. The *IP geolocation* is **not** using the GPS of a device and usually provides a precision in the order of a few hundred meters. This precision may vary based on many local parameters such as the density of the network grid or the terrain, this is why it is generaly better not to use a zoom level higher than `14`.
 
 # Easy to add controls
-The term "control" is commonly used for all sorts of buttons and information display that take place in one of the corner of the map area. The most well know are probably the `[+]` and `[-]` zoom buttons as well as the attribution information. Plenty of others are possible and we have made a few easy to add and directly accessible from the `Map` constructor options:
+The term "control" is commonly used for all sorts of buttons and information displays that take place in one of the corners of the map area. The most well-known are probably the `[+]` and `[-]` zoom buttons as well as the attribution information. Plenty of others are possible and we have made a few easy to add and directly accessible from the `Map` constructor options:
 
 - `navigationControl`
   - Shows the `[+]`, `[-]` and tilt/bearing/compass buttons
   - a boolean or a corner position. Showing on the top-right by default. Hidden if `false`.
 - `geolocateControl`
-  - Shows a arrow-shaped locate button. When clicked, it adds a marker and center the map. If clicked again, the marker disapears (unless the map was moved since first clicked)
+  - Shows an arrow-shaped locate button. When clicked, it adds a marker and centers the map. If clicked again, the marker disappears (unless the map was moved since first clicked)
   - a boolean or a corner position. Showing on the top-right by default. Hidden if `false`.
 - `terrainControl`
   - Shows a button to enable/disable the 3D terrain (does not tilt the map)
@@ -306,7 +307,7 @@ const map = new Map({
 </p>
 
 
-You want to enable 3D terrain? That's easy now with a single function call:
+Do you want to enable 3D terrain? That's easy now with a single function call:
 ```ts
 // With the default exaggeration factor of 1
 map.enableTerrain();
@@ -343,13 +344,13 @@ map.disableTerrain()
 # Easy language switching
 The language generally depends on the style but we made it possible to easily set and update from a built-in list of languages.
 
-The builtin list of supported languages is accessible from the `Language` object:
+The built-in list of supported languages is accessible from the `Language` object:
 ```ts
 import { Language } from "@maptiler/sdk";
 ```
 In the UMD bundle, it will be directly at `maptilersdk.Language`.
 
-There three distinct ways to set the language of a map:
+There are three distinct ways to set the language of a map:
 
 1. **Global way, using the config object:**
 ```ts
@@ -357,9 +358,9 @@ import { config } from "@maptiler/sdk";
 
 config.primaryLanguage = Language.ENGLISH;
 ```
-Then, the if any further language is setting is applied, all the map instances created afterward will use this language. 
+Then, if any further language setting is applied, all the map instances created afterward will use this language. 
 
-2. **Set the language at instanciation time:**
+2. **Set the language at instantiation time:**
 ```ts
 const map = new Map({
   // some options...
@@ -368,19 +369,19 @@ const map = new Map({
 ```
 It will only apply `ENGLISH` as the language of this specific map instance (and will not alter the global `config`).
 
-3. **Set the language after the map has been instanciated:**
+3. **Set the language after the map has been instantiated:**
 ```ts
 map.setLanguage(Language.ENGLISH);
 ```
 Again, it will only apply `ENGLISH` as the language of this specific map instance (and will not alter the global `config`).
 
 
-The list of supported languages is built-in and can be found [here](src/language.ts). In addition, there are spacial language *flags*:
+The list of supported languages is built-in and can be found [here](src/language.ts). In addition, there are special 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
+- `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.LOCAL`.
 
@@ -388,7 +389,7 @@ Here is a sample of some compatible languages:
 ![](images/screenshots/multilang.gif)
 
 # Built-in support for right-to-left languages
-Languages that are written right-to-left such as arabic and hebrew are fully supported by default. No need to install any plugin!
+Languages that are written right-to-left such as Arabic and Hebrew are fully supported by default. No need to install any plugins!
 
 <p align="center">
   <img src="images/screenshots/lang-arabic.jpeg" width="48%"></img>
@@ -398,10 +399,10 @@ Languages that are written right-to-left such as arabic and hebrew are fully sup
 # Custom Events and Map Lifecycle
 ## Events
 ### The `ready` event
-The `ready` event happens just after the `load` event but waits that all the controls managed by the `Map` constructor are dealt with, some having an asynchronous logic to set up.  
-Since the `ready` event waits that all the basic controls are nicely positioned, it is **safer** to use `ready` than `load` if you plan to add other custom comtrols with the `.addControl()` method.
+The `ready` event happens just after the `load` event but waits until all the controls managed by the `Map` constructor are dealt with, some having an asynchronous logic to set up.  
+Since the `ready` event waits until all the basic controls are nicely positioned, it is **safer** to use `ready` than `load` if you plan to add other custom controls with the `.addControl()` method.
 
-This event works exactely the same way as `load` and you can safely replace those by `"ready"`. Here is a usage example:
+This event works exactly the same way as `load` and you can safely replace those by `"ready"`. Here is a usage example:
 
 ```js
 const map = new maptilersdk.Map({
@@ -418,7 +419,7 @@ map.on("ready", (evt) => {
 The `loadWithTerrain` event is triggered only *once* in a `Map` instance lifecycle, when both the `ready` event and the `terrain` event **with non-null terrain** are fired. 
 
 **Why a new event?**
-When a map is instanciated with the option `terrain: true`, then MapTiler terrain is directly added to it and some animation functions such as `.flyTo()` or `.easeTo()` if started straight after the map initialization will actually need to wait a few milliseconds that the terrain is properly initialized before running.  
+When a map is instantiated with the option `terrain: true`, then MapTiler terrain is directly added to it and some animation functions such as `.flyTo()` or `.easeTo()` if started straight after the map initialization will actually need to wait a few milliseconds that the terrain is properly initialized before running.  
 Relying on the `ready` or `load` event to run an animation with a map with terrain may fail in some cases for this reason, and this is why waiting for `loadWithTerrain` is safer in this particular situation.
 
 ## Lifecycle Methods
@@ -468,7 +469,7 @@ async function init() {
 }
 ```
 
-We deployed exactely the same logic for the `loadWithTerrain` event. Let's see how they two ways compares.
+We deployed exactly the same logic for the `loadWithTerrain` event. Let's see how the two ways compare.
 - Classic: with a callback on the `loadWithTerrain` event:
 ```ts
 function init() {
@@ -565,11 +566,11 @@ We believe that the *promise* approach is better because it does not nest scopes
 > 📣 *__Note:__* Generally speaking, *promises* are not a go to replacement for all event+callback and are suitable only for events that are called only once in the lifecycle of a Map instance. This is the reason why we have decided to provide a *promise* equivalent only for the `load`, `ready` and `loadWithTerrain` events but not for events that may be called multiple time such as interaction events.
 
 # Color Ramps
-A color ramp is a color gradient defined in a specific interval, for instance in [0, 1], and for any value within this interval will retrieve a color. They are defined by at least a color at each bound and usualy additional colors within the range.  
+A color ramp is a color gradient defined in a specific interval, for instance in [0, 1], and for any value within this interval will retrieve a color. They are defined by at least a color at each bound and usually additional colors within the range.  
 
 Color ramps are super useful to represent numerical data in a visual way: the temperature, the population density, the average commute time, etc.  
 
-The SDK includes many built-in ready to use color ramps as well as extra logic to manipulate them and create new ones, here is the full list:
+The SDK includes many built-in ready-to-use color ramps as well as extra logic to manipulate them and create new ones, here is the full list:
 
 ![](images/colorramps.png)
 
@@ -591,7 +592,7 @@ const zeroColorHex = temperatureTurbo.getColorHex(0);
 // The color is a string: "#2ddabdff"
 ```
 
-Creating a new one consists in defining all the colors for each *color stops*. The values can be in the range of interest and *do not* have to be in [0, 1]. For example, let's recreate a *Viridis* color ramp but with a range going from 0 to 100:
+Creating a new one consists of defining all the colors for each *color stops*. The values can be in the range of interest and *do not* have to be in [0, 1]. For example, let's recreate a *Viridis* color ramp but with a range going from 0 to 100:
 
 ```ts
 import { ColorRamp } from "@maptiler/sdk";
@@ -611,13 +612,13 @@ const myCustomRamp = new ColorRamp({
 });
 ```
 
-When defining a new *ramp*, the colors can be a RGB array (`[number, number, number]`) or a RGBA array (`[number, number, number, number]`).
+When defining a new *ramp*, the colors can be an RGB array (`[number, number, number]`) or an RGBA array (`[number, number, number, number]`).
 
-Many methods are available on color ramps, such as getting a `<canvas>` element of it, rescale it, flip it or [resample it in a non-linear way](colorramp.md). Read more on [our reference page](https://docs.maptiler.com/sdk-js/api/map/) and have a look at our [examples](https://docs.maptiler.com/sdk-js/examples/?q=colorramp) to see how they work.
+Many methods are available on color ramps, such as getting the `<canvas>` element of it, rescaling it, flipping it or [resampling it in a non-linear way](colorramp.md). Read more on [our reference page](https://docs.maptiler.com/sdk-js/api/color-ramp/) and have a look at our [examples](https://docs.maptiler.com/sdk-js/examples/?q=colorramp) to see how they work.
 
 
 # Vector Layer Helpers
-**Let's make vector layers easy!** Originaly, you'd have to add a source and then proceed to the styling of your layer, which can be tricky because there are a lot of `paint` and `layout` options and they vary a lot from one type of layer to another. **But we have helpers for this!** 🖋️
+**Let's make vector layers easy!** Originally, you'd have to add a source and then proceed to the styling of your layer, which can be tricky because there are a lot of `paint` and `layout` options and they vary a lot from one type of layer to another. **But we have helpers for this!** 🖋️
 ![](images/screenshots/point-layer.jpg)
 
 ## Shared logic
@@ -625,7 +626,7 @@ Helpers come with a lot of **built-in defaults** and some fail-proof logic that
 
 Depending on the type of feature to add (point, polyline, polygon or heatmap), a different helper function needs to be used, but datasource could contain mixed types of feature and the helper will only display a specific type.
 
-All the helpers are made avaialable under the `helpers` object. If you are using ES Modules, this is how you access them:
+All the helpers are made available under the `helpers` object. If you are using ES Modules, this is how you access them:
 ```ts
 import { Map, helpers } from "@maptiler/sdk";
 ```
@@ -637,21 +638,21 @@ maptilersdk.helpers
 
 **Example:** we have a *geoJSON* file that contains both *polygons* and *point* and we use it as the `data` property on the `helpers.addPoint(map, { options })`, this will only add the *points*.
 
-In addition to easy styling, helper's datasource can be:
+In addition to easy styling, the helper's datasource can be:
 - a URL to a geoJSON file or its string content
 - a URL to a GPX or KML file (only for the polyline helper) or its string content
 - a UUID of a MapTiler Cloud dataset
 
 ### Multiple Layers
-The key design principle of these vector layers helpers is **it's easy to make what you want**, which is very different from **making MapLibre easier to use**.  
+The key design principle of these vector layer helpers is **it's easy to make what you want**, which is very different from **making MapLibre easier to use**.  
 
 > For example, to create a road with an outline, one must draw two layers: a wider base layer and a narrower top layer, fueled by the same polyline data. This requires ordering the layers properly and computing not the width of the outline, but rather the width of the polyline underneath so that it outgrows the top road layer of the desired number of pixels. 
 
-With the polyline helper, you just say if you want an outline and specify its size (or even a zoom dependant size) and everything is handled for you. As a result, calling the method `helpers.addPolyline` will return an object with **multiple IDs**: ID of the top/main layer, ID of the outline layer (could be `null`) and the ID of the data source. This makes further layer and source manipulation possible.
+With the polyline helper, you just say if you want an outline and specify its size (or even a zoom-dependent size) and everything is handled for you. As a result, calling the method `helpers.addPolyline` will return an object with **multiple IDs**: the ID of the top/main layer, the ID of the outline layer (could be `null`) and the ID of the data source. This makes further layer and source manipulation possible.
 
 ### Input
 
-The vector layer helper also share some *I/O* logic: each of them can take many options but a subset of them is common across all the helpers:
+The vector layer helper also shares some *I/O* logic: each of them can take many options but a subset of them is common across all the helpers:
 
 ```ts
 /**
@@ -696,9 +697,9 @@ maxzoom?: number;
 
 
 ## Polyline Layer Helper
-The method `helpers.addPolyline` is not only compaptible with the traditional GeoJSON source but also with **GPX** and **KML** files and the `.data` options can be a MapTiler Cloud dataset UUID and will be resolved automatically.
+The method `helpers.addPolyline` is not only compatible with the traditional GeoJSON source but also with **GPX** and **KML** files and the `.data` options can be a MapTiler Cloud dataset UUID and will be resolved automatically.
 
-here is the minimal usage, with the default line width and a random color (withing a selected list):
+here is the minimal usage, with the default line width and a random color (within a selected list):
 ```ts
 helpers.addPolyline(map, { 
   // A URL, relative or absolute
@@ -707,7 +708,7 @@ helpers.addPolyline(map, {
 ```
 ![](images/screenshots/default-trace.jpg)
 
-We can add many options, such a a specific color, a custom width or a dash pattern, this time sourcing the data from MapTiler Cloud, using the UUID of a dataset:
+We can add many options, such as specific color, a custom width or a dash pattern, this time sourcing the data from MapTiler Cloud, using the UUID of a dataset:
 ```ts
 helpers.addPolyline(map, { 
   data: "74003ba7-215a-4b7e-8e26-5bbe3aa70b05",
@@ -747,7 +748,7 @@ helpers.addPolyline(map, {
 ![](images/screenshots/polyline-glow.png)
 
 
-All the other options are documented on a [our reference page](https://docs.maptiler.com/sdk-js/api/map/) and more examples are available [here](https://docs.maptiler.com/sdk-js/examples/).
+All the other options are documented on [our reference page](https://docs.maptiler.com/sdk-js/api/helpers/#polyline) and more examples are available [here](https://docs.maptiler.com/sdk-js/examples/?q=polyline+helper).
 
 ## Polygon Layer Helper
 The polygon helper makes it easy to create vector layers that contain polygons, whether they are *multi*polylons, *holed*polygons or just simple polygons. Whenever it's possible and it makes sense, we use the same terminology across the different helpers.
@@ -764,7 +765,7 @@ helpers.addPolygon(map, {
 Again, if no color is specified, a random one from a list is being picked:
 ![](images/screenshots/polygon-transparent.png)
 
-Plenty of options are available to create the interesting thematic visualizations:
+Plenty of options are available to create interesting thematic visualizations:
 
 ```ts
 helpers.addPolygon(map, {
@@ -779,10 +780,10 @@ helpers.addPolygon(map, {
 ```
 ![](images/screenshots/swiss-cheese.png)
 
-All the other options are documented on a [our reference page](https://docs.maptiler.com/sdk-js/api/map/) and more examples are available [here](https://docs.maptiler.com/sdk-js/examples/).
+All the other options are documented on [our reference page](https://docs.maptiler.com/sdk-js/api/helpers/#polygon) and more examples are available [here](https://docs.maptiler.com/sdk-js/examples/?q=polygon+helper).
 
 ## Point Layer Helper
-A point visualisation may appear like the simplest of all, but we noticed this is where people get the most creative: cluster, data-drive variable radius, but also scaled with zoom, with or without labels, data-driven colors, etc. Our helper supports all of these and will fill-in with built-in default for what's missing.
+A point visualization may appear like the simplest of all, but we noticed this is where people get the most creative: cluster, data-driven variable radius, but also scaled with zoom, with or without labels, data-driven colors, etc. Our helper supports all of these and will fill-in with built-in default for what's missing.
 
 Here is the simplest example, with a dataset loaded from a local file:
 ```ts
@@ -803,7 +804,7 @@ helpers.addPoint(map, {
 On the other hand, if clusters are enabled, the default color is fueled by the color ramp `TURBO` scaled from `10` to `10000` non-linearly resampled with the method `"ease-out-square"`. The size also varies from `minPointradius` (default: `10`) to `maxPointRadius` (default: `50`):
 ![](images/screenshots/points-clustered.png)
 
-With the point helper, it's also possible to adapt the color and theradius based on a property. In the following example, we display a point for each public school, with the scaling factor being the number of students:
+With the point helper, it's also possible to adapt the color and the radius based on a property. In the following example, we display a point for each public school, with the scaling factor being the number of students:
 ```ts
 helpers.addPoint(map, {
   data: "public-schools.geojson",
@@ -818,12 +819,12 @@ helpers.addPoint(map, {
 ```
 ![](images/screenshots/nyc-schools.png)
 
-Here, the`PORTLAND` color ramp is going to be used so that schools with `200` students or less will have the colors at the very begining of the color ramp and schools with `2000` or more will have the color defined at the very end. Schools in between will be attributed a colors in a non-linear fashion, following the `"ease-out-sqrt"` method (read **Color Ramps** section above for more info).
+Here, the`PORTLAND` color ramp is going to be used so that schools with `200` students or less will have the colors at the very beginning of the color ramp and schools with `2000` or more will have the color defined at the very end. Schools in between will be attributed a color in a non-linear fashion, following the `"ease-out-sqrt"` method (read **Color Ramps** section above for more info).
 
-All the other options are documented on a [our reference page](https://docs.maptiler.com/sdk-js/api/map/) and more examples are available [here](https://docs.maptiler.com/sdk-js/examples/).
+All the other options are documented on [our reference page](https://docs.maptiler.com/sdk-js/api/helpers/#point) and more examples are available [here](https://docs.maptiler.com/sdk-js/examples/?q=point+helper).
 
 ## Heatmap Layer Helper
-The heatmap layer is a great alternative for visualizing a collection of sparse data, but they can be challenging to use, especially when one has to come up with their own color ramp from scratch. **The helper makes this much easier!**
+The heatmap layer is a great alternative for visualizing a collection of sparse data, but it can be challenging to use, especially when one has to come up with their own color ramp from scratch. **The helper makes this much easier!**
 
 Here is a minimalist example, using the default built-in `TURBO` color ramp:
 ```ts
@@ -833,7 +834,7 @@ helpers.addHeatmap(map, {
 ```
 ![](images/screenshots/heatmap-schools.png)
 
-Some visualisations are created with a fixed geographic extent or zoom level in mind, whether it's a survey at the scale of a single neigbohood, or statitics at country scale. In this case, we want to tailor the color, radius, weight and intensity of the heatmap blobs exactely for this precise settings. In the following example, we disable the *zoom compensation* to make sure radii and intensity is never zoom-dependant:
+Some visualizations are created with a fixed geographic extent or zoom level in mind, whether it's a survey at the scale of a single neighborhood or statistics at a country scale. In this case, we want to tailor the color, radius, weight and intensity of the heatmap blobs exactly for these precise settings. In the following example, we disable the *zoom compensation* to make sure radio and intensity are never zoom-dependant:
 ```ts
 helpers.addHeatmap(map, {
   data: "public-schools.geojson",
@@ -859,12 +860,12 @@ helpers.addHeatmap(map, {
 ![](images/screenshots/heatmap-colorramp.png)
 Turning off *zoom compensation* allows for more accurate adjustments to the visualization at a specific zoom level, but it may not adapt as smoothly when zooming in or out.
 
-All the other options are documented on a [our reference page](https://docs.maptiler.com/sdk-js/api/map/) and more examples are available [here](https://docs.maptiler.com/sdk-js/examples/).
+All the other options are documented on [our reference page](https://docs.maptiler.com/sdk-js/api/helpers/#heatmap) and more examples are available [here](https://docs.maptiler.com/sdk-js/examples/?q=heatmap+helper).
 
 # Caching
 Starting from v2, MapTiler SDK introduced the **caching** of tiles and fonts served by MapTiler Cloud, which can represent a large chunk of the data being fetched when browsing a map. This caching leverages modern browsers caching API so it's well-managed and there is no risk of bloating! When we update **MapTiler Planet** or our **official styles**, the caching logic will detect it and automatically invalidate older versions of the tiles that were previously cached.
 
-Caching greatly improves the performance at load time and positively impact the user experience, for this reason, it is **enabled by default**. If for debugging purposes or a for a very specific use-case caching needs to be disabled, then it possible:
+Caching greatly improves the performance at load time and positively impacts the user experience, for this reason, it is **enabled by default**. If for debugging purposes or for a very specific use-case caching needs to be disabled, then it is possible:
 
 ```ts
 import { config } from "@maptiler/sdk";
@@ -873,7 +874,7 @@ config.caching = false;
 ```
 
 # Easy access to MapTiler Cloud API
-Our map SDK is not only about maps! We also provide plenty of wrapper to our API calls!
+Our map SDK is not only about maps! We also provide plenty of wrappers to our API calls!
 
 > 📣 *__Note:__* If you need <ins>only the API Client library</ins> to use in a headless fashion and without any map display, check out out [API Client library](https://docs.maptiler.com/client-js/) for browser and NodeJS. It's exactely what is down below and only that, in a minimalistic [TypeScript package](https://github.com/maptiler/maptiler-client-js) 🐙.
 
@@ -895,7 +896,7 @@ You can provide some options such as:
 Read more about forward geocoding on our [official documentation](https://docs.maptiler.com/client-js/geocoding/#forward).
 
 ### Reverse
-You wan to tknow the name of a place, given a longitude-latitude? Use the reverse geocoding:
+You want to know 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 maptilersdk.geocoding.reverse([6.249638, 46.402056]);
@@ -905,7 +906,7 @@ The same option object as the forward geocoding can be provided.
 Read more about reverse geocoding on our [official documentation](https://docs.maptiler.com/client-js/geocoding/#reverse).
 
 ### Language
-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:
+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` option is an array:
 
 ```ts
 const result = await maptilersdk.geocoding.forward('paris', {language: [maptilersdk.geocoding.languages.SPANISH, maptilersdk.geocoding.languages.KOREAN]})
@@ -914,9 +915,9 @@ const result = await maptilersdk.geocoding.forward('paris', {language: [maptiler
 The special language `AUTO` will detect the platform/browser preferred language.
 
 ## 🕵️‍♂️ Geolocation
-The geolocation service provides location informations of a visitor using its IP address.
+The geolocation service provides location information of a visitor using its IP address.
 
-The geolocation uses the IP address of a visitors to provide informations about their location, such as city, region, country, timezone, etc. The precision is lower than GPS but does not require visitors to explicitely enable the location service from their web browser.
+The geolocation uses the IP address of a visitor to provide information about their location, such as city, region, country, timezone, etc. The precision is lower than GPS but does not require visitors to explicitly enable the location service from their web browser.
 
 There is only a single function:
 ```ts
@@ -927,10 +928,10 @@ const result = await maptilersdk.geolocation.info();
 Read more about geolocation on our [official documentation](https://docs.maptiler.com/client-js/geolocation/).
 
 ## 🌐 Coordinates
-If you are already familiar with [epsg.io](https://epsg.io/) (created by MapTiler), then you may find convenient to access the details of more than 10 thousands of coordinate reference systems (CRS) programmatically, as well as transforming coordinates from one system to another!
+If you are already familiar with [epsg.io](https://epsg.io/) (created by MapTiler), then you may find it convenient to access the details of more than 10 thousands coordinate reference systems (CRS) programmatically, as well as transform coordinates from one system to another!
 
 ### Search
-The `search` lets you perform a query in a free form fashion. Here are some examples:
+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 maptilersdk.coordinates.search('mercator');
@@ -939,14 +940,14 @@ 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.
+The `transformations` options retrieve a lot more details about the CRS that MapTiler API is able to transform to/from than just their IDs.
 
 Read more about searching coordinate systems on our [official documentation](https://docs.maptiler.com/client-js/coordinates/#search).
 
 ### Transform
 Transforming a couple of coordinates from one system to another can be challenging, for example, most countries have their own official system, yet web mapping tools are more often than not exclusive to [WGS84](https://epsg.io/4326).
 
-If not provided, both the source (`sourceCrs`) and the destination (`targetCrs`) are default to **EPSG:4326** (in other words, [WGS84](https://epsg.io/4326)). Here is how to use this feature:
+If not provided, both the source (`sourceCrs`) and the destination (`targetCrs) are defaulted to **EPSG:4326**** (in other words, [WGS84](https://epsg.io/4326)). Here is how to use this feature:
 
 ```ts
 // in an async function, or as a 'thenable':
@@ -961,7 +962,7 @@ const resultB = await maptilersdk.coordinates.transform([[10, 48], [1, 45]], {ta
 Read more about transforming coordinates on our [official documentation](https://docs.maptiler.com/client-js/coordinates/#transform).
 
 ## 💽 Data
-MapTiler Cloud give its users the possibility to [upload and create data](https://cloud.maptiler.com/data/), manually with a user interface or by uploading a GPX, GeoJSON, KML or shp file. A unique ID is associated to each dataset so that we can later on access it programmatically to retrieve a GeoJSON equivalent of it:
+MapTiler Cloud gives its users the possibility to [upload and create data](https://cloud.maptiler.com/data/), manually with a user interface or by uploading a GPX, GeoJSON, KML or shp file. A unique ID is associated with each dataset so that we can later access it programmatically to retrieve a GeoJSON equivalent of it:
 
 ```ts
 // in an async function, or as a 'thenable':
@@ -976,9 +977,9 @@ Read more about fetching your own data on our [official documentation](https://d
 > ✅ Please, use static maps URLs only from client side `<img>` elements, and do not 🚫 store or redistribute the static map files. In case of doubt, consult the [terms](https://www.maptiler.com/cloud/terms/#explicitly-prohibited-use) ⚖️
 
 Maptiler Cloud provides many possibilities for creating static maps as PNG, JPEG or WebP images. They all offer the possibilities to:
-- Choose from one of the MapTiler style or your own
-- Add markers with a custom icon (or default icon with custom color)
-- Add path or polygon, with a parametric line width and color and a parametric filling color
+- Choose from one of the MapTiler styles or your own
+- Add markers with a custom icon (or default icon with a custom color)
+- Add a path or polygon, with a parametric line width and color and a parametric filling color
 
 Three modes are available: `centered`, `bounded` and `automatic`.
 
@@ -1003,7 +1004,7 @@ In the following static map functions, the `option` object features a `style` pr
 - `MapStyle.BASIC` reference style for minimalist design and general purpose
   - `MapStyle.BASIC.DARK` (variant)
   - `MapStyle.BASIC.LIGHT` (variant)
-- `MapStyle.BRIGHT` reference style for high contrast navigation
+- `MapStyle.BRIGHT` reference style for high-contrast navigation
   - `MapStyle.BRIGHT.DARK` (variant)
   - `MapStyle.BRIGHT.LIGHT` (variant)
   - `MapStyle.BRIGHT.PASTEL` (variant)
@@ -1096,7 +1097,7 @@ As you may notice, the geo bounding box could have very different proportions th
 Read more about bounded static maps on our official [API documentation](https://docs.maptiler.com/cloud/api/static-maps/#bounds-based-image).
 
 ### Automatic static maps
-As we have seen with centered and bounded maps, providing all the parameters is nice but can be cumbersome for the simplest use cases. This is why MapTiler Cloud also provides static maps that fits automatically whatever you need to place inside: path or markers.
+As we have seen with centered and bounded maps, providing all the parameters is nice but can be cumbersome for the simplest use cases. This is why MapTiler Cloud also provides static maps that fit automatically whatever you need to place inside: path or markers.
 
 In the following example, we are going to load a cycling track recorded by one of our team members in Montreal, Canada. The track, originally a GPX file, was pushed to MapTiler Data and is now made available as a GeoJSON:
 
@@ -1139,7 +1140,7 @@ And voila!
 Read more about bounded static maps on our official [API documentation](https://docs.maptiler.com/cloud/api/static-maps/#auto-fitted-image).
 
 ## 🏔️ Elevation
-With the elevation API, it's possible to get the elevation in metter from any location. It's possible to lookup and compute elevation for a single location, to provide a batch of points, from a GeoJSON LineString or from a GeoJSON MultiLineString!
+With the elevation API, it's possible to get the elevation in meters from any location. It's possible to lookup and compute elevation for a single location, to provide a batch of points, from a GeoJSON LineString or a GeoJSON MultiLineString!
 
 > ℹ️ Under the hood, the elevation API is fueled by MapTiler Cloud's **RGB Terrain** raster tileset, which is a composite of many high-resolution DEMs from all over the world, currated and processed by our geodata team! The same dataset is also fueling our SDK's elevation (3D terrain) and the hillshading we use in many of our styles.
 
@@ -1182,7 +1183,7 @@ const elevatedPeaks = await maptilersdk.elevation.batch(peaks);
 Read more about elevation lookup for a batch of locations in our [official documentation](https://docs.maptiler.com/client-js/elevation/#batch).
 
 ### From a GeoJSON LineString
-In the *GeoJSON* LineString case, it clones the entire structure and the positions arrays of the clone will contain three element: `[lng, lat, elevation]`. The original LineString is not mutated nor pointed at.
+In the *GeoJSON* LineString case, it clones the entire structure and the position arrays of the clone will contain three elements: `[lng, lat, elevation]`. The original LineString is not mutated nor pointed at.
 
 ```ts
 // Not mandatory, but it's to explain where the type comes from:
@@ -1201,7 +1202,7 @@ const someElevatedLineString = await maptilersdk.elevation.fromLineString(someLi
 Read more about elevation lookup for a `LineString` in our [official documentation](https://docs.maptiler.com/client-js/elevation/#linestring).
 
 ### From a GeoJSON MultiLineString
-In the *GeoJSON* MultiLineString case, it clones the entire structure and the positions arrays of the clone will contain three element: `[lng, lat, elevation]`. The original MultiLineString is not mutated nor pointed at.
+In the *GeoJSON* MultiLineString case, it clones the entire structure and the position arrays of the clone will contain three elements: `[lng, lat, elevation]`. The original MultiLineString is not mutated nor pointed at.
 
 ```ts
 // Not mandatory, but it's to explain where the type comes from:
@@ -1227,9 +1228,9 @@ Read more about elevation lookup for a `MultiLineString` in our [official docume
 In order to increase performance while reducing unnecessary elevation data fetching, the elevation tiles are cached. This is particularly important for the LineString and MultiLineString lookups because GeoJSON data are likely to come from a recorded or planned route, where position points are very close to one another.
 
 ## 🧮 Math
-Some operations can be fairly repetitive: WGS84 to Mercator, WGS84 to *zxy* tile index, distance between two points with Haversine formula, etc. As a result, we have decided to expose a `math` package providing the most recurent feature, so that, just like us at MapTiler, you no longer need to copy-paste the same function from your previous project!
+Some operations can be fairly repetitive: WGS84 to Mercator, WGS84 to *zxy* tile index, the distance between two points with the Haversine formula, etc. As a result, we have decided to expose a `math` package providing the most recurrent feature, so that, just like us at MapTiler, you no longer need to copy-paste the same function from your previous project!
 
-The `math` package differs from the others in the sense that it does not call the MapTiler Cloud API, instead it operates fully on the machine it's running on.
+The `math` package differs from the others in the sense that it does not call the MapTiler Cloud API, instead, it operates fully on the machine it's running on.
 
 Here are some examples:
 

package/.eslintignore

@@ -1 +0,0 @@
-src/maplibre-borrow/**