@maptiler/sdk 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (158) hide show
  1. package/package.json +1 -1
  2. package/readme.md +11 -11
  3. package/docs/.nojekyll +0 -1
  4. package/docs/assets/custom.css +0 -118
  5. package/docs/assets/highlight.css +0 -134
  6. package/docs/assets/main.js +0 -54
  7. package/docs/assets/search.js +0 -1
  8. package/docs/assets/style.css +0 -1257
  9. package/docs/classes/Map.html +0 -273
  10. package/docs/classes/Point.html +0 -549
  11. package/docs/classes/SdkConfig.html +0 -188
  12. package/docs/demos/maptiler-sdk.css +0 -147
  13. package/docs/demos/maptiler-sdk.umd.js +0 -3287
  14. package/docs/demos/simple.html +0 -63
  15. package/docs/functions/addProtocol.html +0 -146
  16. package/docs/functions/clearPrewarmedResources.html +0 -92
  17. package/docs/functions/clearStorage.html +0 -124
  18. package/docs/functions/getRTLTextPluginStatus.html +0 -92
  19. package/docs/functions/prewarm.html +0 -92
  20. package/docs/functions/removeProtocol.html +0 -106
  21. package/docs/functions/setRTLTextPlugin.html +0 -112
  22. package/docs/functions/supported.html +0 -97
  23. package/docs/images/JS-logo.svg +0 -4
  24. package/docs/images/TS-logo.svg +0 -6
  25. package/docs/images/maptiler-logo.svg +0 -19
  26. package/docs/images/maptiler-sdk-logo.afdesign +0 -0
  27. package/docs/images/maptiler-sdk-logo.svg +0 -66
  28. package/docs/images/screenshots/alps.gif +0 -0
  29. package/docs/images/screenshots/grandcanyon.gif +0 -0
  30. package/docs/images/screenshots/lang-arabic.png +0 -0
  31. package/docs/images/screenshots/lang-hebrew.png +0 -0
  32. package/docs/images/screenshots/multilang.gif +0 -0
  33. package/docs/images/screenshots/static-bounded-europe-1024.png +0 -0
  34. package/docs/images/screenshots/static-bounded-europe-2048.png +0 -0
  35. package/docs/images/screenshots/static-bounded-portugal-1024x2048.png +0 -0
  36. package/docs/images/screenshots/static-bounded-portugal-2048x2048.png +0 -0
  37. package/docs/images/screenshots/static-with-path.png +0 -0
  38. package/docs/images/screenshots/style-basic-v2.png +0 -0
  39. package/docs/images/screenshots/style-bright.png +0 -0
  40. package/docs/images/screenshots/style-dataviz-dark.png +0 -0
  41. package/docs/images/screenshots/style-hybrid.png +0 -0
  42. package/docs/images/screenshots/style-osm.png +0 -0
  43. package/docs/images/screenshots/style-outdoor.png +0 -0
  44. package/docs/images/screenshots/style-pastel.png +0 -0
  45. package/docs/images/screenshots/style-satellite.png +0 -0
  46. package/docs/images/screenshots/style-streets-v2-dark.png +0 -0
  47. package/docs/images/screenshots/style-streets-v2-light.png +0 -0
  48. package/docs/images/screenshots/style-streets-v2.png +0 -0
  49. package/docs/images/screenshots/style-toner.png +0 -0
  50. package/docs/images/screenshots/style-topo.png +0 -0
  51. package/docs/images/screenshots/style-topographique.png +0 -0
  52. package/docs/images/screenshots/style-voyager.png +0 -0
  53. package/docs/images/screenshots/style-winter.png +0 -0
  54. package/docs/index.html +0 -601
  55. package/docs/modules.html +0 -142
  56. package/docs/types/LanguageKey.html +0 -90
  57. package/docs/types/LanguageString.html +0 -90
  58. package/docs/types/MapOptions.html +0 -90
  59. package/docs/types/Matrix2.html +0 -90
  60. package/docs/types/Unit.html +0 -88
  61. package/docs/variables/AJAXError.html +0 -88
  62. package/docs/variables/AttributionControl.html +0 -88
  63. package/docs/variables/CanvasSource.html +0 -88
  64. package/docs/variables/Evented.html +0 -88
  65. package/docs/variables/FullscreenControl.html +0 -88
  66. package/docs/variables/GeoJSONSource.html +0 -88
  67. package/docs/variables/GeolocateControl.html +0 -88
  68. package/docs/variables/GeolocationType.html +0 -95
  69. package/docs/variables/ImageSource.html +0 -88
  70. package/docs/variables/Language.html +0 -249
  71. package/docs/variables/LngLat.html +0 -88
  72. package/docs/variables/LngLatBounds.html +0 -88
  73. package/docs/variables/LogoControl.html +0 -88
  74. package/docs/variables/Marker.html +0 -88
  75. package/docs/variables/MercatorCoordinate.html +0 -88
  76. package/docs/variables/NavigationControl.html +0 -88
  77. package/docs/variables/Popup.html +0 -88
  78. package/docs/variables/RasterDEMTileSource.html +0 -88
  79. package/docs/variables/RasterTileSource.html +0 -88
  80. package/docs/variables/ScaleControl.html +0 -88
  81. package/docs/variables/Style.html +0 -88
  82. package/docs/variables/TerrainControl.html +0 -88
  83. package/docs/variables/VectorTileSource.html +0 -88
  84. package/docs/variables/VideoSource.html +0 -88
  85. package/docs/variables/config.html +0 -88
  86. package/docs/variables/maxParallelImageRequests.html +0 -88
  87. package/docs/variables/version.html +0 -88
  88. package/docs/variables/workerCount.html +0 -88
  89. package/docs/variables/workerUrl.html +0 -88
  90. package/docsmd/.nojekyll +0 -1
  91. package/docsmd/README.md +0 -710
  92. package/docsmd/assets/custom.css +0 -118
  93. package/docsmd/classes/Map.md +0 -292
  94. package/docsmd/classes/Point.md +0 -603
  95. package/docsmd/classes/SdkConfig.md +0 -186
  96. package/docsmd/images/JS-logo.svg +0 -4
  97. package/docsmd/images/TS-logo.svg +0 -6
  98. package/docsmd/images/maptiler-logo.svg +0 -19
  99. package/docsmd/images/maptiler-sdk-logo.afdesign +0 -0
  100. package/docsmd/images/maptiler-sdk-logo.svg +0 -66
  101. package/docsmd/images/screenshots/alps.gif +0 -0
  102. package/docsmd/images/screenshots/grandcanyon.gif +0 -0
  103. package/docsmd/images/screenshots/lang-arabic.png +0 -0
  104. package/docsmd/images/screenshots/lang-hebrew.png +0 -0
  105. package/docsmd/images/screenshots/multilang.gif +0 -0
  106. package/docsmd/images/screenshots/static-bounded-europe-1024.png +0 -0
  107. package/docsmd/images/screenshots/static-bounded-europe-2048.png +0 -0
  108. package/docsmd/images/screenshots/static-bounded-portugal-1024x2048.png +0 -0
  109. package/docsmd/images/screenshots/static-bounded-portugal-2048x2048.png +0 -0
  110. package/docsmd/images/screenshots/static-with-path.png +0 -0
  111. package/docsmd/images/screenshots/style-basic-v2.png +0 -0
  112. package/docsmd/images/screenshots/style-bright.png +0 -0
  113. package/docsmd/images/screenshots/style-dataviz-dark.png +0 -0
  114. package/docsmd/images/screenshots/style-hybrid.png +0 -0
  115. package/docsmd/images/screenshots/style-osm.png +0 -0
  116. package/docsmd/images/screenshots/style-outdoor.png +0 -0
  117. package/docsmd/images/screenshots/style-pastel.png +0 -0
  118. package/docsmd/images/screenshots/style-satellite.png +0 -0
  119. package/docsmd/images/screenshots/style-streets-v2-dark.png +0 -0
  120. package/docsmd/images/screenshots/style-streets-v2-light.png +0 -0
  121. package/docsmd/images/screenshots/style-streets-v2.png +0 -0
  122. package/docsmd/images/screenshots/style-toner.png +0 -0
  123. package/docsmd/images/screenshots/style-topo.png +0 -0
  124. package/docsmd/images/screenshots/style-topographique.png +0 -0
  125. package/docsmd/images/screenshots/style-voyager.png +0 -0
  126. package/docsmd/images/screenshots/style-winter.png +0 -0
  127. package/images/JS-logo.svg +0 -4
  128. package/images/TS-logo.svg +0 -6
  129. package/images/maptiler-logo.svg +0 -19
  130. package/images/maptiler-sdk-logo.afdesign +0 -0
  131. package/images/maptiler-sdk-logo.svg +0 -66
  132. package/images/screenshots/alps.gif +0 -0
  133. package/images/screenshots/grandcanyon.gif +0 -0
  134. package/images/screenshots/lang-arabic.png +0 -0
  135. package/images/screenshots/lang-hebrew.png +0 -0
  136. package/images/screenshots/multilang.gif +0 -0
  137. package/images/screenshots/static-bounded-europe-1024.png +0 -0
  138. package/images/screenshots/static-bounded-europe-2048.png +0 -0
  139. package/images/screenshots/static-bounded-portugal-1024x2048.png +0 -0
  140. package/images/screenshots/static-bounded-portugal-2048x2048.png +0 -0
  141. package/images/screenshots/static-with-path.png +0 -0
  142. package/images/screenshots/style-basic-v2.png +0 -0
  143. package/images/screenshots/style-bright.png +0 -0
  144. package/images/screenshots/style-dataviz-dark.png +0 -0
  145. package/images/screenshots/style-hybrid.png +0 -0
  146. package/images/screenshots/style-osm.png +0 -0
  147. package/images/screenshots/style-outdoor.png +0 -0
  148. package/images/screenshots/style-pastel.png +0 -0
  149. package/images/screenshots/style-satellite.png +0 -0
  150. package/images/screenshots/style-streets-v2-dark.png +0 -0
  151. package/images/screenshots/style-streets-v2-light.png +0 -0
  152. package/images/screenshots/style-streets-v2.png +0 -0
  153. package/images/screenshots/style-toner.png +0 -0
  154. package/images/screenshots/style-topo.png +0 -0
  155. package/images/screenshots/style-topographique.png +0 -0
  156. package/images/screenshots/style-voyager.png +0 -0
  157. package/images/screenshots/style-winter.png +0 -0
  158. package/scripts/replace-path-with-content.js +0 -51
package/docs/index.html DELETED
@@ -1,601 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>MapTiler SDK - v1.0.0</title><meta name="description" content="Documentation for MapTiler SDK - v1.0.0"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><link rel="stylesheet" href="assets/custom.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
2
- <div class="tsd-toolbar-contents container">
3
- <div class="table-cell" id="tsd-search" data-base=".">
4
- <div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
5
- <div class="field">
6
- <div id="tsd-toolbar-links"></div></div>
7
- <ul class="results">
8
- <li class="state loading">Preparing search index...</li>
9
- <li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">MapTiler SDK - v1.0.0</a></div>
10
- <div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
11
- <div class="container container-main">
12
- <div class="col-8 col-content">
13
- <div class="tsd-page-title">
14
- <h2>MapTiler SDK - v1.0.0</h2></div>
15
- <div class="tsd-panel tsd-typography"><p align="center">
16
- <img src="images/maptiler-sdk-logo.svg" width="400px">
17
- </p>
18
-
19
- <p align="center" style="color: #AAA">
20
- The Javascript & TypeScript map SDK tailored for <a href="https://www.maptiler.com/cloud/">MapTiler Cloud</a>
21
- </p>
22
-
23
- <p align="center">
24
- <img src="images/JS-logo.svg" width="20px">
25
- <img src="images/TS-logo.svg" width="20px">
26
- <img src="https://img.shields.io/npm/v/@maptiler/sdk"></img>
27
- <img src="https://img.shields.io/twitter/follow/maptiler?style=social"></img>
28
- </p>
29
-
30
-
31
- <a href="#what-and-why" id="what-and-why" style="color: inherit; text-decoration: none;">
32
- <h1>What and why?</h1>
33
- </a>
34
- <p>The <strong>MapTiler SDK JS</strong> extends MapLibre GL JS, exposes all its features, and adds new ones on top. The SDK is designed to work with the well-established <a href="https://www.maptiler.com/cloud/">MapTiler Cloud service</a>, which provides all the data required to fuel a complete web mapping experience: vector tiles, satellite raster tiles, DEM with Terrain RGB, custom styles with an editor, etc. </p>
35
- <p><strong>Why are we creating a new SDK?</strong> To make things simpler for developers working in the MapTiler ecosystem! With <strong>MapTiler SDK JS</strong>, there is no need to load external plugins for the most basic things, copy-paste complex data source URLs, or look up the syntax to enable 3D terrain every time you start a project. All this is built-in, loaded when needed, or exposed with simple functions. Under the hood, this SDK is opinionated as it&#39;s being fed by <a href="https://www.maptiler.com/cloud/">MapTiler Cloud</a> data, but its MapLibre core makes it 100% compatible with other sources. </p>
36
- <p>In addition, the MapTiler SDK JS provides well-documented and easy-to-use wrapper functions to the <a href="https://docs.maptiler.com/cloud/api">MapTiler Cloud API services</a> such as: geocoding, static maps, geolocation, as well as a search engine for coordinate reference systems and transforming coordinates from one CRS to another.</p>
37
- <blockquote>
38
- <p>📣 <em><strong>Note:</strong></em> If you need <ins>only the API Client library</ins> to use in a headless fashion and without any map display, check out <a href="https://github.com/maptiler/maptiler-client-js">MapTiler Client JS</a> library for browser and NodeJS.</p>
39
- </blockquote>
40
-
41
- <a href="#install" id="install" style="color: inherit; text-decoration: none;">
42
- <h1>Install</h1>
43
- </a>
44
- <pre><code class="language-shell"><span class="hl-0">npm install --save @maptiler/sdk</span>
45
- </code></pre>
46
-
47
- <a href="#api-documentation" id="api-documentation" style="color: inherit; text-decoration: none;">
48
- <h1>API documentation</h1>
49
- </a>
50
- <p>In addition to the details and examples provided in this readme, check out the <a href="https://maptiler.github.io/maptiler-sdk-js">complete API documentation</a> (see the <a href="docsmd/README.md">Markdown version</a>)</p>
51
-
52
- <a href="#quick-start" id="quick-start" style="color: inherit; text-decoration: none;">
53
- <h1>Quick start</h1>
54
- </a>
55
-
56
- <a href="#with-es-modules" id="with-es-modules" style="color: inherit; text-decoration: none;">
57
- <h2>With ES modules</h2>
58
- </a>
59
- <p><strong>Recommended for:</strong> advanced applications</p>
60
- <pre><code class="language-ts"><span class="hl-1">import</span><span class="hl-0"> </span><span class="hl-2">*</span><span class="hl-0"> </span><span class="hl-1">as</span><span class="hl-0"> </span><span class="hl-3">maptilersdk</span><span class="hl-0"> </span><span class="hl-1">from</span><span class="hl-0"> </span><span class="hl-4">&#39;@maptiler/sdk&#39;</span><span class="hl-0">;</span><br/><br/><span class="hl-5">// Add your MapTiler Cloud API key to the config</span><br/><span class="hl-5">// (Go to https://cloud.maptiler.com/account/keys/ to get one for free!)</span><br/><span class="hl-3">maptilersdk</span><span class="hl-0">.</span><span class="hl-3">config</span><span class="hl-0">.</span><span class="hl-3">apiKey</span><span class="hl-0"> = </span><span class="hl-4">&#39;YOUR_API_KEY&#39;</span><span class="hl-0">;</span><br/><br/><span class="hl-5">// Let&#39;s say you have a DIV ready to receive a map</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">mapContainer</span><span class="hl-0"> = </span><span class="hl-3">document</span><span class="hl-0">.</span><span class="hl-7">getElementById</span><span class="hl-0">(</span><span class="hl-4">&#39;my-container-div&#39;</span><span class="hl-0">);</span><br/><br/><span class="hl-5">// Instanciate the map</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">map</span><span class="hl-0"> = </span><span class="hl-2">new</span><span class="hl-0"> </span><span class="hl-3">maptilersdk</span><span class="hl-0">.</span><span class="hl-7">Map</span><span class="hl-0">({</span><br/><span class="hl-0"> </span><span class="hl-3">container:</span><span class="hl-0"> </span><span class="hl-3">mapContainer</span><span class="hl-0">,</span><br/><span class="hl-0">});</span>
61
- </code></pre>
62
- <p>By default, the map will be initialized with the style <a href="https://www.maptiler.com/maps/#style=streets-v2">streets-v2</a>.</p>
63
- <p>Depending on the framework and environment your are using for your application, you will have to also include the CSS file. </p>
64
- <p>For example, with a <a href="https://nextjs.org/">NextJS</a> app, this can take place at the top of the file <code>_app.ts/js</code>:</p>
65
- <pre><code class="language-ts"><span class="hl-1">import</span><span class="hl-0"> </span><span class="hl-4">&quot;@maptiler/sdk/dist/maptiler-sdk.css&quot;</span><span class="hl-0">;</span>
66
- </code></pre>
67
-
68
- <a href="#with-cdn" id="with-cdn" style="color: inherit; text-decoration: none;">
69
- <h2>With CDN</h2>
70
- </a>
71
- <p>The SDK hosted on our CDN is bundled as <em><a href="https://github.com/umdjs/umd">Universal Module Definition</a></em> (UMD) to make it standalone and containing all its dependencies. The CDN also serves the style sheet (css).</p>
72
- <p><strong>Recommended for:</strong> simple map intergration example and demos</p>
73
- <pre><code class="language-html"><span class="hl-8">&lt;</span><span class="hl-9">html</span><span class="hl-8">&gt;</span><br/><span class="hl-0"> </span><span class="hl-8">&lt;</span><span class="hl-9">head</span><span class="hl-8">&gt;</span><br/><span class="hl-0"> </span><span class="hl-8">&lt;</span><span class="hl-9">title</span><span class="hl-8">&gt;</span><span class="hl-0">MapTiler JS SDK example</span><span class="hl-8">&lt;/</span><span class="hl-9">title</span><span class="hl-8">&gt;</span><br/><span class="hl-0"> </span><span class="hl-8">&lt;</span><span class="hl-9">style</span><span class="hl-8">&gt;</span><br/><span class="hl-10"> </span><span class="hl-11">html</span><span class="hl-10">, </span><span class="hl-11">body</span><span class="hl-10"> {</span><br/><span class="hl-10"> </span><span class="hl-12">margin</span><span class="hl-10">: </span><span class="hl-13">0</span><span class="hl-10">;</span><br/><span class="hl-10"> }</span><br/><br/><span class="hl-10"> </span><span class="hl-11">#map-container</span><span class="hl-10"> {</span><br/><span class="hl-10"> </span><span class="hl-12">position</span><span class="hl-10">: </span><span class="hl-14">absolute</span><span class="hl-10">;</span><br/><span class="hl-10"> </span><span class="hl-12">width</span><span class="hl-10">: </span><span class="hl-13">100vw</span><span class="hl-10">;</span><br/><span class="hl-10"> </span><span class="hl-12">height</span><span class="hl-10">: </span><span class="hl-13">100vh</span><span class="hl-10">;</span><br/><span class="hl-10"> }</span><br/><span class="hl-10"> </span><span class="hl-8">&lt;/</span><span class="hl-9">style</span><span class="hl-8">&gt;</span><br/><br/><span class="hl-0"> </span><span class="hl-5">&lt;!-- Load the SDK CSS --&gt;</span><br/><span class="hl-0"> </span><span class="hl-8">&lt;</span><span class="hl-9">link</span><span class="hl-0"> </span><span class="hl-12">rel</span><span class="hl-0">=</span><span class="hl-15">&quot;stylesheet&quot;</span><span class="hl-0"> </span><span class="hl-12">href</span><span class="hl-0">=</span><span class="hl-15">&quot;dist/maptiler-sdk.css&quot;</span><span class="hl-8">&gt;</span><br/><span class="hl-0"> </span><span class="hl-8">&lt;/</span><span class="hl-9">head</span><span class="hl-8">&gt;</span><br/><br/><span class="hl-0"> </span><span class="hl-8">&lt;</span><span class="hl-9">body</span><span class="hl-8">&gt;</span><br/><span class="hl-0"> </span><span class="hl-8">&lt;</span><span class="hl-9">div</span><span class="hl-0"> </span><span class="hl-12">id</span><span class="hl-0">=</span><span class="hl-15">&quot;map-container&quot;</span><span class="hl-8">&gt;&lt;/</span><span class="hl-9">div</span><span class="hl-8">&gt;</span><br/><span class="hl-0"> </span><br/><span class="hl-0"> </span><span class="hl-8">&lt;</span><span class="hl-9">script</span><span class="hl-10"> </span><span class="hl-12">src</span><span class="hl-10"> =</span><span class="hl-15">&quot;dist/maptiler-sdk.umd.js&quot;</span><span class="hl-8">&gt;&lt;/</span><span class="hl-9">script</span><span class="hl-8">&gt;</span><br/><span class="hl-0"> </span><br/><span class="hl-0"> </span><span class="hl-8">&lt;</span><span class="hl-9">script</span><span class="hl-8">&gt;</span><br/><span class="hl-10"> </span><span class="hl-5">// Add your MapTiler Cloud API key to the config</span><br/><span class="hl-10"> </span><span class="hl-5">// (Go to https://cloud.maptiler.com/account/keys/ to get one for free!)</span><br/><span class="hl-10"> </span><span class="hl-3">maptilersdk</span><span class="hl-10">.</span><span class="hl-3">config</span><span class="hl-10">.</span><span class="hl-3">apiKey</span><span class="hl-10"> </span><span class="hl-0">=</span><span class="hl-10"> </span><span class="hl-4">&#39;YOUR_API_KEY&#39;</span><span class="hl-10">;</span><br/><br/><span class="hl-10"> </span><span class="hl-2">const</span><span class="hl-10"> </span><span class="hl-6">mapContainer</span><span class="hl-10"> </span><span class="hl-0">=</span><span class="hl-10"> </span><span class="hl-3">document</span><span class="hl-10">.</span><span class="hl-7">getElementById</span><span class="hl-10">(</span><span class="hl-4">&#39;my-container-div&#39;</span><span class="hl-10">);</span><br/><br/><span class="hl-10"> </span><span class="hl-2">const</span><span class="hl-10"> </span><span class="hl-6">map</span><span class="hl-10"> </span><span class="hl-0">=</span><span class="hl-10"> </span><span class="hl-2">new</span><span class="hl-10"> </span><span class="hl-3">maptilersdk</span><span class="hl-10">.</span><span class="hl-7">Map</span><span class="hl-10">({</span><br/><span class="hl-10"> </span><span class="hl-3">container:</span><span class="hl-10"> </span><span class="hl-3">mapContainer</span><span class="hl-10">,</span><br/><span class="hl-10"> </span><span class="hl-3">style:</span><span class="hl-10"> </span><span class="hl-3">maptilersdk</span><span class="hl-10">.</span><span class="hl-3">MapStyle</span><span class="hl-10">.</span><span class="hl-6">STREETS_DARK</span><span class="hl-10">,</span><br/><span class="hl-10"> </span><span class="hl-3">hash:</span><span class="hl-10"> </span><span class="hl-2">true</span><span class="hl-10">,</span><br/><span class="hl-10"> })</span><br/><span class="hl-10"> </span><span class="hl-8">&lt;/</span><span class="hl-9">script</span><span class="hl-8">&gt;</span><br/><span class="hl-0"> </span><span class="hl-8">&lt;/</span><span class="hl-9">body</span><span class="hl-8">&gt;</span><br/><span class="hl-8">&lt;/</span><span class="hl-9">html</span><span class="hl-8">&gt;</span>
74
- </code></pre>
75
- <p>Checkout the minimalist code samples in the <a href="demos">demos</a> directory.</p>
76
-
77
- <a href="#many-styles-to-choose-from" id="many-styles-to-choose-from" style="color: inherit; text-decoration: none;">
78
- <h1>Many styles to choose from</h1>
79
- </a>
80
- <p>MapTiler teams maintains a few styles that we have decided to expose from the SDK. This has two advantages:</p>
81
- <ul>
82
- <li>they are easier to remember, no need to type along style URL</li>
83
- <li>if we make an update to a style, you will benefit from it without modifying your codebase</li>
84
- </ul>
85
- <p>Here is how it works:</p>
86
- <pre><code class="language-ts"><span class="hl-1">import</span><span class="hl-0"> { </span><span class="hl-3">Map</span><span class="hl-0">, </span><span class="hl-3">MapStyle</span><span class="hl-0"> } </span><span class="hl-1">from</span><span class="hl-0"> </span><span class="hl-4">&#39;@maptiler/sdk&#39;</span><br/><br/><span class="hl-5">// When instanciating a map</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">map</span><span class="hl-0"> = </span><span class="hl-2">new</span><span class="hl-0"> </span><span class="hl-7">Map</span><span class="hl-0">({</span><br/><span class="hl-0"> </span><span class="hl-3">container:</span><span class="hl-0"> </span><span class="hl-3">document</span><span class="hl-0">.</span><span class="hl-7">getElementById</span><span class="hl-0">(</span><span class="hl-4">&quot;my-container-div&quot;</span><span class="hl-0">),</span><br/><span class="hl-0"> </span><span class="hl-3">style:</span><span class="hl-0"> </span><span class="hl-3">MapStyle</span><span class="hl-0">.</span><span class="hl-6">OUTDOOR</span><span class="hl-0">, </span><span class="hl-5">// &lt;-- the shorthand for the outdoor style</span><br/><span class="hl-0">});</span><br/><br/><span class="hl-5">// Or later on, updating the style</span><br/><span class="hl-3">map</span><span class="hl-0">.</span><span class="hl-7">setStyle</span><span class="hl-0">(</span><span class="hl-3">MapStyle</span><span class="hl-0">.</span><span class="hl-6">STREETS</span><span class="hl-0">.</span><span class="hl-6">DARK</span><span class="hl-0">);</span>
87
- </code></pre>
88
- <p>The styles with a shorthand provided by the SDK are the following:</p>
89
- <table>
90
- <thead>
91
- <tr>
92
- <th align="center">ID</th>
93
- <th align="center">Screenshot</th>
94
- <th align="center">Comment</th>
95
- </tr>
96
- </thead>
97
- <tbody><tr>
98
- <td align="center"><code>MapStyle.STREETS</code></td>
99
- <td align="center"><a href="https://www.maptiler.com/maps/#style=streets-v2&amp;mode=2d&amp;position=12.52/40.73676/-73.98418"><img src="images/screenshots/style-streets-v2.png" alt=""></a></td>
100
- <td align="center">The classic default style, perfect for urban areas.<p>Also available in <strong>dark</strong> and <strong>light</strong> mode.</p></td>
101
- </tr>
102
- <tr>
103
- <td align="center"><code>MapStyle.DATAVIZ.DARK</code></td>
104
- <td align="center"><a href="https://www.maptiler.com/maps/#style=dataviz-dark&amp;mode=2d&amp;position=2.01/38.7/-27.0"><img src="images/screenshots/style-dataviz-dark.png" alt=""></a></td>
105
- <td align="center">A minimalist style for data visualization.<p>Also available in <strong>color</strong> and <strong>light</strong> mode</p></td>
106
- </tr>
107
- <tr>
108
- <td align="center"><code>MapStyle.SATELLITE</code></td>
109
- <td align="center"><a href="https://www.maptiler.com/maps/#style=hybrid&amp;mode=2d&amp;position=7.87/24.518/-77.411"><img src="images/screenshots/style-satellite.png" alt=""></a></td>
110
- <td align="center">Only high resolution satellite raster tiles without any labels</td>
111
- </tr>
112
- <tr>
113
- <td align="center"><code>MapStyle.HYBRID</code></td>
114
- <td align="center"><a href="https://www.maptiler.com/maps/#style=hybrid&amp;mode=2d&amp;position=9.4/-26.175/122.6631"><img src="images/screenshots/style-hybrid.png" alt=""></a></td>
115
- <td align="center">Satellite tile with labels, landmarks, roads ways and political borders</td>
116
- </tr>
117
- <tr>
118
- <td align="center"><code>MapStyle.OUTDOOR</code></td>
119
- <td align="center"><a href="https://www.maptiler.com/maps/#style=outdoor&amp;mode=2d&amp;position=11.96/46.02591/7.7273"><img src="images/screenshots/style-outdoor.png" alt=""></a></td>
120
- <td align="center">A solid hiking companion, with peaks, parks, isolines and more</td>
121
- </tr>
122
- <tr>
123
- <td align="center"><code>MapStyle.BASIC</code></td>
124
- <td align="center"><a href="https://www.maptiler.com/maps/#style=basic-v2&amp;mode=2d&amp;position=13.09/37.78734/-122.42025"><img src="images/screenshots/style-basic-v2.png" alt=""></a></td>
125
- <td align="center">A minimalist alternative to <code>STREETS</code>, with a touch of flat design.<p>Also available in <strong>dark</strong> and <strong>light</strong> and <strong>pastel</strong> mode.</p></td>
126
- </tr>
127
- </tbody></table>
128
- <details>
129
- <summary>Know more about built-in map styles</summary>
130
-
131
- <p>MapTiler provides some <strong>reference styles</strong> as well as some <strong>variants</strong> for each. A <strong>reference syle</strong> 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 <strong>reference style</strong> offers a range of <strong>variants</strong> that contain the same level of information and has the same purpose but using different colors schemes.</p>
132
- <p>Here is the full list:</p>
133
- <ul>
134
- <li><code>MapStyle.STREETS</code>, reference style for navigation and city exploration<ul>
135
- <li><code>MapStyle.STREETS.DARK</code> (variant)</li>
136
- <li><code>MapStyle.STREETS.LIGHT</code> (variant)</li>
137
- <li><code>MapStyle.STREETS.PASTEL</code> (variant)</li>
138
- </ul>
139
- </li>
140
- <li><code>MapStyle.OUTDOOR</code> reference style for adventure</li>
141
- <li><code>MapStyle.WINTER</code> reference style for winter adventure</li>
142
- <li><code>MapStyle.SATELLITE</code> reference style satellite and airborne imagery (no variants)</li>
143
- <li><code>MapStyle.HYBRID</code> reference style satellite and airborne imagery with labels (no variants)</li>
144
- <li><code>MapStyle.BASIC</code> reference style for minimalist design and general purpose<ul>
145
- <li><code>MapStyle.BASIC.DARK</code> (variant)</li>
146
- <li><code>MapStyle.BASIC.LIGHT</code> (variant)</li>
147
- </ul>
148
- </li>
149
- <li><code>MapStyle.BRIGHT</code> reference style for high contrast navigation<ul>
150
- <li><code>MapStyle.BRIGHT.DARK</code> (variant)</li>
151
- <li><code>MapStyle.BRIGHT.LIGHT</code> (variant)</li>
152
- <li><code>MapStyle.BRIGHT.PASTEL</code> (variant)</li>
153
- </ul>
154
- </li>
155
- <li><code>MapStyle.TOPO</code> reference style for topographic study<ul>
156
- <li><code>MapStyle.TOPO.SHINY</code> (variant)</li>
157
- <li><code>MapStyle.TOPO.PASTEL</code> (variant)</li>
158
- <li><code>MapStyle.TOPO.TOPOGRAPHIQUE</code> (variant)</li>
159
- </ul>
160
- </li>
161
- <li><code>MapStyle.VOYAGER</code> reference style for stylish yet minimalist maps<ul>
162
- <li><code>MapStyle.VOYAGER.DARK</code> (variant)</li>
163
- <li><code>MapStyle.VOYAGER.LIGHT</code> (variant)</li>
164
- <li><code>MapStyle.VOYAGER.VINTAGE</code> (variant)</li>
165
- </ul>
166
- </li>
167
- <li><code>MapStyle.TONER</code> reference style for very high contrast stylish maps <ul>
168
- <li><code>MapStyle.TONER.BACKGROUND</code> (variant)</li>
169
- <li><code>MapStyle.TONER.LITE</code> (variant)</li>
170
- <li><code>MapStyle.TONER.LINES</code> (variant)</li>
171
- </ul>
172
- </li>
173
- <li><code>MapStyle.OPENSTREETMAP</code> (reference style, this one does not have any variants)</li>
174
- <li><code>MapStyle.DATAVIZ</code>, the perfect style for data visualization, with very little noise<ul>
175
- <li><code>MapStyle.DATAVIZ.DARK</code> (variant)</li>
176
- <li><code>MapStyle.DATAVIZ.LIGHT</code> (variant)</li>
177
- </ul>
178
- </li>
179
- </ul>
180
- <p>All reference styles (instances of <code>ReferenceMapStyle</code>) and style variants (instances of <code>MapStyleVariant</code>) have methods to know the alternative styles and variant that belong to the same reference style (<code>.getVariants()</code>). 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 <a href="docsmd/classes/ReferenceMapStyle.md">ReferenceMapStyle</a> and <a href="docsmd/classes/MapStyleVariant.md">MapStyleVariant</a>.</p>
181
- </details>
182
-
183
- <hr>
184
- <p>Still, you can still use some classic styles with just a <em>string</em> if you know their MapTiler CLoud ID:</p>
185
- <pre><code class="language-ts"><span class="hl-3">map</span><span class="hl-0">.</span><span class="hl-7">setStyle</span><span class="hl-0">(</span><span class="hl-4">&#39;outdoor-v2&#39;</span><span class="hl-0">);</span>
186
- </code></pre>
187
- <p>And finally, you can use your own custom styles designed with <a href="https://cloud.maptiler.com/maps/">our style editor</a>. Every custom style is given a unique ID, for instance: <code>c912ffc8-2360-487a-973b-59d037fb15b8</code>.</p>
188
- <p>This ID can be provided as such:</p>
189
- <pre><code class="language-ts"><span class="hl-3">map</span><span class="hl-0">.</span><span class="hl-7">setStyle</span><span class="hl-0">(</span><span class="hl-4">&quot;c912ffc8-2360-487a-973b-59d037fb15b8&quot;</span><span class="hl-0">);</span>
190
- </code></pre>
191
- <p>Or in its extended form:</p>
192
- <pre><code class="language-ts"><span class="hl-3">map</span><span class="hl-0">.</span><span class="hl-7">setStyle</span><span class="hl-0">(</span><span class="hl-4">&quot;https://api.maptiler.com/maps/c912ffc8-2360-487a-973b-59d037fb15b8/style.json&quot;</span><span class="hl-0">);</span><br/><span class="hl-5">// this could be suffixed with the API token as well</span>
193
- </code></pre>
194
- <p>And can even be provided in the URI form:</p>
195
- <pre><code class="language-ts"><span class="hl-3">map</span><span class="hl-0">.</span><span class="hl-7">setStyle</span><span class="hl-0">(</span><span class="hl-4">&quot;maptiler://c912ffc8-2360-487a-973b-59d037fb15b8&quot;</span><span class="hl-0">);</span>
196
- </code></pre>
197
-
198
- <a href="#centering-the-map-on-visitors" id="centering-the-map-on-visitors" style="color: inherit; text-decoration: none;">
199
- <h1>Centering the map on visitors</h1>
200
- </a>
201
- <p>It is sometimes handy to center map on the visitor&#39;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 <a href="#%EF%B8%8F%EF%B8%8F-geolocation">IP geolocation</a> API provided by <a href="https://docs.maptiler.com/cloud/api/geolocation/">MapTiler Cloud</a>, directly exposed as a single option of the <code>Map</code> constructor. There are two strategies:</p>
202
- <ol>
203
- <li><code>POINT</code>: centering the map on the actual visitor location, optionnaly using the <code>zoom</code> option (zoom level <code>13</code> 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.</li>
204
- <li><code>COUNTRY</code>: fitting the map view on the bounding box of the visitor&#39;s country. In this case, the <code>zoom</code> option, if provided, will be ignored</li>
205
- </ol>
206
- <p>Here is how the map gets centered on the visitor&#39;s location:</p>
207
- <pre><code class="language-js"><span class="hl-2">new</span><span class="hl-0"> </span><span class="hl-3">maptiler</span><span class="hl-0">.</span><span class="hl-7">Map</span><span class="hl-0">({</span><br/><span class="hl-0"> </span><span class="hl-5">// ... other options</span><br/><br/><span class="hl-0"> </span><span class="hl-3">geolocate:</span><span class="hl-0"> </span><span class="hl-3">maptiler</span><span class="hl-0">.</span><span class="hl-3">GeolocationType</span><span class="hl-0">.</span><span class="hl-6">POINT</span><br/><span class="hl-0">})</span>
208
- </code></pre>
209
- <p>Here is how the map fits the visitor&#39;s country bounds:</p>
210
- <pre><code class="language-js"><span class="hl-2">new</span><span class="hl-0"> </span><span class="hl-3">maptiler</span><span class="hl-0">.</span><span class="hl-7">Map</span><span class="hl-0">({</span><br/><span class="hl-0"> </span><span class="hl-5">// ... other options</span><br/><br/><span class="hl-0"> </span><span class="hl-3">geolocate:</span><span class="hl-0"> </span><span class="hl-3">maptiler</span><span class="hl-0">.</span><span class="hl-3">GeolocationType</span><span class="hl-0">.</span><span class="hl-6">COUNTRY</span><br/><span class="hl-0">})</span>
211
- </code></pre>
212
- <p>The <code>geolocation</code> options will not be taken into consideration in the following cases:</p>
213
- <ul>
214
- <li>if the <code>center</code> options is provided, then it prevails</li>
215
- <li>if the <code>hash</code> options is provided with the value <code>true</code> <strong>AND</strong> a location hash is already part of the URL. If <code>hash</code> is <code>true</code> but there is not yet a location hash in the URL, then the geolocation will work.</li>
216
- </ul>
217
- <blockquote>
218
- <p>📣 <em><strong>Note:</strong></em> if none of the options <code>center</code> or <code>hash</code> is provided to the <code>Map</code> constructor, then the map will be centered using the <code>POINT</code> strategy, unless the <code>geolocate</code> has the value <code>false</code>.</p>
219
- </blockquote>
220
- <blockquote>
221
- <p>📣 <em><strong>Note 2:</strong></em> the term <em>IP geolocation</em> refers to finding the physical location of a computer using its <em>IP address</em>. The <em>IP address</em> is a numerical identifier of a computer within a network, just like the phone number for a telephone. The <em>IP geolocation</em> is <strong>not</strong> 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 <code>14</code>.</p>
222
- </blockquote>
223
-
224
- <a href="#easy-to-add-controls" id="easy-to-add-controls" style="color: inherit; text-decoration: none;">
225
- <h1>Easy to add controls</h1>
226
- </a>
227
- <p>The term &quot;control&quot; 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 <code>[+]</code> and <code>[-]</code> 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 <code>Map</code> constructor options:</p>
228
- <ul>
229
- <li><code>navigationControl</code><ul>
230
- <li>Shows the <code>[+]</code>, <code>[-]</code> and tilt/bearing/compass buttons</li>
231
- <li>a boolean or a corner position. Showing on the top-right by default. Hidden if <code>false</code>.</li>
232
- </ul>
233
- </li>
234
- <li><code>geolocateControl</code><ul>
235
- <li>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)</li>
236
- <li>a boolean or a corner position. Showing on the top-right by default. Hidden if <code>false</code>.</li>
237
- </ul>
238
- </li>
239
- <li><code>terrainControl</code><ul>
240
- <li>Shows a button to enable/disable the 3D terrain (does not tilt the map)</li>
241
- <li>a boolean or a corner position. Hidden by default, showing on top-right if <code>true</code>.</li>
242
- </ul>
243
- </li>
244
- <li><code>scaleControl</code><ul>
245
- <li>Shows a distance scale. The unit (<code>&quot;metric&quot;</code>, <code>&quot;imperial&quot;</code> or <code>&quot;nautical&quot;</code>) can be set in the config object <code>config.unit</code> (default: <code>&quot;metric&quot;</code>)</li>
246
- <li>a boolean or a corner position. Hidden by default, showing on bottom-right if <code>true</code>.</li>
247
- </ul>
248
- </li>
249
- <li><code>fullscreenControl</code><ul>
250
- <li>Shows a button that toggles the map into fullscreen</li>
251
- <li>a boolean or a corner position. Hidden by default, showing on top-right if <code>true</code>.</li>
252
- </ul>
253
- </li>
254
- </ul>
255
- <p>The corner positions possible are:</p>
256
- <ul>
257
- <li><code>&quot;top-left&quot;</code></li>
258
- <li><code>&quot;top-right&quot;</code></li>
259
- <li><code>&quot;bottom-left&quot;</code></li>
260
- <li><code>&quot;bottom-right&quot;</code></li>
261
- </ul>
262
- <p><strong>Example:</strong> </p>
263
- <pre><code class="language-ts"><span class="hl-1">import</span><span class="hl-0"> { </span><span class="hl-3">Map</span><span class="hl-0"> } </span><span class="hl-1">from</span><span class="hl-0"> </span><span class="hl-4">&quot;@maptiler/sdk&quot;</span><span class="hl-0">;</span><br/><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">map</span><span class="hl-0"> = </span><span class="hl-2">new</span><span class="hl-0"> </span><span class="hl-7">Map</span><span class="hl-0">({</span><br/><span class="hl-0"> </span><span class="hl-3">container:</span><span class="hl-0"> </span><span class="hl-3">document</span><span class="hl-0">.</span><span class="hl-7">getElementById</span><span class="hl-0">(</span><span class="hl-4">&quot;my-container-div&quot;</span><span class="hl-0">),</span><br/><span class="hl-0"> </span><span class="hl-3">terrainControl:</span><span class="hl-0"> </span><span class="hl-2">false</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-3">scaleControl:</span><span class="hl-0"> </span><span class="hl-2">true</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-3">fullscreenControl:</span><span class="hl-0"> </span><span class="hl-4">&quot;top-left&quot;</span><span class="hl-0">,</span><br/><span class="hl-0">})</span>
264
- </code></pre>
265
-
266
- <a href="#3d-terrain-in-one-call" id="3d-terrain-in-one-call" style="color: inherit; text-decoration: none;">
267
- <h1>3D terrain in one call</h1>
268
- </a>
269
- <p align="center">
270
- <img src="images/screenshots/grandcanyon.gif" width="48%"></img>
271
- <img src="images/screenshots/alps.gif" width="48%"></img>
272
- </p>
273
-
274
-
275
- <p>You want to enable 3D terrain? That&#39;s easy now with a single function call:</p>
276
- <pre><code class="language-ts"><span class="hl-5">// With the default exaggeration factor of 1</span><br/><span class="hl-3">map</span><span class="hl-0">.</span><span class="hl-7">enableTerrain</span><span class="hl-0">();</span><br/><br/><span class="hl-5">// Or, if you want to boost some volume a little</span><br/><span class="hl-3">map</span><span class="hl-0">.</span><span class="hl-7">enableTerrain</span><span class="hl-0">(</span><span class="hl-13">1.5</span><span class="hl-0">);</span>
277
- </code></pre>
278
- <p>The terrain can also be enabled directly from the <code>Map</code> constructor, with the options <code>terrain</code> (a boolean, <code>false</code> by default) and <code>terrainExaggeration</code> (a number, <code>1</code> by default):</p>
279
- <pre><code class="language-ts"><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">map</span><span class="hl-0"> = </span><span class="hl-2">new</span><span class="hl-0"> </span><span class="hl-7">Map</span><span class="hl-0">({</span><br/><span class="hl-0"> </span><span class="hl-5">// some options...</span><br/><span class="hl-0"> </span><span class="hl-3">terrain:</span><span class="hl-0"> </span><span class="hl-2">true</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-3">terrainExaggeration:</span><span class="hl-0"> </span><span class="hl-13">1.5</span><span class="hl-0">,</span><br/><span class="hl-0">})</span>
280
- </code></pre>
281
- <p>At any point, you can modify the exaggeration factor:</p>
282
- <pre><code class="language-ts"><span class="hl-3">map</span><span class="hl-0">.</span><span class="hl-7">setTerrainExaggeration</span><span class="hl-0">(</span><span class="hl-13">2</span><span class="hl-0">);</span>
283
- </code></pre>
284
- <p>Or simply disable it:</p>
285
- <pre><code class="language-ts"><span class="hl-3">map</span><span class="hl-0">.</span><span class="hl-7">disableTerrain</span><span class="hl-0">()</span>
286
- </code></pre>
287
- <blockquote>
288
- <p>📣 <em><strong>Note:</strong></em> Keep in mind that setting an exaggeration factor at <code>0</code> will result in a the same result as disabling the elevation but that terrain RGB tiles will still be fetched in the background.</p>
289
- </blockquote>
290
- <blockquote>
291
- <p>📣 <em><strong>Note 2:</strong></em> please be aware that due to the volume and elevation of the map floor in 3D space, the navigation with the terrain enabled is slightly different than without.</p>
292
- </blockquote>
293
-
294
- <a href="#easy-language-switching" id="easy-language-switching" style="color: inherit; text-decoration: none;">
295
- <h1>Easy language switching</h1>
296
- </a>
297
- <p>The language generally depends on the style but we made it possible to easily update it with a single function and from a built-in list of languages:</p>
298
- <pre><code class="language-ts"><span class="hl-3">map</span><span class="hl-0">.</span><span class="hl-7">setLanguage</span><span class="hl-0">(</span><span class="hl-3">maptilersdk</span><span class="hl-0">.</span><span class="hl-3">Language</span><span class="hl-0">.</span><span class="hl-6">ENGLISH</span><span class="hl-0">);</span>
299
- </code></pre>
300
- <p>The list of supported languages is built-in and can be found <a href="src/language.ts">here</a>. In addition, there are spacial language <em>flags</em>:</p>
301
- <ul>
302
- <li><code>maptilersdk.Language.AUTO</code> <strong>[DEFAULT]</strong> uses the language defined in the web browser</li>
303
- <li><code>maptilersdk.Language.LOCAL</code> uses the language local to each country</li>
304
- <li><code>maptilersdk.Language.LATIN</code> uses a default with latin characters</li>
305
- <li><code>maptilersdk.Language.NON_LATIN</code> uses a default with non-latin characters</li>
306
- </ul>
307
- <p>Whenever a label is not supported in the defined language, it falls back to <code>maptilersdk.Language.LATIN</code>.</p>
308
- <p>Here is a sample of some compatible languages:
309
- <img src="images/screenshots/multilang.gif" alt=""></p>
310
-
311
- <a href="#built-in-support-for-right-to-left-languages" id="built-in-support-for-right-to-left-languages" style="color: inherit; text-decoration: none;">
312
- <h1>Built-in support for right-to-left languages</h1>
313
- </a>
314
- <p>Languages that are written right-to-left such as arabic and hebrew are fully supported by default. No need to install any plugin!</p>
315
- <p align="center">
316
- <img src="images/screenshots/lang-arabic.png" width="48%"></img>
317
- <img src="images/screenshots/lang-hebrew.png" width="48%"></img>
318
- </p>
319
-
320
-
321
- <a href="#easy-access-to-maptiler-cloud-api" id="easy-access-to-maptiler-cloud-api" style="color: inherit; text-decoration: none;">
322
- <h1>Easy access to MapTiler Cloud API</h1>
323
- </a>
324
- <p>Our map SDK is not only about maps! We also provide plenty of wrapper to our API calls!</p>
325
- <blockquote>
326
- <p>📣 <em><strong>Note:</strong></em> If you need <ins>only the API Client library</ins> to use in a headless fashion and without any map display, check out out <a href="https://docs.maptiler.com/client-js/">API Client library</a> for browser and NodeJS. It&#39;s exactely what is down below and only that, in a minimalistic <a href="https://github.com/maptiler/maptiler-client-js">TypeScript package</a> 🐙.</p>
327
- </blockquote>
328
-
329
- <a href="#🔍-geocoding" id="🔍-geocoding" style="color: inherit; text-decoration: none;">
330
- <h2>🔍 Geocoding</h2>
331
- </a>
332
- <blockquote>
333
- <p>✅ Please, use geocoding functions only from client-side (browser) and do not 🚫 <strong>store</strong> or <strong>redistribute</strong> MapTiler Cloud API data. In case of doubt, consult the <a href="https://www.maptiler.com/cloud/terms/#explicitly-prohibited-use">terms</a> ⚖️</p>
334
- </blockquote>
335
-
336
- <a href="#forward" id="forward" style="color: inherit; text-decoration: none;">
337
- <h3>Forward</h3>
338
- </a>
339
- <p>You want to know the longitude and latitude of a specific place, use the forward geocoding:</p>
340
- <pre><code class="language-ts"><span class="hl-5">// in an async function, or as a &#39;thenable&#39;:</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">result</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">geocoding</span><span class="hl-0">.</span><span class="hl-7">forward</span><span class="hl-0">(</span><span class="hl-4">&#39;paris&#39;</span><span class="hl-0">);</span>
341
- </code></pre>
342
- <p>You can provide some options such as:</p>
343
- <ul>
344
- <li>the proximity, given a lon-lat position, to sort the results</li>
345
- <li>one of more languages to get the results into</li>
346
- <li>a bounding geo box, to restrict the search to a given window</li>
347
- </ul>
348
- <p>Read more about forward geocoding on our <a href="https://docs.maptiler.com/client-js/geocoding/#forward">official documentation</a>.</p>
349
-
350
- <a href="#reverse" id="reverse" style="color: inherit; text-decoration: none;">
351
- <h3>Reverse</h3>
352
- </a>
353
- <p>You wan to tknow the name of a place, given a longitude-latitude? Use the reverse geocoding:</p>
354
- <pre><code class="language-ts"><span class="hl-5">// in an async function, or as a &#39;thenable&#39;:</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">result</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">geocoding</span><span class="hl-0">.</span><span class="hl-7">reverse</span><span class="hl-0">([</span><span class="hl-13">6.249638</span><span class="hl-0">, </span><span class="hl-13">46.402056</span><span class="hl-0">]);</span>
355
- </code></pre>
356
- <p>The same option object as the forward geocoding can be provided.</p>
357
- <p>Read more about reverse geocoding on our <a href="https://docs.maptiler.com/client-js/geocoding/#reverse">official documentation</a>.</p>
358
-
359
- <a href="#language" id="language" style="color: inherit; text-decoration: none;">
360
- <h3>Language</h3>
361
- </a>
362
- <p>For both <em>forward</em> and <em>reverse</em> geocoding, this library provides a list of supported languages as shorthands to <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO language codes</a>. The result will be provided in multiple languages if the <code>language</code> options is an array:</p>
363
- <pre><code class="language-ts"><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">result</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">geocoding</span><span class="hl-0">.</span><span class="hl-7">forward</span><span class="hl-0">(</span><span class="hl-4">&#39;paris&#39;</span><span class="hl-0">, {</span><span class="hl-3">language:</span><span class="hl-0"> [</span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">geocoding</span><span class="hl-0">.</span><span class="hl-3">languages</span><span class="hl-0">.</span><span class="hl-6">SPANISH</span><span class="hl-0">, </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">geocoding</span><span class="hl-0">.</span><span class="hl-3">languages</span><span class="hl-0">.</span><span class="hl-6">KOREAN</span><span class="hl-0">]})</span>
364
- </code></pre>
365
- <p>The special language <code>AUTO</code> will detect the platform/browser preferred language.</p>
366
-
367
- <a href="#🕵️♂️-geolocation" id="🕵️♂️-geolocation" style="color: inherit; text-decoration: none;">
368
- <h2>🕵️‍♂️ Geolocation</h2>
369
- </a>
370
- <p>The geolocation service provides location informations of a visitor using its IP address.</p>
371
- <p>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.</p>
372
- <p>There is only a single function:</p>
373
- <pre><code class="language-ts"><span class="hl-5">// in an async function, or as a &#39;thenable&#39;:</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">result</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">geolocation</span><span class="hl-0">.</span><span class="hl-7">info</span><span class="hl-0">();</span>
374
- </code></pre>
375
- <p>Read more about geolocation on our <a href="https://docs.maptiler.com/client-js/geolocation/">official documentation</a>.</p>
376
-
377
- <a href="#🌐-coordinates" id="🌐-coordinates" style="color: inherit; text-decoration: none;">
378
- <h2>🌐 Coordinates</h2>
379
- </a>
380
- <p>If you are already familiar with <a href="https://epsg.io/">epsg.io</a> (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!</p>
381
-
382
- <a href="#search" id="search" style="color: inherit; text-decoration: none;">
383
- <h3>Search</h3>
384
- </a>
385
- <p>The <code>search</code> lets you perform a query in a free form fashion. Here are some examples:</p>
386
- <pre><code class="language-ts"><span class="hl-5">// in an async function, or as a &#39;thenable&#39;:</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">resultA</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">coordinates</span><span class="hl-0">.</span><span class="hl-7">search</span><span class="hl-0">(</span><span class="hl-4">&#39;mercator&#39;</span><span class="hl-0">);</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">resultB</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">coordinates</span><span class="hl-0">.</span><span class="hl-7">search</span><span class="hl-0">(</span><span class="hl-4">&#39;plate carree&#39;</span><span class="hl-0">);</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">resultC</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">coordinates</span><span class="hl-0">.</span><span class="hl-7">search</span><span class="hl-0">(</span><span class="hl-4">&#39;france&#39;</span><span class="hl-0">);</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">resultD</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">coordinates</span><span class="hl-0">.</span><span class="hl-7">search</span><span class="hl-0">(</span><span class="hl-4">&#39;code:4326&#39;</span><span class="hl-0">, {</span><span class="hl-3">transformations:</span><span class="hl-0"> </span><span class="hl-2">true</span><span class="hl-0">}));</span>
387
- </code></pre>
388
- <p>The <code>transformations</code> options retrieves a lot more details about the CRS that MapTiler API is able to transform to/from than just their IDs.</p>
389
- <p>Read more about searching coordinate systems on our <a href="https://docs.maptiler.com/client-js/coordinates/#search">official documentation</a>.</p>
390
-
391
- <a href="#transform" id="transform" style="color: inherit; text-decoration: none;">
392
- <h3>Transform</h3>
393
- </a>
394
- <p>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 <a href="https://epsg.io/4326">WGS84</a>.</p>
395
- <p>If not provided, both the source (<code>sourceCrs</code>) and the destination (<code>targetCrs</code>) are default to <strong>EPSG:4326</strong> (in other words, <a href="https://epsg.io/4326">WGS84</a>). Here is how to use this feature:</p>
396
- <pre><code class="language-ts"><span class="hl-5">// in an async function, or as a &#39;thenable&#39;:</span><br/><br/><span class="hl-5">// Providing one coordinate to transform, with a target CRS being EPSG:9793 (RGF93 v2 / Lambert-93, France official CRS)</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">resultA</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">coordinates</span><span class="hl-0">.</span><span class="hl-7">transform</span><span class="hl-0">([</span><span class="hl-13">1</span><span class="hl-0">, </span><span class="hl-13">45</span><span class="hl-0">], {</span><span class="hl-3">targetCrs:</span><span class="hl-0"> </span><span class="hl-13">9793</span><span class="hl-0">})</span><br/><br/><span class="hl-5">// Using the same logic, we can pass up to 50 coordinates to be transformed</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">resultB</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">coordinates</span><span class="hl-0">.</span><span class="hl-7">transform</span><span class="hl-0">([[</span><span class="hl-13">10</span><span class="hl-0">, </span><span class="hl-13">48</span><span class="hl-0">], [</span><span class="hl-13">1</span><span class="hl-0">, </span><span class="hl-13">45</span><span class="hl-0">]], {</span><span class="hl-3">targetCrs:</span><span class="hl-0"> </span><span class="hl-13">9793</span><span class="hl-0">})</span>
397
- </code></pre>
398
- <p>Read more about transforming coordinates on our <a href="https://docs.maptiler.com/client-js/coordinates/#transform">official documentation</a>.</p>
399
-
400
- <a href="#💽-data" id="💽-data" style="color: inherit; text-decoration: none;">
401
- <h2>💽 Data</h2>
402
- </a>
403
- <p>MapTiler Cloud give its users the possibility to <a href="https://cloud.maptiler.com/data/">upload and create data</a>, 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:</p>
404
- <pre><code class="language-ts"><span class="hl-5">// in an async function, or as a &#39;thenable&#39;:</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">result</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">data</span><span class="hl-0">.</span><span class="hl-7">get</span><span class="hl-0">(</span><span class="hl-4">&#39;my-dataset-unique-id&#39;</span><span class="hl-0">)</span>
405
- </code></pre>
406
- <p>Since the result is a GeoJSON, it can easily be added to a <code>map</code> with <code>.addSource()</code> and <code>.addLayer()</code>.</p>
407
- <p>Read more about fetching your own data on our <a href="https://docs.maptiler.com/client-js/data/">official documentation</a>.</p>
408
-
409
- <a href="#🗺️-static-maps" id="🗺️-static-maps" style="color: inherit; text-decoration: none;">
410
- <h2>🗺️ Static maps</h2>
411
- </a>
412
- <blockquote>
413
- <p>✅ Please, use static maps URLs only from client side <code>&lt;img&gt;</code> elements, and do not 🚫 store or redistribute the static map files. In case of doubt, consult the <a href="https://www.maptiler.com/cloud/terms/#explicitly-prohibited-use">terms</a> ⚖️</p>
414
- </blockquote>
415
- <p>Maptiler Cloud provides many possibilities for creating static maps as PNG, JPEG or WebP images. They all offer the possibilities to:</p>
416
- <ul>
417
- <li>Choose from one of the MapTiler style or your own</li>
418
- <li>Add markers with a custom icon (or default icon with custom color)</li>
419
- <li>Add path or polygon, with a parametric line width and color and a parametric filling color</li>
420
- </ul>
421
- <p>Three modes are available: <code>centered</code>, <code>bounded</code> and <code>automatic</code>.</p>
422
- <blockquote>
423
- <p>📣 <em><strong>important:</strong></em> <span style="text-decoration: underline">only image <strong>URLs</strong> are returned.</span><br>Contrary to the other functions of this library, the static map functions <strong>do not</strong> perform any query to MapTiler Cloud API, instead they build the image URL for you to use in <code>&lt;img&gt;</code> elements.</p>
424
- </blockquote>
425
-
426
- <a href="#map-styles" id="map-styles" style="color: inherit; text-decoration: none;">
427
- <h3>Map Styles</h3>
428
- </a>
429
- <p>In the following static map functions, the <code>option</code> object features a <code>style</code> property that can be a string or one of the built-in style shorthand. Here is the full list:</p>
430
- <ul>
431
- <li><code>MapStyle.STREETS</code>, reference style for navigation and city exploration<ul>
432
- <li><code>MapStyle.STREETS.DARK</code> (variant)</li>
433
- <li><code>MapStyle.STREETS.LIGHT</code> (variant)</li>
434
- <li><code>MapStyle.STREETS.PASTEL</code> (variant)</li>
435
- </ul>
436
- </li>
437
- <li><code>MapStyle.OUTDOOR</code> reference style for adventure</li>
438
- <li><code>MapStyle.WINTER</code> reference style for winter adventure</li>
439
- <li><code>MapStyle.SATELLITE</code> reference style satellite and airborne imagery (no variants)</li>
440
- <li><code>MapStyle.HYBRID</code> reference style satellite and airborne imagery with labels (no variants)</li>
441
- <li><code>MapStyle.BASIC</code> reference style for minimalist design and general purpose<ul>
442
- <li><code>MapStyle.BASIC.DARK</code> (variant)</li>
443
- <li><code>MapStyle.BASIC.LIGHT</code> (variant)</li>
444
- </ul>
445
- </li>
446
- <li><code>MapStyle.BRIGHT</code> reference style for high contrast navigation<ul>
447
- <li><code>MapStyle.BRIGHT.DARK</code> (variant)</li>
448
- <li><code>MapStyle.BRIGHT.LIGHT</code> (variant)</li>
449
- <li><code>MapStyle.BRIGHT.PASTEL</code> (variant)</li>
450
- </ul>
451
- </li>
452
- <li><code>MapStyle.TOPO</code> reference style for topographic study<ul>
453
- <li><code>MapStyle.TOPO.SHINY</code> (variant)</li>
454
- <li><code>MapStyle.TOPO.PASTEL</code> (variant)</li>
455
- <li><code>MapStyle.TOPO.TOPOGRAPHIQUE</code> (variant)</li>
456
- </ul>
457
- </li>
458
- <li><code>MapStyle.VOYAGER</code> reference style for stylish yet minimalist maps<ul>
459
- <li><code>MapStyle.VOYAGER.DARK</code> (variant)</li>
460
- <li><code>MapStyle.VOYAGER.LIGHT</code> (variant)</li>
461
- <li><code>MapStyle.VOYAGER.VINTAGE</code> (variant)</li>
462
- </ul>
463
- </li>
464
- <li><code>MapStyle.TONER</code> reference style for very high contrast stylish maps <ul>
465
- <li><code>MapStyle.TONER.BACKGROUND</code> (variant)</li>
466
- <li><code>MapStyle.TONER.LITE</code> (variant)</li>
467
- <li><code>MapStyle.TONER.LINES</code> (variant)</li>
468
- </ul>
469
- </li>
470
- <li><code>MapStyle.OPENSTREETMAP</code> (reference style, this one does not have any variants)</li>
471
- <li><code>MapStyle.STAGE</code>, the perfect style for data visualization, with very little noise<ul>
472
- <li><code>MapStyle.STAGE.DARK</code> (variant)</li>
473
- <li><code>MapStyle.STAGE.LIGHT</code> (variant)</li>
474
- </ul>
475
- </li>
476
- </ul>
477
-
478
- <a href="#centered-static-maps" id="centered-static-maps" style="color: inherit; text-decoration: none;">
479
- <h3>Centered static maps</h3>
480
- </a>
481
- <p>This type of map is centered on a longitude-latitude coordinate and the zoom level must also be provided (from <code>0</code>: very zoomed out, to <code>22</code>: very zoomed in).<br>Note that if a path or markers are provided, the framing of the map will not automatically adapt to include those (use the <code>automatic</code> mode for that).</p>
482
- <pre><code class="language-ts"><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">imageLink</span><span class="hl-0"> = </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">staticMaps</span><span class="hl-0">.</span><span class="hl-7">centered</span><span class="hl-0">(</span><br/><span class="hl-0"> </span><span class="hl-5">// center position (Boston)</span><br/><span class="hl-0"> [-</span><span class="hl-13">71.06080</span><span class="hl-0">, </span><span class="hl-13">42.362114</span><span class="hl-0">], </span><br/><br/><span class="hl-0"> </span><span class="hl-5">// zoom level</span><br/><span class="hl-0"> </span><span class="hl-13">12.5</span><span class="hl-0">, </span><br/><span class="hl-0"> </span><br/><span class="hl-0"> </span><span class="hl-5">// Options</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-5">// Request a hiDPI/Retina image</span><br/><span class="hl-0"> </span><span class="hl-3">hiDPI:</span><span class="hl-0"> </span><span class="hl-2">true</span><span class="hl-0">,</span><br/><br/><span class="hl-0"> </span><span class="hl-5">// Output image size</span><br/><span class="hl-0"> </span><span class="hl-3">width:</span><span class="hl-0"> </span><span class="hl-13">1000</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-3">height:</span><span class="hl-0"> </span><span class="hl-13">1000</span><span class="hl-0">,</span><br/><br/><span class="hl-0"> </span><span class="hl-5">// Map style</span><br/><span class="hl-0"> </span><span class="hl-3">style:</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">MapStyle</span><span class="hl-0">.</span><span class="hl-6">OUTDOOR</span><span class="hl-0">,</span><br/><span class="hl-0"> });</span>
483
- </code></pre>
484
- <p>Read more about centered static maps on our official <a href="https://docs.maptiler.com/cloud/api/static-maps/#center-based-image">API documentation</a>.</p>
485
-
486
- <a href="#bounded-static-maps" id="bounded-static-maps" style="color: inherit; text-decoration: none;">
487
- <h3>Bounded static maps</h3>
488
- </a>
489
- <p>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.</p>
490
- <pre><code class="language-ts"><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">imageLink</span><span class="hl-0"> = </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">staticMaps</span><span class="hl-0">.</span><span class="hl-7">bounded</span><span class="hl-0">(</span><br/><span class="hl-0"> </span><span class="hl-5">// The bounding box on Europe</span><br/><span class="hl-0"> [</span><br/><span class="hl-0"> -</span><span class="hl-13">24</span><span class="hl-0">, </span><span class="hl-5">// west bound (min x)</span><br/><span class="hl-0"> </span><span class="hl-13">34.5</span><span class="hl-0">, </span><span class="hl-5">// south bound (min y)</span><br/><span class="hl-0"> </span><span class="hl-13">32</span><span class="hl-0">, </span><span class="hl-5">// east bound (max x)</span><br/><span class="hl-0"> </span><span class="hl-13">71</span><span class="hl-0">, </span><span class="hl-5">// north bound (max y)</span><br/><span class="hl-0"> ],</span><br/><br/><span class="hl-0"> </span><span class="hl-5">// Options</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-3">hiDPI:</span><span class="hl-0"> </span><span class="hl-2">true</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-3">width:</span><span class="hl-0"> </span><span class="hl-13">2048</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-3">height:</span><span class="hl-0"> </span><span class="hl-13">2048</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-3">style:</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">MapStyle</span><span class="hl-0">.</span><span class="hl-6">STREETS</span><span class="hl-0">.</span><span class="hl-6">DARK</span><span class="hl-0">,</span><br/><br/><span class="hl-0"> </span><span class="hl-5">// Extra space that will add around the bounding box, in percentage</span><br/><span class="hl-0"> </span><span class="hl-5">// (0.1 = 10% is actually the dafault)</span><br/><span class="hl-0"> </span><span class="hl-3">padding:</span><span class="hl-0"> </span><span class="hl-13">0.1</span><br/><span class="hl-0"> });</span>
491
- </code></pre>
492
- <p>Since the zoom level cannot be provided, the level of details is dictated by the size of the output image. here is an example:</p>
493
- <table>
494
- <thead>
495
- <tr>
496
- <th align="center"><code>2048 x 2048</code></th>
497
- <th align="center"><code>1024 x 1024</code></th>
498
- </tr>
499
- </thead>
500
- <tbody><tr>
501
- <td align="center"><img src="images/screenshots/static-bounded-europe-2048.png" alt=""></td>
502
- <td align="center"><img src="images/screenshots/static-bounded-europe-1024.png" alt=""></td>
503
- </tr>
504
- </tbody></table>
505
- <p>As you may notice, the geo bounding box could have very different proportions than the output image size. In the following example, we place the very same bounding box around Portugal, which has a this particular strip looking shape. We also add a <code>path</code> that repeats exactly the same bounding box to show the difference between the provided bounding box and the final image. We kept the default padding of 10%:</p>
506
- <table>
507
- <thead>
508
- <tr>
509
- <th align="center"><code>2048 x 2048</code></th>
510
- <th align="center"><code>1024 x 2048</code></th>
511
- </tr>
512
- </thead>
513
- <tbody><tr>
514
- <td align="center"><img src="images/screenshots/static-bounded-portugal-2048x2048.png" alt=""></td>
515
- <td align="center"><img src="images/screenshots/static-bounded-portugal-1024x2048.png" alt=""></td>
516
- </tr>
517
- </tbody></table>
518
- <p>Read more about bounded static maps on our official <a href="https://docs.maptiler.com/cloud/api/static-maps/#bounds-based-image">API documentation</a>.</p>
519
-
520
- <a href="#automatic-static-maps" id="automatic-static-maps" style="color: inherit; text-decoration: none;">
521
- <h3>Automatic static maps</h3>
522
- </a>
523
- <p>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.</p>
524
- <p>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:</p>
525
- <pre><code class="language-ts"><span class="hl-5">// Fetching the GeoJSON</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">bikeTrack</span><span class="hl-0"> = </span><span class="hl-1">await</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">data</span><span class="hl-0">.</span><span class="hl-7">get</span><span class="hl-0">(</span><span class="hl-4">&#39;the-id-of-a-bike-track-in-montreal&#39;</span><span class="hl-0">);</span><br/><br/><span class="hl-5">// Extracting the track points with the shape [[lng, lat], [lng, lat], ...]</span><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">trackPoints</span><span class="hl-0"> = </span><span class="hl-3">bikeTrack</span><span class="hl-0">.</span><span class="hl-3">features</span><span class="hl-0">[</span><span class="hl-13">0</span><span class="hl-0">].</span><span class="hl-3">geometry</span><span class="hl-0">.</span><span class="hl-3">coordinates</span><span class="hl-0">[</span><span class="hl-13">0</span><span class="hl-0">]</span><br/><span class="hl-0"> .</span><span class="hl-7">map</span><span class="hl-0">(</span><span class="hl-3">p</span><span class="hl-0"> </span><span class="hl-2">=&gt;</span><span class="hl-0"> </span><span class="hl-3">p</span><span class="hl-0">.</span><span class="hl-7">slice</span><span class="hl-0">(</span><span class="hl-13">0</span><span class="hl-0">, </span><span class="hl-13">2</span><span class="hl-0">));</span><br/><br/><span class="hl-2">const</span><span class="hl-0"> </span><span class="hl-6">imageLink</span><span class="hl-0"> = </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">staticMaps</span><span class="hl-0">.</span><span class="hl-7">automatic</span><span class="hl-0">({</span><br/><span class="hl-0"> </span><span class="hl-5">// hiDPI/Retina precision</span><br/><span class="hl-0"> </span><span class="hl-3">hiDPI:</span><span class="hl-0"> </span><span class="hl-2">true</span><span class="hl-0">,</span><br/><br/><span class="hl-0"> </span><span class="hl-5">// A fairly large output image</span><br/><span class="hl-0"> </span><span class="hl-3">width:</span><span class="hl-0"> </span><span class="hl-13">2048</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-3">height:</span><span class="hl-0"> </span><span class="hl-13">1024</span><span class="hl-0"> ,</span><br/><br/><span class="hl-0"> </span><span class="hl-5">// A grey style on which the track will pop!</span><br/><span class="hl-0"> </span><span class="hl-3">style:</span><span class="hl-0"> </span><span class="hl-3">maptilerClient</span><span class="hl-0">.</span><span class="hl-3">MapStyle</span><span class="hl-0">.</span><span class="hl-6">STREETS</span><span class="hl-0">.</span><span class="hl-6">LIGHT</span><span class="hl-0">,</span><br/><br/><span class="hl-0"> </span><span class="hl-5">// Draw a path with the trackpoints</span><br/><span class="hl-0"> </span><span class="hl-3">path:</span><span class="hl-0"> </span><span class="hl-3">trackPoints</span><span class="hl-0">,</span><br/><br/><span class="hl-0"> </span><span class="hl-5">// Adding a marker for the starting point, with a custom color (array of shape [lng, lat, color])</span><br/><span class="hl-0"> </span><span class="hl-3">marker:</span><span class="hl-0"> [</span><span class="hl-3">trackPoints</span><span class="hl-0">[</span><span class="hl-13">0</span><span class="hl-0">][</span><span class="hl-13">0</span><span class="hl-0">], </span><span class="hl-3">trackPoints</span><span class="hl-0">[</span><span class="hl-13">0</span><span class="hl-0">][</span><span class="hl-13">1</span><span class="hl-0">], </span><span class="hl-4">&#39;#0a0&#39;</span><span class="hl-0">],</span><br/><br/><span class="hl-0"> </span><span class="hl-5">// Showing the track in red</span><br/><span class="hl-0"> </span><span class="hl-3">pathStrokeColor:</span><span class="hl-0"> </span><span class="hl-4">&#39;red&#39;</span><span class="hl-0">,</span><br/><span class="hl-0">});</span>
526
- </code></pre>
527
- <p>And voila!</p>
528
- <p><img src="images/screenshots/static-with-path.png" alt="static map with bike path"></p>
529
- <blockquote>
530
- <p>📣 <em><strong>Note:</strong></em> The GeoJSON for this track contains 9380 couples of coordinates, which is a lot! In order to send the track to MapTiler Cloud static maps API, the client simplifies the long paths while keeping a high degree of precision using a very fast <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm">Ramer-Douglas-Peucker algorithm</a>.</p>
531
- </blockquote>
532
- <p>Read more about bounded static maps on our official <a href="https://docs.maptiler.com/cloud/api/static-maps/#auto-fitted-image">API documentation</a>.</p>
533
- </div></div>
534
- <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
535
- <div class="tsd-navigation settings">
536
- <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
537
- <h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
538
- <div class="tsd-accordion-details">
539
- <div class="tsd-filter-visibility">
540
- <h4 class="uppercase">Member Visibility</h4><form>
541
- <ul id="tsd-filter-options">
542
- <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></form></div>
543
- <div class="tsd-theme-toggle">
544
- <h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
545
- <nav class="tsd-navigation primary">
546
- <details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
547
- <h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
548
- <div class="tsd-accordion-details">
549
- <ul>
550
- <li class="current selected"><a href="modules.html">Map<wbr/>Tiler SDK -<wbr/> v1.0.0</a>
551
- <ul></ul></li></ul></div></details></nav>
552
- <nav class="tsd-navigation secondary menu-sticky">
553
- <ul>
554
- <li class="tsd-kind-class"><a href="classes/Map.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg>Map</a></li>
555
- <li class="tsd-kind-class"><a href="classes/Point.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Point</a></li>
556
- <li class="tsd-kind-class"><a href="classes/SdkConfig.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Sdk<wbr/>Config</a></li>
557
- <li class="tsd-kind-type-alias"><a href="types/LanguageKey.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-4194304-path"></rect><path d="M11.31 16V8.224H8.91V7.24H14.79V8.224H12.39V16H11.31Z" fill="var(--color-text)" id="icon-4194304-text"></path></svg>Language<wbr/>Key</a></li>
558
- <li class="tsd-kind-type-alias"><a href="types/LanguageString.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg>Language<wbr/>String</a></li>
559
- <li class="tsd-kind-type-alias"><a href="types/MapOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg>Map<wbr/>Options</a></li>
560
- <li class="tsd-kind-type-alias"><a href="types/Matrix2.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg>Matrix2</a></li>
561
- <li class="tsd-kind-type-alias"><a href="types/Unit.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg>Unit</a></li>
562
- <li class="tsd-kind-variable"><a href="variables/AJAXError.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-variable)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-32-path"></rect><path d="M11.106 16L8.85 7.24H9.966L11.454 13.192C11.558 13.608 11.646 13.996 11.718 14.356C11.79 14.708 11.842 14.976 11.874 15.16C11.906 14.976 11.954 14.708 12.018 14.356C12.09 13.996 12.178 13.608 12.282 13.192L13.758 7.24H14.85L12.582 16H11.106Z" fill="var(--color-text)" id="icon-32-text"></path></svg>AJAXError</a></li>
563
- <li class="tsd-kind-variable"><a href="variables/AttributionControl.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Attribution<wbr/>Control</a></li>
564
- <li class="tsd-kind-variable"><a href="variables/CanvasSource.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Canvas<wbr/>Source</a></li>
565
- <li class="tsd-kind-variable"><a href="variables/Evented.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Evented</a></li>
566
- <li class="tsd-kind-variable"><a href="variables/FullscreenControl.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Fullscreen<wbr/>Control</a></li>
567
- <li class="tsd-kind-variable"><a href="variables/GeoJSONSource.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>GeoJSONSource</a></li>
568
- <li class="tsd-kind-variable"><a href="variables/GeolocateControl.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Geolocate<wbr/>Control</a></li>
569
- <li class="tsd-kind-variable"><a href="variables/GeolocationType.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Geolocation<wbr/>Type</a></li>
570
- <li class="tsd-kind-variable"><a href="variables/ImageSource.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Image<wbr/>Source</a></li>
571
- <li class="tsd-kind-variable"><a href="variables/Language.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Language</a></li>
572
- <li class="tsd-kind-variable"><a href="variables/LngLat.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Lng<wbr/>Lat</a></li>
573
- <li class="tsd-kind-variable"><a href="variables/LngLatBounds.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Lng<wbr/>Lat<wbr/>Bounds</a></li>
574
- <li class="tsd-kind-variable"><a href="variables/LogoControl.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Logo<wbr/>Control</a></li>
575
- <li class="tsd-kind-variable"><a href="variables/Marker.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Marker</a></li>
576
- <li class="tsd-kind-variable"><a href="variables/MercatorCoordinate.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Mercator<wbr/>Coordinate</a></li>
577
- <li class="tsd-kind-variable"><a href="variables/NavigationControl.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Navigation<wbr/>Control</a></li>
578
- <li class="tsd-kind-variable"><a href="variables/Popup.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Popup</a></li>
579
- <li class="tsd-kind-variable"><a href="variables/RasterDEMTileSource.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>RasterDEMTile<wbr/>Source</a></li>
580
- <li class="tsd-kind-variable"><a href="variables/RasterTileSource.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Raster<wbr/>Tile<wbr/>Source</a></li>
581
- <li class="tsd-kind-variable"><a href="variables/ScaleControl.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Scale<wbr/>Control</a></li>
582
- <li class="tsd-kind-variable"><a href="variables/Style.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Style</a></li>
583
- <li class="tsd-kind-variable"><a href="variables/TerrainControl.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Terrain<wbr/>Control</a></li>
584
- <li class="tsd-kind-variable"><a href="variables/VectorTileSource.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Vector<wbr/>Tile<wbr/>Source</a></li>
585
- <li class="tsd-kind-variable"><a href="variables/VideoSource.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>Video<wbr/>Source</a></li>
586
- <li class="tsd-kind-variable"><a href="variables/config.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>config</a></li>
587
- <li class="tsd-kind-variable"><a href="variables/maxParallelImageRequests.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>max<wbr/>Parallel<wbr/>Image<wbr/>Requests</a></li>
588
- <li class="tsd-kind-variable"><a href="variables/version.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>version</a></li>
589
- <li class="tsd-kind-variable"><a href="variables/workerCount.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>worker<wbr/>Count</a></li>
590
- <li class="tsd-kind-variable"><a href="variables/workerUrl.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>worker<wbr/>Url</a></li>
591
- <li class="tsd-kind-function"><a href="functions/addProtocol.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>add<wbr/>Protocol</a></li>
592
- <li class="tsd-kind-function"><a href="functions/clearPrewarmedResources.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Prewarmed<wbr/>Resources</a></li>
593
- <li class="tsd-kind-function"><a href="functions/clearStorage.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Storage</a></li>
594
- <li class="tsd-kind-function"><a href="functions/getRTLTextPluginStatus.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>getRTLText<wbr/>Plugin<wbr/>Status</a></li>
595
- <li class="tsd-kind-function"><a href="functions/prewarm.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>prewarm</a></li>
596
- <li class="tsd-kind-function"><a href="functions/removeProtocol.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>remove<wbr/>Protocol</a></li>
597
- <li class="tsd-kind-function"><a href="functions/setRTLTextPlugin.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>setRTLText<wbr/>Plugin</a></li>
598
- <li class="tsd-kind-function"><a href="functions/supported.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>supported</a></li></ul></nav></div></div>
599
- <div class="container tsd-generator">
600
- <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
601
- <div class="overlay"></div><script src="assets/main.js"></script></body></html>