@maplibre/maplibre-react-native 8.6.0-beta.1 → 9.0.0

package/docs/MapView.md

@@ -1,13 +1,13 @@
 <!-- This file was autogenerated from MapView.js do not modify -->
-## <MapboxGL.MapView />
-### MapView backed by Mapbox Native GL
+## <MapLibreGL.MapView />
+### MapView backed by MapLibre GL Native
 
 ### props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 | contentInset | `union` | `none` | `false` | The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport. |
 | style | `any` | `none` | `false` | Style for wrapping React Native View |
-| styleURL | `string` | `none` | `false` | Style URL for map - notice, if non is set it _will_ default to `MapboxGL.StyleURL.Street` |
+| styleURL | `string` | `none` | `false` | Style URL for map - notice, if non is set it _will_ default to `MapLibreGL.StyleURL.Street` |
 | styleJSON | `string` | `none` | `false` | StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec |
 | preferredFramesPerSecond | `number` | `none` | `false` | iOS: The preferred frame rate at which the map view is rendered.<br/>The default value for this property is MGLMapViewPreferredFramesPerSecondDefault,<br/>which will adaptively set the preferred frame rate based on the capability of<br/>the user’s device to maintain a smooth experience. This property can be set to arbitrary integer values.<br/><br/>Android: The maximum frame rate at which the map view is rendered, but it can't excess the ability of device hardware.<br/>This property can be set to arbitrary integer values. |
 | localizeLabels | `bool` | `false` | `false` | Automatically change the language of the map labels to the system’s preferred language,<br/>this is not something that can be toggled on/off |
@@ -15,10 +15,10 @@
 | scrollEnabled | `bool` | `true` | `false` | Enable/Disable scroll on the map |
 | pitchEnabled | `bool` | `true` | `false` | Enable/Disable pitch on map |
 | rotateEnabled | `bool` | `true` | `false` | Enable/Disable rotation on map |
-| attributionEnabled | `bool` | `true` | `false` | The Mapbox terms of service, which governs the use of Mapbox-hosted vector tiles and styles,<br/>[requires](https://www.mapbox.com/help/how-attribution-works/) these copyright notices to accompany any map that features Mapbox-designed styles, OpenStreetMap data, or other Mapbox data such as satellite or terrain data.<br/>If that applies to this map view, do not hide this view or remove any notices from it.<br/><br/>If this view is hidden, you must implement this setting elsewhere in your app. See our website for [Android](https://www.mapbox.com/android-docs/map-sdk/overview/#telemetry-opt-out) and [iOS](https://www.mapbox.com/ios-sdk/#telemetry_opt_out) for implementation details.<br/><br/>Enable/Disable attribution on map. |
+| attributionEnabled | `bool` | `true` | `false` | Enable/Disable attribution on map.<br/><br/>This must be enabled for Mapbox-hosted tiles and styles. Please refer to the Mapbox Terms of Service.<br/>Other providers do not require this. |
 | attributionPosition | `union` | `none` | `false` | Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map |
 | tintColor | `union` | `none` | `false` | MapView's tintColor |
-| logoEnabled | `bool` | `true` | `false` | Enable/Disable the logo on the map. |
+| logoEnabled | `bool` | `false` | `false` | Enable/Disable the logo on the map. |
 | logoPosition | `union` | `none` | `false` | Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map |
 | compassEnabled | `bool` | `none` | `false` | Enable/Disable the compass from appearing on the map |
 | compassViewPosition | `number` | `none` | `false` | Change corner of map the compass starts at. 0: TopLeft, 1: TopRight, 2: BottomLeft, 3: BottomRight |

package/docs/MarkerView.md

@@ -1,5 +1,5 @@
 <!-- This file was autogenerated from MarkerView.js do not modify -->
-## <MapboxGL.MarkerView />
+## <MapLibreGL.MarkerView />
 ### MarkerView allows you to place a interactive react native marker to the map.<br/><br/>If you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance<br/>.<br/>This is based on [MakerView plugin](https://docs.mapbox.com/android/plugins/overview/markerview/) on Android<br/>and PointAnnotation on iOS.
 
 ### props

package/docs/NativeUserLocation.md

@@ -1,5 +1,5 @@
 <!-- This file was autogenerated from NativeUserLocation.js do not modify -->
-## <MapboxGL.NativeUserLocation />
+## <MapLibreGL.NativeUserLocation />
 ### 
 
 ### props

package/docs/OfflineManager.md

@@ -1,5 +1,5 @@
 <!-- This file was autogenerated from offlineManager.js do not modify -->
-## <MapboxGL.offlineManager />
+## <MapLibreGL.offlineManager />
 ### OfflineManager implements a singleton (shared object) that manages offline packs.<br/>All of this class’s instance methods are asynchronous, reflecting the fact that offline resources are stored in a database.<br/>The shared object maintains a canonical collection of offline packs.
 
 
@@ -21,7 +21,7 @@ Creates and registers an offline pack that downloads the resources needed to use
 const progressListener = (offlineRegion, status) => console.log(offlineRegion, status);
 const errorListener = (offlineRegion, err) => console.log(offlineRegion, err);
 
-await MapboxGL.offlineManager.createPack({
+await MapLibreGL.offlineManager.createPack({
   name: 'offlinePack',
   styleURL: 'mapbox://...',
   minZoom: 14,
@@ -43,7 +43,7 @@ Invalidates the specified offline pack. This method checks that the tiles in the
 
 
 ```javascript
-await MapboxGL.offlineManager.invalidatePack('packName')
+await MapLibreGL.offlineManager.invalidatePack('packName')
 ```
 
 
@@ -59,7 +59,7 @@ Unregisters the given offline pack and allows resources that are no longer requi
 
 
 ```javascript
-await MapboxGL.offlineManager.deletePack('packName')
+await MapLibreGL.offlineManager.deletePack('packName')
 ```
 
 
@@ -75,7 +75,7 @@ Forces a revalidation of the tiles in the ambient cache and downloads a fresh ve
 
 
 ```javascript
-await MapboxGL.offlineManager.invalidateAmbientCache();
+await MapLibreGL.offlineManager.invalidateAmbientCache();
 ```
 
 
@@ -91,7 +91,7 @@ Erases resources from the ambient cache.<br/>This method clears the cache and de
 
 
 ```javascript
-await MapboxGL.offlineManager.clearAmbientCache();
+await MapLibreGL.offlineManager.clearAmbientCache();
 ```
 
 
@@ -107,7 +107,7 @@ Sets the maximum size of the ambient cache in bytes. Disables the ambient cache
 
 
 ```javascript
-await MapboxGL.offlineManager.setMaximumAmbientCacheSize(5000000);
+await MapLibreGL.offlineManager.setMaximumAmbientCacheSize(5000000);
 ```
 
 
@@ -123,7 +123,7 @@ Deletes the existing database, which includes both the ambient cache and offline
 
 
 ```javascript
-await MapboxGL.offlineManager.resetDatabase();
+await MapLibreGL.offlineManager.resetDatabase();
 ```
 
 
@@ -139,7 +139,7 @@ Retrieves all the current offline packs that are stored in the database.
 
 
 ```javascript
-const offlinePacks = await MapboxGL.offlineManager.getPacks();
+const offlinePacks = await MapLibreGL.offlineManager.getPacks();
 ```
 
 
@@ -155,7 +155,7 @@ Retrieves an offline pack that is stored in the database by name.
 
 
 ```javascript
-const offlinePack = await MapboxGL.offlineManager.getPack();
+const offlinePack = await MapLibreGL.offlineManager.getPack();
 ```
 
 
@@ -171,13 +171,13 @@ Sideloads offline db
 
 
 ```javascript
-await MapboxGL.offlineManager.mergeOfflineRegions(path);
+await MapLibreGL.offlineManager.mergeOfflineRegions(path);
 ```
 
 
 #### setTileCountLimit(limit)
 
-Sets the maximum number of Mapbox-hosted tiles that may be downloaded and stored on the current device.<br/>The Mapbox Terms of Service prohibit changing or bypassing this limit without permission from Mapbox.
+Sets the maximum number of tiles that may be downloaded and stored on the current device.<br/>Consult the Terms of Service for your map tile host before changing this value.
 
 ##### arguments
 | Name | Type | Required | Description  |
@@ -187,7 +187,7 @@ Sets the maximum number of Mapbox-hosted tiles that may be downloaded and stored
 
 
 ```javascript
-MapboxGL.offlineManager.setTileCountLimit(1000);
+MapLibreGL.offlineManager.setTileCountLimit(1000);
 ```
 
 
@@ -203,7 +203,7 @@ Sets the period at which download status events will be sent over the React Nati
 
 
 ```javascript
-MapboxGL.offlineManager.setProgressEventThrottle(500);
+MapLibreGL.offlineManager.setProgressEventThrottle(500);
 ```
 
 
@@ -223,7 +223,7 @@ Subscribe to download status/error events for the requested offline pack.<br/>No
 ```javascript
 const progressListener = (offlinePack, status) => console.log(offlinePack, status)
 const errorListener = (offlinePack, err) => console.log(offlinePack, err)
-MapboxGL.offlineManager.subscribe('packName', progressListener, errorListener)
+MapLibreGL.offlineManager.subscribe('packName', progressListener, errorListener)
 ```
 
 
@@ -239,7 +239,7 @@ Unsubscribes any listeners associated with the offline pack.<br/>It's a good ide
 
 
 ```javascript
-MapboxGL.offlineManager.unsubscribe('packName')
+MapLibreGL.offlineManager.unsubscribe('packName')
 ```
 
 

package/docs/PointAnnotation.md

@@ -1,5 +1,5 @@
 <!-- This file was autogenerated from PointAnnotation.js do not modify -->
-## <MapboxGL.PointAnnotation />
+## <MapLibreGL.PointAnnotation />
 ### PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.<br/><br/>Consider using ShapeSource and SymbolLayer instead, if you have many points and you have static images,<br/>they'll offer much better performance<br/><br/>.<br/>If you need interctive views please use MarkerView,<br/>as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
 
 ### props

package/docs/RasterLayer.md

@@ -1,12 +1,12 @@
 <!-- This file was autogenerated from RasterLayer.js do not modify -->
-## <MapboxGL.RasterLayer />
+## <MapLibreGL.RasterLayer />
 ### 
 
 ### props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 | id | `string` | `none` | `true` | A string that uniquely identifies the source in the style to which it is added. |
-| sourceID | `string` | `MapboxGL.StyleSource.DefaultSourceID` | `false` | The source from which to obtain the data to style.<br/>If the source has not yet been added to the current style, the behavior is undefined.<br/>Inferred from parent source only if the layer is a direct child to it. |
+| sourceID | `string` | `MapLibreGL.StyleSource.DefaultSourceID` | `false` | The source from which to obtain the data to style.<br/>If the source has not yet been added to the current style, the behavior is undefined.<br/>Inferred from parent source only if the layer is a direct child to it. |
 | sourceLayerID | `string` | `none` | `false` | Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style. |
 | aboveLayerID | `string` | `none` | `false` | Inserts a layer above aboveLayerID. |
 | belowLayerID | `string` | `none` | `false` | Inserts a layer below belowLayerID |

package/docs/RasterSource.md

@@ -1,11 +1,11 @@
 <!-- This file was autogenerated from RasterSource.js do not modify -->
-## <MapboxGL.RasterSource />
+## <MapLibreGL.RasterSource />
 ### RasterSource is a map content source that supplies raster image tiles to be shown on the map.<br/>The location of and metadata about the tiles are defined either by an option dictionary<br/>or by an external file that conforms to the TileJSON specification.
 
 ### props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
-| id | `string` | `MapboxGL.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. |
+| id | `string` | `MapLibreGL.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. |
 | url | `string` | `none` | `false` | A URL to a TileJSON configuration file describing the source’s contents and other metadata. |
 | tileUrlTemplates | `array` | `none` | `false` | An array of tile URL templates. If multiple endpoints are specified, clients may use any combination of endpoints.<br/>Example: https://example.com/raster-tiles/{z}/{x}/{y}.png |
 | minZoomLevel | `number` | `none` | `false` | An unsigned integer that specifies the minimum zoom level at which to display tiles from the source.<br/>The value should be between 0 and 22, inclusive, and less than<br/>maxZoomLevel, if specified. The default value for this option is 0. |

package/docs/ShapeSource.md

@@ -1,11 +1,11 @@
 <!-- This file was autogenerated from ShapeSource.js do not modify -->
-## <MapboxGL.ShapeSource />
+## <MapLibreGL.ShapeSource />
 ### ShapeSource is a map content source that supplies vector shapes to be shown on the map.<br/>The shape may be a url or a GeoJSON object
 
 ### props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
-| id | `string` | `MapboxGL.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. |
+| id | `string` | `MapLibreGL.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. |
 | url | `string` | `none` | `false` | An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle. |
 | shape | `object` | `none` | `false` | The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature colllection. |
 | cluster | `bool` | `none` | `false` | Enables clustering on the source for point shapes. |

package/docs/Style.md

@@ -1,10 +1,10 @@
 <!-- This file was autogenerated from Style.js do not modify -->
-## <MapboxGL.Style />
-### Style is a component that automatically adds sources / layers to the map using Mapbox GL Style Spec.<br/>Only [`sources`](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources) & [`layers`](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/) are supported.<br/>Other fields such as `sprites`, `glyphs` etc. will be ignored. Not all layer / source attributes from the style spec are supported, in general the supported attributes will be mentioned under https://github.com/maplibre/maplibre-react-native/tree/main/docs.<br/><br/>TODO: Maintainer forking this project does not understand the above comment regarding what is supported.
+## <MapLibreGL.Style />
+### Style is a component that automatically adds sources / layers to the map using MapLibre Style Spec.<br/>Only [`sources`](https://maplibre.org/maplibre-gl-js-docs/style-spec/sources/) & [`layers`](https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/) are supported.<br/>Other fields such as `sprites`, `glyphs` etc. will be ignored. Not all layer / source attributes from the style spec are supported, in general the supported attributes will be mentioned under https://github.com/maplibre/maplibre-react-native/tree/main/docs.<br/><br/>TODO: Maintainer forking this project does not understand the above comment regarding what is supported.
 
 ### props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
-| json | `any` | `none` | `false` | A JSON object conforming to the schema described in the Mapbox Style Specification , or a URL to such JSON. |
+| json | `any` | `none` | `false` | A JSON object conforming to the schema described in the MapLibre Style Specification, or a URL to such JSON. |
 
 

package/docs/StyleSheet.md

@@ -3,7 +3,7 @@
 
 ### Stylesheet is now a JS object, see [CHANGELOG.md](../CHANGELOG.md)  for more details
 
-See (Mapbox expression specs)[https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions] for reference on expressions.
+See (MapLibre expression specs)[https://maplibre.org/maplibre-gl-js-docs/style-spec/expressions/] for reference on expressions.
 
 ### Style functions
 
@@ -35,20 +35,21 @@ new:
 ```
 
 old:
+
 ```js
 // color would change based on zoom level keys.
-MapboxGL.StyleSheet.camera({
+MapLibreGL.StyleSheet.camera({
   0: 'blue',
   10: 'green',
   20: 'yellow',
-}, MapboxGL.InterpolationMode.Exponential);
+}, MapLibreGL.InterpolationMode.Exponential);
 
 // Example of use inside stylesheet
-MapboxGL.StyleSheet.create({
-  fillColor: MapboxGL.StyleSheet.camera({
+MapLibreGL.StyleSheet.create({
+  fillColor: MapLibreGL.StyleSheet.camera({
     15: 'blue',
     20: 'green',
-  }, MapboxGL.InterpolationMode.Interval),
+  }, MapLibreGL.InterpolationMode.Interval),
 });
 ```
 
@@ -85,25 +86,26 @@ new:
 
 
 old:
+
 ```js
 // would color the layer based the property rating=[1, 5]
-MapboxGL.StyleSheet.source([
+MapLibreGL.StyleSheet.source([
   [1, 'red'],
   [2, 'orange'],
   [3, 'yellow'],
   [4, 'yellowgreen'],
   [5, 'green'],
-], 'rating', MapboxGL.InterpolationMode.Categorical);
+], 'rating', MapLibreGL.InterpolationMode.Categorical);
 
 // Example of use inside stylesheet
-MapboxGL.StyleSheet.create({
-  circleColor: MapboxGL.StyleSheet.source([
+MapLibreGL.StyleSheet.create({
+  circleColor: MapLibreGL.StyleSheet.source([
     [1, 'red'],
     [2, 'orange'],
     [3, 'yellow'],
     [4, 'yellowgreen'],
     [5, 'green'],
-  ], 'rating', MapboxGL.InterpolationMode.Categorical),
+  ], 'rating', MapLibreGL.InterpolationMode.Categorical),
 });
 ```
 
@@ -152,23 +154,24 @@ new:
 
 
 old:
+
 ```js
 // would change based on the zoom level and rating value
 // {zoom_level}: [{value}, {style_value}]
-MapboxGL.StyleSheet.composite({
+MapLibreGL.StyleSheet.composite({
   0: [0, 0],
   0: [5, 5],
   20: [0, 0],
   20: [5, 20],
-}, 'rating', MapboxGL.InterpolationMode.Interval);
+}, 'rating', MapLibreGL.InterpolationMode.Interval);
 
-MapboxGL.StyleSheet.create({
-  circleRadius: MapboxGL.StyleSheet.composite({
+MapLibreGL.StyleSheet.create({
+  circleRadius: MapLibreGL.StyleSheet.composite({
     0: [0, 0],
     0: [5, 5],
     20: [0, 0],
     20: [5, 20],
-  }, 'rating', MapboxGL.InterpolationMode.Interval),
+  }, 'rating', MapLibreGL.InterpolationMode.Interval),
 });
 ```
 
@@ -188,8 +191,8 @@ new:
 old:
 
 ```js
-MapboxGL.StyleSheet.create({
-  fillExtrusionHeight: MapboxGL.StyleSheet.identity('height'),
+MapLibreGL.StyleSheet.create({
+  fillExtrusionHeight: MapLibreGL.StyleSheet.identity('height'),
 });
 ```
 
@@ -210,8 +213,8 @@ const styles = {
 
 ...
 
-<MapboxGL.FillLayer ... style={styles.buildings} />
-<MapboxGL.FillLayer ... style={styles.street} />
+<MapLibreGL.FillLayer ... style={styles.buildings} />
+<MapLibreGL.FillLayer ... style={styles.street} />
 ```
 
 ```js
@@ -259,68 +262,82 @@ const layerStyles = {
 
 ...
 
-<MapboxGL.SymbolLayer
+<MapLibreGL.SymbolLayer
   id='pointCount'
   style={layerStyles.clusterCount} />
 
-<MapboxGL.CircleLayer
+<MapLibreGL.CircleLayer
   id='clusteredPoints'
   belowLayerID='pointCount'
   filter={['has', 'point_count']}
   style={layerStyles.clusteredPoints} />
 
-<MapboxGL.CircleLayer
+<MapLibreGL.CircleLayer
   id='singlePoint'
   filter={['!has', 'point_count']}
   style={layerStyles.singlePoint} />
 ```
 
 ```javascript
-const layerStyles = MapboxGL.StyleSheet.create({
-  building: {
-    fillExtrusionOpacity: 1,
-    fillExtrusionHeight: ['get', 'height'],
-    fillExtrusionBase: ['get', 'min_height'],
-    fillExtrusionColor: [
-      'interpolate',
-      ['exponential', 1.5],
-      ['get', 'height'],
-      [0, 'white'],
-      [50, 'blue'],
-      [100, 'red'],
-     ],
+const layerStyles = MapLibreGL.StyleSheet.create({
+    building: {
+      fillExtrusionOpacity: 1,
+      fillExtrusionHeight: ['get', 'height'],
+      fillExtrusionBase: ['get', 'min_height'],
+      fillExtrusionColor: [
+        'interpolate',
+        ['exponential', 1.5],
+        ['get', 'height'],
+        [0, 'white'],
+        [50, 'blue'],
+        [100, 'red'],
+      ],
     },
     fillExtrusionColorTransition: { duration: 2000, delay: 0 },
   },
-  streets: {
-    lineColor: 'blue',
-    lineWidth: 2,
-    lineOpacity: 0.50,
-    lineJoin: MapboxGL.LineJoin.Round,
-    lineCap: MapboxGL.LineCap.Round,
-    lineDasharray: [2, 2],
-  },
-});
+  streets
+:
+{
+  lineColor: 'blue',
+    lineWidth
+:
+  2,
+    lineOpacity
+:
+  0.50,
+    lineJoin
+:
+  MapLibreGL.LineJoin.Round,
+    lineCap
+:
+  MapLibreGL.LineCap.Round,
+    lineDasharray
+:
+  [2, 2],
+}
+,
+})
+;
 
 ...
 
-<MapboxGL.FillExtrusionLayer
+<MapLibreGL.FillExtrusionLayer
   id='building3d'
   sourceLayerID='building'
-  style={layerStyles.building} />
+  style={layerStyles.building}/>
 
-<MapboxGL.LineLayer
+<MapLibreGL.LineLayer
   id='streetLineColor'
   sourceLayerID='road'
   minZoomLevel={14}
   belowLayerID='building3d'
-  style={layerStyles.streets} />
+  style={layerStyles.streets}/>
 ```
 
 #### old:
 
 ```js
-const styles = MapboxGL.StyleSheet.create({
+const styles = MapLibreGL.StyleSheet.create({
   buildings: {
     fillColor: 'blue',
   },
@@ -331,12 +348,16 @@ const styles = MapboxGL.StyleSheet.create({
 
 ...
 
-<MapboxGL.FillLayer ... style={styles.buildings} />
-<MapboxGL.FillLayer ... style={styles.street} />
+<MapLibreGL.FillLayer ...
+style = { styles.buildings }
+/>
+<MapLibreGL.FillLayer ...
+style = { styles.street }
+/>
 ```
 
 ```js
-const layerStyles = MapboxGL.StyleSheet.create({
+const layerStyles = MapLibreGL.StyleSheet.create({
   singlePoint: {
     circleColor: 'green',
     circleOpacity: 0.84,
@@ -346,20 +367,20 @@ const layerStyles = MapboxGL.StyleSheet.create({
   },
 
   clusteredPoints: {
-    circleColor: MapboxGL.StyleSheet.source([
+    circleColor: MapLibreGL.StyleSheet.source([
       [25, 'yellow'],
       [50, 'red'],
       [75, 'blue'],
       [100, 'orange'],
       [300, 'pink'],
       [750, 'white'],
-    ], 'point_count', MapboxGL.InterpolationMode.Exponential),
+    ], 'point_count', MapLibreGL.InterpolationMode.Exponential),
 
-    circleRadius: MapboxGL.StyleSheet.source([
+    circleRadius: MapLibreGL.StyleSheet.source([
       [0, 15],
       [100, 20],
       [750, 30],
-    ], 'point_count', MapboxGL.InterpolationMode.Exponential),
+    ], 'point_count', MapLibreGL.InterpolationMode.Exponential),
 
     circleOpacity: 0.84,
     circleStrokeWidth: 2,
@@ -374,53 +395,53 @@ const layerStyles = MapboxGL.StyleSheet.create({
 
 ...
 
-<MapboxGL.SymbolLayer
+<MapLibreGL.SymbolLayer
   id='pointCount'
-  style={layerStyles.clusterCount} />
+  style={layerStyles.clusterCount}/>
 
-<MapboxGL.CircleLayer
+<MapLibreGL.CircleLayer
   id='clusteredPoints'
   belowLayerID='pointCount'
   filter={['has', 'point_count']}
-  style={layerStyles.clusteredPoints} />
+  style={layerStyles.clusteredPoints}/>
 
-<MapboxGL.CircleLayer
+<MapLibreGL.CircleLayer
   id='singlePoint'
   filter={['!has', 'point_count']}
-  style={layerStyles.singlePoint} />
+  style={layerStyles.singlePoint}/>
 ```
 
 ```javascript
-const layerStyles = MapboxGL.StyleSheet.create({
+const layerStyles = MapLibreGL.StyleSheet.create({
   building: {
     fillExtrusionOpacity: 1,
-    fillExtrusionHeight: MapboxGL.StyleSheet.identity('height'),
-    fillExtrusionBase: MapboxGL.StyleSheet.identity('min_height'),
-    fillExtrusionColor: MapboxGL.StyleSheet.source([
+    fillExtrusionHeight: MapLibreGL.StyleSheet.identity('height'),
+    fillExtrusionBase: MapLibreGL.StyleSheet.identity('min_height'),
+    fillExtrusionColor: MapLibreGL.StyleSheet.source([
       [0, 'white'],
       [50, 'blue'],
       [100, 'red'],
-    ], 'height', MapboxGL.InterpolationMode.Exponential),
+    ], 'height', MapLibreGL.InterpolationMode.Exponential),
     fillExtrusionColorTransition: { duration: 2000, delay: 0 },
   },
   streets: {
     lineColor: 'blue',
     lineWidth: 2,
     lineOpacity: 0.50,
-    lineJoin: MapboxGL.LineJoin.Round,
-    lineCap: MapboxGL.LineCap.Round,
+    lineJoin: MapLibreGL.LineJoin.Round,
+    lineCap: MapLibreGL.LineCap.Round,
     lineDasharray: [2, 2],
   },
 });
 
 ...
 
-<MapboxGL.FillExtrusionLayer
+<MapLibreGL.FillExtrusionLayer
   id='building3d'
   sourceLayerID='building'
   style={layerStyles.building} />
 
-<MapboxGL.LineLayer
+<MapLibreGL.LineLayer
   id='streetLineColor'
   sourceLayerID='road'
   minZoomLevel={14}