@rnmapbox/maps 10.0.0-beta.28

package/docs/SkyLayer.md

@@ -0,0 +1,259 @@
+<!-- This file was autogenerated from SkyLayer.js do not modify -->
+## <MapboxGL.SkyLayer />
+### SkyLayer is a spherical dome around the map that is always rendered behind all other layers
+
+### 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. |
+| aboveLayerID | `string` | `none` | `false` | Inserts a layer above aboveLayerID. |
+| belowLayerID | `string` | `none` | `false` | Inserts a layer below belowLayerID |
+| layerIndex | `number` | `none` | `false` | Inserts a layer at a specified index |
+| filter | `array` | `none` | `false` | Filter only the features in the source layer that satisfy a condition that you define |
+| style | `union` | `none` | `false` | Customizable style attributes |
+
+
+### styles
+
+* <a href="#visibility">visibility</a><br/>
+* <a href="#skytype">skyType</a><br/>
+* <a href="#skyatmospheresun">skyAtmosphereSun</a><br/>
+* <a href="#skyatmospheresunintensity">skyAtmosphereSunIntensity</a><br/>
+* <a href="#skygradientcenter">skyGradientCenter</a><br/>
+* <a href="#skygradientradius">skyGradientRadius</a><br/>
+* <a href="#skygradient">skyGradient</a><br/>
+* <a href="#skyatmospherehalocolor">skyAtmosphereHaloColor</a><br/>
+* <a href="#skyatmospherecolor">skyAtmosphereColor</a><br/>
+* <a href="#skyopacity">skyOpacity</a><br/>
+
+___
+
+#### visibility
+Name: `visibility`
+
+#### Description
+Whether this layer is displayed.
+
+#### Type
+`enum`
+#### Default Value
+`visible`
+
+#### Supported Values
+**visible** - The layer is shown.<br />
+**none** - The layer is not shown.<br />
+
+
+
+___
+
+#### skyType
+Name: `skyType`
+
+#### Description
+The type of the sky
+
+#### Type
+`enum`
+#### Default Value
+`atmosphere`
+
+#### Supported Values
+**gradient** - Renders the sky with a gradient that can be configured with `sky-gradient-radius` and `sky-gradient`.<br />
+**atmosphere** - Renders the sky with a simulated atmospheric scattering algorithm, the sun direction can be attached to the light position or explicitly set through `sky-atmosphere-sun`.<br />
+
+
+#### Expression
+
+Parameters: `zoom`
+
+___
+
+#### skyAtmosphereSun
+Name: `skyAtmosphereSun`
+
+#### Description
+Position of the sun center [a azimuthal angle, p polar angle]. The azimuthal angle indicates the position of the sun relative to 0° north, where degrees proceed clockwise. The polar angle indicates the height of the sun, where 0° is directly above, at zenith, and 90° at the horizon. When this property is ommitted, the sun center is directly inherited from the light position.
+
+#### Type
+`array<number>`
+
+#### Units
+`degrees`
+
+#### Minimum
+`0,0`
+
+
+#### Maximum
+`360,180`
+
+#### Expression
+
+Parameters: `zoom`
+
+___
+
+#### skyAtmosphereSunIntensity
+Name: `skyAtmosphereSunIntensity`
+
+#### Description
+Intensity of the sun as a light source in the atmosphere (on a scale from 0 to a 100). Setting higher values will brighten up the sky.
+
+#### Type
+`number`
+#### Default Value
+`10`
+
+#### Minimum
+`0`
+
+
+#### Maximum
+`100`
+
+
+___
+
+#### skyGradientCenter
+Name: `skyGradientCenter`
+
+#### Description
+Position of the gradient center [a azimuthal angle, p polar angle]. The azimuthal angle indicates the position of the gradient center relative to 0° north, where degrees proceed clockwise. The polar angle indicates the height of the gradient center, where 0° is directly above, at zenith, and 90° at the horizon.
+
+#### Type
+`array<number>`
+#### Default Value
+`[0,0]`
+
+#### Units
+`degrees`
+
+#### Minimum
+`0,0`
+
+
+#### Maximum
+`360,180`
+
+#### Expression
+
+Parameters: `zoom`
+
+___
+
+#### skyGradientRadius
+Name: `skyGradientRadius`
+
+#### Description
+The angular distance (measured in degrees) from `skyGradientCenter` up to which the gradient extends. A value of 180 causes the gradient to wrap around to the opposite direction from `skyGradientCenter`.
+
+#### Type
+`number`
+#### Default Value
+`90`
+
+#### Minimum
+`0`
+
+
+#### Maximum
+`180`
+
+#### Expression
+
+Parameters: `zoom`
+
+___
+
+#### skyGradient
+Name: `skyGradient`
+
+#### Description
+Defines a radial color gradient with which to color the sky. The color values can be interpolated with an expression using `skyRadialProgress`. The range [0, 1] for the interpolant covers a radial distance (in degrees) of [0, `skyGradientRadius`] centered at the position specified by `skyGradientCenter`.
+
+#### Type
+`color`
+#### Default Value
+`interpolate,linear,sky-radial-progress,0.8,#87ceeb,1,white`
+
+
+#### Expression
+
+Parameters: `sky-radial-progress`
+
+___
+
+#### skyAtmosphereHaloColor
+Name: `skyAtmosphereHaloColor`
+
+#### Description
+A color applied to the atmosphere sun halo. The alpha channel describes how strongly the sun halo is represented in an atmosphere sky layer.
+
+#### Type
+`color`
+#### Default Value
+`white`
+
+
+
+___
+
+#### skyAtmosphereColor
+Name: `skyAtmosphereColor`
+
+#### Description
+A color used to tweak the main atmospheric scattering coefficients. Using white applies the default coefficients giving the natural blue color to the atmosphere. This color affects how heavily the corresponding wavelength is represented during scattering. The alpha channel describes the density of the atmosphere, with 1 maximum density and 0 no density.
+
+#### Type
+`color`
+#### Default Value
+`white`
+
+
+
+___
+
+#### skyOpacity
+Name: `skyOpacity`
+
+#### Description
+The opacity of the entire sky layer.
+
+#### Type
+`number`
+#### Default Value
+`1`
+
+#### Minimum
+`0`
+
+
+#### Maximum
+`1`
+
+#### Expression
+
+Parameters: `zoom`
+___
+
+#### Name
+
+`skyOpacityTransition`
+
+#### Description
+
+The transition affecting any changes to this layer’s skyOpacity propery.
+
+#### Type
+
+`{ duration, delay }`
+
+#### Units
+`milliseconds`
+
+#### Default Value
+`{duration: 300, delay: 0}`
+
+

package/docs/Style.md

@@ -0,0 +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 mentioned under https://github.com/rnmapbox/maps/tree/main/docs.
+
+### 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. |
+
+

package/docs/StyleSheet.md

@@ -0,0 +1,430 @@
+## StyleSheet
+
+
+### 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.
+
+### Style functions
+
+#### zoom based expressions (replaces camera(stops[, interpolationMode]))
+
+This is a value function defining a style value that changes as the zoom level changes. The layout and paint attribute properties of the layer can be set to style function objects. Use a camera function to create the illusion of depth and control data density.
+
+new:
+```js
+// color would change based on zoom level keys.
+[
+  'interpolate',
+  ['exponential', 1.5],
+  ['zoom'],
+  0, 'blue',
+  10, 'green',
+  20, 'yellow'
+];
+
+// Example of use inside stylesheet
+{
+  fillColor: [
+    'step',
+    ['zoom'],
+    'blue',
+    20, 'green'
+  ]
+}
+```
+
+old:
+```js
+// color would change based on zoom level keys.
+MapboxGL.StyleSheet.camera({
+  0: 'blue',
+  10: 'green',
+  20: 'yellow',
+}, MapboxGL.InterpolationMode.Exponential);
+
+// Example of use inside stylesheet
+MapboxGL.StyleSheet.create({
+  fillColor: MapboxGL.StyleSheet.camera({
+    15: 'blue',
+    20: 'green',
+  }, MapboxGL.InterpolationMode.Interval),
+});
+```
+
+#### attribute based expressions (replaces source(stops, attributeName[, interpolationMode]))
+
+This is a value function defining a style value that changes with its properties. The layout and paint attribute properties of the layer can be set to style function objects. Use source functions to visually differentate types of features within the same layer or create data visualizations.
+
+new:
+```js
+// would color the layer based the property rating=[1, 5]
+[
+  'step',
+  ['get', 'rating'],
+  'red',
+  2, 'orange',
+  3, 'yellow',
+  4, 'yellowgreen',
+  5, 'green',
+];
+
+// Example of use inside stylesheet
+{
+  circleColor: [
+    'step',
+    ['get', 'rating'],
+    'red',
+    2, 'orange',
+    3, 'yellow',
+    4, 'yellowgreen',
+    5, 'green',
+  ],
+}
+```
+
+
+old:
+```js
+// would color the layer based the property rating=[1, 5]
+MapboxGL.StyleSheet.source([
+  [1, 'red'],
+  [2, 'orange'],
+  [3, 'yellow'],
+  [4, 'yellowgreen'],
+  [5, 'green'],
+], 'rating', MapboxGL.InterpolationMode.Categorical);
+
+// Example of use inside stylesheet
+MapboxGL.StyleSheet.create({
+  circleColor: MapboxGL.StyleSheet.source([
+    [1, 'red'],
+    [2, 'orange'],
+    [3, 'yellow'],
+    [4, 'yellowgreen'],
+    [5, 'green'],
+  ], 'rating', MapboxGL.InterpolationMode.Categorical),
+});
+```
+
+#### nested expressions (replaces composite(stops, attributeName[, interpolationMode]))
+
+This is a value function defining a style value that changes with the feature attributes at each map zoom level. The layout and paint attribute properties of the layer can be set to style function objects. Use composite functions to allow the appearance of a map feature to change with both its attributes and the map zoom level. Note that support for composite functions is not yet complete in the Android/iOS SDK's.
+
+new: 
+```js
+// would change based on the zoom level and rating value
+// {zoom_level}: [{value}, {style_value}]
+[
+  'step',
+  ['zoom'],
+  [
+    'step',
+    ['get','rating'],
+    0,
+    5, 5
+  ],
+  20, [
+    'step',
+    ['get','rating'],
+    0,
+    5, 20
+  ]
+]
+
+{
+  circleRadius: [
+    'step',
+    ['zoom'],
+    [ 'step',
+      ['get','rating'],
+      0,
+      5, 5
+    ],
+    20, [ 'step',
+          ['get','rating'],
+          0,
+          5, 20
+        ],
+]
+};
+```
+
+
+old:
+```js
+// would change based on the zoom level and rating value
+// {zoom_level}: [{value}, {style_value}]
+MapboxGL.StyleSheet.composite({
+  0: [0, 0],
+  0: [5, 5],
+  20: [0, 0],
+  20: [5, 20],
+}, 'rating', MapboxGL.InterpolationMode.Interval);
+
+MapboxGL.StyleSheet.create({
+  circleRadius: MapboxGL.StyleSheet.composite({
+    0: [0, 0],
+    0: [5, 5],
+    20: [0, 0],
+    20: [5, 20],
+  }, 'rating', MapboxGL.InterpolationMode.Interval),
+});
+```
+
+### Simple expressions 
+
+#### ['get', attributeName] - replaces identity(attributeName)
+
+This is just a source style function under the hood. For example say if you had a feature property with an attribute height. Identity means that it will just equal the attribute value, so there is no need to provide any stops
+
+new: 
+```js
+{
+  fillExtrusionHeight: ['get', 'height'],
+}
+```
+
+old:
+
+```js
+MapboxGL.StyleSheet.create({
+  fillExtrusionHeight: MapboxGL.StyleSheet.identity('height'),
+});
+```
+
+### StyleSheet Examples
+
+
+#### new:
+
+```js
+const styles = {
+  buildings: {
+    fillColor: 'blue',
+  },
+  street: {
+    lineColor: 'green',
+  }
+};
+
+...
+
+<MapboxGL.FillLayer ... style={styles.buildings} />
+<MapboxGL.FillLayer ... style={styles.street} />
+```
+
+```js
+const layerStyles = {
+  singlePoint: {
+    circleColor: 'green',
+    circleOpacity: 0.84,
+    circleStrokeWidth: 2,
+    circleStrokeColor: 'white',
+    circleRadius: 5,
+  },
+
+  clusteredPoints: {
+    circleColor: [
+      'interpolate',
+      ['exponential', 1.5],
+      ['get','point_count'],
+      25, 'yellow',
+      50, 'red',
+      75, 'blue',
+      100, 'orange',
+      300, 'pink',
+      750, 'white',
+    ],
+
+    circleRadius: [
+      'interpolate',
+      ['exponential', 1.5],
+      ['get','point_count'],
+      [0, 15],
+      [100, 20],
+      [750, 30],
+    ],
+
+    circleOpacity: 0.84,
+    circleStrokeWidth: 2,
+    circleStrokeColor: 'white',
+  },
+
+  clusterCount: {
+    textField: ['get', 'point_count'],
+    textSize: 12,
+  },
+});
+
+...
+
+<MapboxGL.SymbolLayer
+  id='pointCount'
+  style={layerStyles.clusterCount} />
+
+<MapboxGL.CircleLayer
+  id='clusteredPoints'
+  belowLayerID='pointCount'
+  filter={['has', 'point_count']}
+  style={layerStyles.clusteredPoints} />
+
+<MapboxGL.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'],
+     ],
+    },
+    fillExtrusionColorTransition: { duration: 2000, delay: 0 },
+  },
+  streets: {
+    lineColor: 'blue',
+    lineWidth: 2,
+    lineOpacity: 0.50,
+    lineJoin: MapboxGL.LineJoin.Round,
+    lineCap: MapboxGL.LineCap.Round,
+    lineDasharray: [2, 2],
+  },
+});
+
+...
+
+<MapboxGL.FillExtrusionLayer
+  id='building3d'
+  sourceLayerID='building'
+  style={layerStyles.building} />
+
+<MapboxGL.LineLayer
+  id='streetLineColor'
+  sourceLayerID='road'
+  minZoomLevel={14}
+  belowLayerID='building3d'
+  style={layerStyles.streets} />
+```
+
+#### old:
+
+```js
+const styles = MapboxGL.StyleSheet.create({
+  buildings: {
+    fillColor: 'blue',
+  },
+  street: {
+    lineColor: 'green',
+  }
+});
+
+...
+
+<MapboxGL.FillLayer ... style={styles.buildings} />
+<MapboxGL.FillLayer ... style={styles.street} />
+```
+
+```js
+const layerStyles = MapboxGL.StyleSheet.create({
+  singlePoint: {
+    circleColor: 'green',
+    circleOpacity: 0.84,
+    circleStrokeWidth: 2,
+    circleStrokeColor: 'white',
+    circleRadius: 5,
+  },
+
+  clusteredPoints: {
+    circleColor: MapboxGL.StyleSheet.source([
+      [25, 'yellow'],
+      [50, 'red'],
+      [75, 'blue'],
+      [100, 'orange'],
+      [300, 'pink'],
+      [750, 'white'],
+    ], 'point_count', MapboxGL.InterpolationMode.Exponential),
+
+    circleRadius: MapboxGL.StyleSheet.source([
+      [0, 15],
+      [100, 20],
+      [750, 30],
+    ], 'point_count', MapboxGL.InterpolationMode.Exponential),
+
+    circleOpacity: 0.84,
+    circleStrokeWidth: 2,
+    circleStrokeColor: 'white',
+  },
+
+  clusterCount: {
+    textField: '{point_count}',
+    textSize: 12,
+  },
+});
+
+...
+
+<MapboxGL.SymbolLayer
+  id='pointCount'
+  style={layerStyles.clusterCount} />
+
+<MapboxGL.CircleLayer
+  id='clusteredPoints'
+  belowLayerID='pointCount'
+  filter={['has', 'point_count']}
+  style={layerStyles.clusteredPoints} />
+
+<MapboxGL.CircleLayer
+  id='singlePoint'
+  filter={['!has', 'point_count']}
+  style={layerStyles.singlePoint} />
+```
+
+```javascript
+const layerStyles = MapboxGL.StyleSheet.create({
+  building: {
+    fillExtrusionOpacity: 1,
+    fillExtrusionHeight: MapboxGL.StyleSheet.identity('height'),
+    fillExtrusionBase: MapboxGL.StyleSheet.identity('min_height'),
+    fillExtrusionColor: MapboxGL.StyleSheet.source([
+      [0, 'white'],
+      [50, 'blue'],
+      [100, 'red'],
+    ], 'height', MapboxGL.InterpolationMode.Exponential),
+    fillExtrusionColorTransition: { duration: 2000, delay: 0 },
+  },
+  streets: {
+    lineColor: 'blue',
+    lineWidth: 2,
+    lineOpacity: 0.50,
+    lineJoin: MapboxGL.LineJoin.Round,
+    lineCap: MapboxGL.LineCap.Round,
+    lineDasharray: [2, 2],
+  },
+});
+
+...
+
+<MapboxGL.FillExtrusionLayer
+  id='building3d'
+  sourceLayerID='building'
+  style={layerStyles.building} />
+
+<MapboxGL.LineLayer
+  id='streetLineColor'
+  sourceLayerID='road'
+  minZoomLevel={14}
+  belowLayerID='building3d'
+  style={layerStyles.streets} />
+```
+