MapLibre React Native

https://maplibre.org/maplibre-react-native
Admin
A React Native library for creating maps with MapLibre Native for Android and iOS. It provides a...
Tokens:63,347
Snippets:133
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Rendering a MapView Component

Source: https://maplibre.org/maplibre-react-native/docs/setup/getting-started

Demonstrates how to import and use the MapView component from the @maplibre/maplibre-react-native library after installation. This is the basic building block for displaying maps.

```javascript
import React from "react";
import { MapView } from "@maplibre/maplibre-react-native";

function App() {
  return <MapView style={{ flex: 1 }} />;
}

```

--------------------------------

### Install MapLibre React Native with Yarn

Source: https://maplibre.org/maplibre-react-native/docs/setup/react-native

Installs the MapLibre React Native library using Yarn. This is the initial step for integrating the library into your project.

```shell
yarn add @maplibre/maplibre-react-native
```

--------------------------------

### Install iOS Pods for MapLibre React Native

Source: https://maplibre.org/maplibre-react-native/docs/setup/react-native

Runs the `pod install` command in the `ios` directory to install native dependencies for MapLibre React Native on iOS. This step is required after modifying the Podfile.

```shell
cd ios
pod install
```

--------------------------------

### Configure iOS Podfile for MapLibre React Native

Source: https://maplibre.org/maplibre-react-native/docs/setup/react-native

Modifies the `ios/Podfile` to include MapLibre React Native's post-installation script. This is crucial for iOS setup and ensures proper integration of native dependencies.

```ruby
post_install do |installer|
  # Other post install hooks...
  $MLRN.post_install(installer)
end
```

--------------------------------

### Install MapLibre React Native with Expo

Source: https://maplibre.org/maplibre-react-native/docs/setup/expo

Installs the MapLibre React Native package using the Expo CLI. This command ensures compatibility with Expo managed projects that require custom native code.

```shell
npx expo install @maplibre/maplibre-react-native
```

--------------------------------

### SnapshotManager takeSnap Examples

Source: https://maplibre.org/maplibre-react-native/docs/modules/snapshot-manager

Demonstrates various ways to use the takeSnap method to capture map snapshots, including specifying coordinates, bounds, and output options.

```javascript
const uri = await SnapshotManager.takeSnap({
  centerCoordinate: [-74.12641, 40.797968],
  width: width,
  height: height,
  zoomLevel: 12,
  pitch: 30,
  heading: 20,
  styleURL: StyleURL.Default,
  writeToDisk: true, // Create a temporary file
});
```

```javascript
const uri = await SnapshotManager.takeSnap({
  centerCoordinate: [-74.12641, 40.797968],
  width: width,
  height: height,
  zoomLevel: 12,
  pitch: 30,
  heading: 20,
  styleURL: StyleURL.Default,
  withLogo: false, // Disable Mapbox logo (Android only)
});
```

```javascript
const uri = await SnapshotManager.takeSnap({
  bounds: [
    [-74.12641, 40.797968],
    [-74.143727, 40.772177],
  ],
  width: width,
  height: height,
  styleURL: StyleURL.Default,
});
```

--------------------------------

### Basic MapView Usage

Source: https://maplibre.org/maplibre-react-native/index

Demonstrates the fundamental usage of the MapView component from the MapLibre React Native library. This example renders a map that occupies the entire available screen space. It requires the `@maplibre/maplibre-react-native` package.

```javascript
import { MapView } from "@maplibre/maplibre-react-native";

export function ExampleMap() {
  return <MapView style={{ flex: 1 }} />;
}
```

--------------------------------

### iOS Library Customizations

Source: https://maplibre.org/maplibre-react-native/docs/setup/library-customizations

Lists the configurable properties for the iOS native setup of MapLibre React Native. These are set as global variables in the `Podfile` and control native distribution versions and Swift Package Manager specifications.

```APIDOC
iOS Customizations:

Properties:
  nativeVersion ($MLRN_NATIVE_VERSION): Version for maplibre-gl-native-distribution.
  spmSpec ($MLRN_SPM_SPEC): Swift Package Manager Spec.

Default values are available in the maplibre-react-native.podspec file.

```

--------------------------------

### Expo App Configuration for MapLibre

Source: https://maplibre.org/maplibre-react-native/docs/setup/library-customizations

Example of how to configure MapLibre React Native native properties within an Expo project's `app.config.ts` file. This allows setting platform-specific native versions and other build-time configurations.

```typescript
import type { MapLibrePluginProps } from "@maplibre/maplibre-react-native";

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  plugins: [
    [
      "@maplibre/maplibre-react-native",
      {
        android: {
          nativeVersion: "x.x.x",
        },
        ios: {
          nativeVersion: "x.x.x",
        },
      } as MapLibrePluginProps,
    ],
  ],
});

```

--------------------------------

### Configure Expo App with MapLibre Plugin

Source: https://maplibre.org/maplibre-react-native/docs/setup/expo

Adds the MapLibre React Native config plugin to your Expo project's app.json or app.config.js. This step is crucial for integrating the native MapLibre SDK, especially for iOS where it modifies the Podfile.

```json
{
  "expo": {
    "plugins": [
      "@maplibre/maplibre-react-native"
    ]
  }
}
```

--------------------------------

### Android Library Customizations

Source: https://maplibre.org/maplibre-react-native/docs/setup/library-customizations

Details the available properties for customizing the Android native setup of MapLibre React Native. These can be set in `gradle.properties` and affect SDK versions, rendering backends, and location engines.

```APIDOC
Android Customizations:

Properties:
  nativeVersion (VersionString): Version for org.maplibre.gl:android-sdk-.
  nativeVariant ("opengl" | "vulkan"): Variant of org.maplibre.gl:android-sdk- (OpenGL ES or Vulkan).
  pluginVersion (VersionString): Version for org.maplibre.gl:android-plugin-*-v9.
  turfVersion (VersionString): Version for org.maplibre.gl:android-sdk-turf.
  okhttpVersion (VersionString): Version for com.squareup.okhttp3:okhttp.
  locationEngine ("default" | "google"): Location engine to be used. 'default' uses device location, 'google' uses Google Play Services Location Engine.
  googlePlayServicesLocationVersion (VersionString): Version for com.google.android.gms:play-services-location, used only with locationEngine: "google".

Default values are available in the library's android/gradle.properties.

Native Variant:
  Allows choosing between OpenGL ES (default) and Vulkan rendering backends.

Location Engine:
  - default: Uses the device's default location provider. May not work with emulators and is F-Droid compatible.
  - google: Uses Google Play Services Location Engine. Potentially more accurate, works with emulators, but not F-Droid compatible.

```

--------------------------------

### Configure RN 0.76.9 AppDelegate for Custom Headers (Objective-C++)

Source: https://maplibre.org/maplibre-react-native/docs/guides/custom-http-headers

This example demonstrates how to add custom HTTP headers in a React Native 0.76.9 project using the AppDelegate.mm file. It utilizes the MLRNCustomHeaders class to initialize and set headers for tile requests.

```Objective-C++
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
+#import "MLRNCustomHeaders.h"

@implementation AppDelegate

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"RnDiffApp";
  self.initialProps = @{};

+  [[MLRNCustomHeaders sharedInstance] initHeaders];
+  [[MLRNCustomHeaders sharedInstance] addHeader:@"sEcReT" forHeaderName:@"Authorization"];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

// ...

@end

```

--------------------------------

### Get Specific Offline Pack

Source: https://maplibre.org/maplibre-react-native/docs/modules/offline-manager

Fetches a single offline map pack from the database based on its unique name.

```javascript
const offlinePack = await OfflineManager.getPack();
```

--------------------------------

### Get All Offline Packs

Source: https://maplibre.org/maplibre-react-native/docs/modules/offline-manager

Retrieves a list of all offline map packs currently stored in the device's database.

```javascript
const offlinePacks = await OfflineManager.getPacks();
```

--------------------------------

### MapLibre React Native MarkerView Component API

Source: https://maplibre.org/maplibre-react-native/docs/components/general/marker-view

API reference for the MarkerView component, which allows placing interactive React Native markers on the map. It details the available props, their types, default values, and descriptions. For static views, PointAnnotation or SymbolLayer are recommended for better performance.

```APIDOC
MarkerView:
  description: Allows you to place an interactive React Native marker to the map.
  note: If you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance.
  basedOn:
    android: MakerView plugin
    ios: PointAnnotation
  props:
    coordinate:
      type: Array
      required: true
      default: none
      description: The center point (specified as a map coordinate) of the marker.
    anchor:
      type: shape
      required: false
      default: { x: 0.5, y: 0.5 }
      description: Specifies the anchor being set on a particular point of the annotation. The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0], where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner. Note this is only for custom annotations not the default pin view. Defaults to the center of the view.
    x:
      type: number
      required: true
      default: none
      description: x coordinate of the anchor.
    y:
      type: number
      required: true
      default: none
      description: y coordinate of the anchor.
    allowOverlap:
      type: boolean
      required: false
      default: false
      description: Controls whether the marker is allowed to overlap with other annotations.
    isSelected:
      type: boolean
      required: false
      default: false
      description: Indicates if the marker is currently selected.
    children:
      type: ReactElement
      required: true
      default: none
      description: Expects one child - can be a container with multiple elements.
```

--------------------------------

### MapLibre RN: Get Features from ShapeSource

Source: https://maplibre.org/maplibre-react-native/docs/components/sources/shape-source

Retrieves all features from the ShapeSource that match the provided filter expression, regardless of rendering status. The filter is optional.

```APIDOC
features([filter])
  - Returns all features from the source that match the query parameters.
  - Parameters:
    - filter (FilterExpression, Optional): An optional filter statement to filter the returned Features.
```

```javascript
shapeSource.features();
```

--------------------------------

### MapLibre RN: Get Cluster Leaves from ShapeSource

Source: https://maplibre.org/maplibre-react-native/docs/components/sources/shape-source

Retrieves the individual features (leaves) contained within a cluster. Supports pagination with limit and offset parameters.

```APIDOC
getClusterLeaves(feature, limit, offset)
  - Returns the FeatureCollection from the cluster.
  - Parameters:
    - feature (GeoJSON.Feature, Required): The feature cluster to expand.
    - limit (number, Required): The number of points to return.
    - offset (number, Required): The amount of points to skip (for pagination).
  - Returns: A FeatureCollection containing the individual features within the cluster.
```

```javascript
const collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);
```

--------------------------------

### BackgroundLayer Component API

Source: https://maplibre.org/maplibre-react-native/docs/components/layers/background-layer

API documentation for the BackgroundLayer component in MapLibre React Native. Details available props and style properties including visibility, color, pattern, and opacity, along with their types, defaults, and descriptions.

```APIDOC
BackgroundLayer Component API:

Props:
  style: BackgroundLayerStyle (optional) - Customizable style attributes
  sourceID: MLRNModule.StyleSource.DefaultSourceID (optional) - FIX ME NO DESCRIPTION

Styles:
  visibility: enum (default: visible)
    Supported Values:
      - visible: The layer is shown.
      - none: The layer is not shown.
    Description: Whether this layer is displayed.

  backgroundColor: color (default: #000000)
    Disabled By: backgroundPattern
    Expression Parameters: zoom
    Description: The color with which the background will be drawn.

  backgroundColorTransition: { duration, delay } (default: { duration: 300, delay: 0 })
    Units: milliseconds
    Description: The transition affecting any changes to this layer’s backgroundColor property.

  backgroundPattern: resolvedImage
    Expression Parameters: zoom
    Description: Name of image in sprite to use for drawing an image background. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoomDependent expressions will be evaluated only at integer zoom levels.

  backgroundPatternTransition: { duration, delay } (default: { duration: 300, delay: 0 })
    Units: milliseconds
    Description: The transition affecting any changes to this layer’s backgroundPattern property.

  backgroundOpacity: number (default: 1)
    Minimum: 0
    Maximum: 1
    Expression Parameters: zoom
    Description: The opacity at which the background will be drawn.
```

--------------------------------

### SymbolLayer Component API

Source: https://maplibre.org/maplibre-react-native/docs/components/layers/symbol-layer

Provides detailed API documentation for the SymbolLayer component, including its props and a comprehensive list of supported style properties for icon and text rendering.

```APIDOC
<SymbolLayer /> Component API

SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.

Props:
* `style`: SymbolLayerStyle (optional) - Customizable style attributes.
* `sourceID`: FIX ME UNKNOWN TYPE (optional) - FIX ME NO DESCRIPTION. Defaults to MLRNModule.StyleSource.DefaultSourceID.

Styles:
This component supports numerous style properties to control label placement, icon and text appearance, and visibility.

* `symbolPlacement`:
  - Description: Label placement relative to its geometry.
  - Type: enum
  - Default Value: `point`
  - Supported Values:
    * `point`: The label is placed at the point where the geometry is located.
    * `line`: The label is placed along the line of the geometry. Can only be used on LineString and Polygon geometries.
    * `line-center`: The label is placed at the center of the line of the geometry. Can only be used on LineString and Polygon geometries.
  - Expression Parameters: `zoom`

* `symbolSpacing`:
  - Description: Distance between two symbol anchors.
  - Type: number
  - Default Value: `250`
  - Units: pixels
  - Minimum: `1`
  - Expression Parameters: `zoom`

* `symbolAvoidEdges`:
  - Description: Whether the symbol should be placed along the edge of the map.
  - Type: boolean
  - Default Value: `false`

* `symbolSortKey`:
  - Description: Determines the order of labels.
  - Type: number

* `symbolZOrder`:
  - Description: Determines the order of labels relative to other symbols.
  - Type: enum
  - Supported Values: `auto`, `source`, `viewport-y`, `map`

* `iconAllowOverlap`:
  - Description: Whether the icon can overlap other icons.
  - Type: boolean
  - Default Value: `false`

* `iconIgnorePlacement`:
  - Description: Whether the icon should be placed even if it overlaps other symbols.
  - Type: boolean
  - Default Value: `false`

* `iconOptional`:
  - Description: Whether the icon is optional and can be hidden if it doesn't fit.
  - Type: boolean
  - Default Value: `false`

* `iconRotationAlignment`:
  - Description: Controls the rotation of the icon relative to its anchor.
  - Type: enum
  - Default Value: `auto`
  - Supported Values: `auto`, `map`, `viewport`, `symbol`

* `iconSize`:
  - Description: Size of the icon in pixels.
  - Type: number
  - Default Value: `1`

* `iconTextFit`:
  - Description: How the icon should be fit to the text.
  - Type: enum
  - Default Value: `none`
  - Supported Values: `none`, `width`, `height`, `both`

* `iconTextFitPadding`:
  - Description: Padding around the text when fitting the icon.
  - Type: array of numbers
  - Default Value: `[0, 0, 0, 0]`

* `iconImage`:
  - Description: Name of the image to use for the icon.
  - Type: string

* `iconRotate`:
  - Description: Rotation of the icon in degrees.
  - Type: number
  - Default Value: `0`

* `iconPadding`:
  - Description: Padding around the icon.
  - Type: number
  - Default Value: `0`

* `iconKeepUpright`:
  - Description: Whether the icon should be kept upright.
  - Type: boolean
  - Default Value: `false`

* `iconOffset`:
  - Description: Offset of the icon from its anchor.
  - Type: array of numbers
  - Default Value: `[0, 0]`

* `iconAnchor`:
  - Description: Anchor point of the icon.
  - Type: enum
  - Default Value: `center`
  - Supported Values: `center`, `top`, `bottom`, `left`, `right`, `top-left`, `top-right`, `bottom-left`, `bottom-right`

* `iconPitchAlignment`:
  - Description: Controls the pitch alignment of the icon.
  - Type: enum
  - Default Value: `auto`
  - Supported Values: `auto`, `map`, `viewport`, `symbol`

* `textPitchAlignment`:
  - Description: Controls the pitch alignment of the text.
  - Type: enum
  - Default Value: `auto`
  - Supported Values: `auto`, `map`, `viewport`, `symbol`

* `textRotationAlignment`:
  - Description: Controls the rotation of the text relative to its anchor.
  - Type: enum
  - Default Value: `auto`
  - Supported Values: `auto`, `map`, `viewport`, `symbol`

* `textField`:
  - Description: Text to display.
  - Type: string

* `textFont`:
  - Description: Font stack for the text.
  - Type: array of strings

* `textSize`:
  - Description: Size of the text in pixels.
  - Type: number
  - Default Value: `16`

* `textMaxWidth`:
  - Description: Maximum width of the text in pixels.
  - Type: number

* `textLineHeight`:
  - Description: Line height of the text.
  - Type: number
  - Default Value: `1.2`

* `textLetterSpacing`:
  - Description: Letter spacing of the text.
  - Type: number
  - Default Value: `0`

* `textJustify`:
  - Description: Justification of the text.
  - Type: enum
  - Default Value: `center`
  - Supported Values: `auto`, `left`, `center`, `right`

* `textRadialOffset`:
  - Description: Radial offset of the text.
  - Type: number
  - Default Value: `0`

* `textVariableAnchor`:
  - Description: Allows text to be placed at different anchor points.
  - Type: array of enums
  - Supported Values: `center`, `top`, `bottom`, `left`, `right`, `top-left`, `top-right`, `bottom-left`, `bottom-right`

* `textAnchor`:
  - Description: Anchor point of the text.
  - Type: enum
  - Default Value: `center`
  - Supported Values: `center`, `top`, `bottom`, `left`, `right`, `top-left`, `top-right`, `bottom-left`, `bottom-right`

* `textMaxAngle`:
  - Description: Maximum angle of the text.
  - Type: number
  - Default Value: `45`

* `textWritingMode`:
  - Description: Writing mode of the text.
  - Type: array of enums
  - Supported Values: `horizontal`, `vertical`

* `textRotate`:
  - Description: Rotation of the text in degrees.
  - Type: number
  - Default Value: `0`

* `textPadding`:
  - Description: Padding around the text.
  - Type: number
  - Default Value: `0`

* `textKeepUpright`:
  - Description: Whether the text should be kept upright.
  - Type: boolean
  - Default Value: `false`

* `textTransform`:
  - Description: Transformation of the text.
  - Type: enum
  - Default Value: `none`
  - Supported Values: `none`, `uppercase`, `lowercase`, `none`

* `textOffset`:
  - Description: Offset of the text from its anchor.
  - Type: array of numbers
  - Default Value: `[0, 0]`

* `textAllowOverlap`:
  - Description: Whether the text can overlap other text.
  - Type: boolean
  - Default Value: `false`

* `textIgnorePlacement`:
  - Description: Whether the text should be placed even if it overlaps other symbols.
  - Type: boolean
  - Default Value: `false`

* `textOptional`:
  - Description: Whether the text is optional and can be hidden if it doesn't fit.
  - Type: boolean
  - Default Value: `false`

* `visibility`:
  - Description: Whether the layer is visible.
  - Type: enum
  - Default Value: `visible`
  - Supported Values: `visible`, `none`

* `iconOpacity`:
  - Description: Opacity of the icon.
  - Type: number
  - Default Value: `1`

* `iconColor`:
  - Description: Color of the icon.
  - Type: string

* `iconHaloColor`:
  - Description: Color of the icon halo.
  - Type: string

* `iconHaloWidth`:
  - Description: Width of the icon halo.
  - Type: number
  - Default Value: `0`

* `iconHaloBlur`:
  - Description: Blur of the icon halo.
  - Type: number
  - Default Value: `0`

* `iconTranslate`:
  - Description: Translation of the icon.
  - Type: array of numbers
  - Default Value: `[0, 0]`

* `iconTranslateAnchor`:
  - Description: Anchor for icon translation.
  - Type: enum
  - Default Value: `map`
  - Supported Values: `map`, `viewport`

* `textOpacity`:
  - Description: Opacity of the text.
  - Type: number
  - Default Value: `1`

* `textColor`:
  - Description: Color of the text.
  - Type: string

* `textHaloColor`:
  - Description: Color of the text halo.
  - Type: string

* `textHaloWidth`:
  - Description: Width of the text halo.
  - Type: number
  - Default Value: `0`

* `textHaloBlur`:
  - Description: Blur of the text halo.
  - Type: number
  - Default Value: `0`

* `textTranslate`:
  - Description: Translation of the text.
  - Type: array of numbers
  - Default Value: `[0, 0]`

* `textTranslateAnchor`:
  - Description: Anchor for text translation.
  - Type: enum
  - Default Value: `map`
  - Supported Values: `map`, `viewport`
```

--------------------------------

### VectorSource.features() Example

Source: https://maplibre.org/maplibre-react-native/docs/components/sources/vector-source

Demonstrates how to use the `features` method of the VectorSource component to retrieve features from specified layers. This is useful for interactive map features or data analysis.

```javascript
vectorSource.features(["id1", "id2"]);

```

--------------------------------

### MapLibre RN: Get Cluster Children from ShapeSource

Source: https://maplibre.org/maplibre-react-native/docs/components/sources/shape-source

Retrieves the child features of a cluster, typically representing the data points at the next zoom level. Returns a FeatureCollection.

```APIDOC
getClusterChildren(feature)
  - Returns the FeatureCollection from the cluster (on the next zoom level).
  - Parameters:
    - feature (GeoJSON.Feature, Required): The feature cluster to expand.
  - Returns: A FeatureCollection containing the child features of the cluster.
```

```javascript
const collection = await shapeSource.getClusterChildren(clusterId);
```

--------------------------------

### MapLibre React Native Camera Component API

Source: https://maplibre.org/maplibre-react-native/docs/components/general/camera

Detailed API documentation for the MapLibre React Native Camera component. It outlines all available props for configuring the map's view and methods for camera manipulation, including animation and fitting bounds.

```APIDOC
<Camera /> Component API:

Props:
  centerCoordinate: GeoJSON.Position
    Type: GeoJSON.Position
    Default: none
    Required: false
    Description: The location on which the map should center.

  bounds: CameraBoundsWithPadding
    Type: CameraBoundsWithPadding
    Default: none
    Required: false
    Description: The corners of a box around which the map should bound. Contains padding props for backwards compatibility; the root `padding` prop should be used instead.

  heading: number
    Type: number
    Default: none
    Required: false
    Description: The heading (orientation) of the map.

  pitch: number
    Type: number
    Default: none
    Required: false
    Description: The pitch of the map.

  zoomLevel: number
    Type: number
    Default: none
    Required: false
    Description: The zoom level of the map.

  padding: CameraPadding
    Type: CameraPadding
    Default: none
    Required: false
    Description: The viewport padding in points.

  animationDuration: number
    Type: number
    Default: none
    Required: false
    Description: The duration the map takes to animate to a new configuration.

  animationMode: "flyTo" | "easeTo" | "linearTo" | "moveTo"
    Type: "flyTo" | "easeTo" | "linearTo" | "moveTo"
    Default: none
    Required: false
    Description: The easing or path the camera uses to animate to a new configuration.

  defaultSettings: CameraStop
    Type: CameraStop
    Default: none
    Required: false
    Description: Default view settings applied on camera.

  minZoomLevel: number
    Type: number
    Default: none
    Required: false
    Description: Minimum zoom level of the map.

  maxZoomLevel: number
    Type: number
    Default: none
    Required: false
    Description: Maximum zoom level of the map.

  maxBounds: CameraBounds
    Type: CameraBounds
    Default: none
    Required: false
    Description: Restrict map panning so that the center is within these bounds.

  followUserLocation: boolean
    Type: boolean
    Default: none
    Required: false
    Description: Should the map orientation follow the user's.

  followUserMode: UserTrackingMode
    Type: UserTrackingMode
    Default: none
    Required: false
    Description: The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `UserTrackingMode` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect.

  followZoomLevel: number
    Type: number
    Default: none
    Required: false
    Description: The zoomLevel on map while followUserLocation is set to `true`.

  followPitch: number
    Type: number
    Default: none
    Required: false
    Description: The pitch on map while followUserLocation is set to `true`.

  followHeading: number
    Type: number
    Default: none
    Required: false
    Description: The heading on map while followUserLocation is set to `true`.

  onUserTrackingModeChange: func
    Type: func
    Default: none
    Required: false
    Description: Triggered when `followUserLocation` or `followUserMode` changes *signature:*`(event:MapLibreRNEvent) => void`

Methods:
  fitBounds(ne, sw, [padding], [animationDuration])
    Description: Map camera transitions to fit provided bounds.
    Arguments:
      ne: GeoJSON.Position (Required) - North east coordinate of bound.
      sw: GeoJSON.Position (Required) - South west coordinate of bound.
      padding: number | number[] (Optional) - Padding for the bounds.
      animationDuration: number (Optional) - Duration of camera animation.
    Examples:
      cameraRef.current?.fitBounds([lng, lat], [lng, lat]);
      cameraRef.current?.fitBounds([lng, lat], [lng, lat], 20, 1000); // padding for all sides
      cameraRef.current?.fitBounds(
        [lng, lat],
        [lng, lat],
        [verticalPadding, horizontalPadding],
        1000,
      );
      cameraRef.current?.fitBounds(
        [lng, lat],
        [lng, lat],
        [top, right, bottom, left],
        1000,
      );
```

--------------------------------

### Raster Fade Duration

Source: https://maplibre.org/maplibre-react-native/docs/components/layers/raster-layer

Sets the fade duration when a new tile is added to the raster layer, or when a video source is started or its coordinates are updated. The duration is specified in milliseconds.

```APIDOC
rasterFadeDuration: number
  - Fade duration when a new tile is added, or when a video is started or its coordinates are updated.
  - Type: number
  - Default Value: 300
  - Units: milliseconds
  - Minimum: 0
  - Expression Parameters: zoom
```

--------------------------------

### Android Native Customizations via Gradle

Source: https://maplibre.org/maplibre-react-native/docs/setup/library-customizations

Demonstrates setting MapLibre React Native native properties in Android's `gradle.properties` file. Properties are prefixed with `org.maplibre.reactnative` to configure the native SDK.

```properties
+ org.maplibre.reactnative.nativeVersion=x.x.x

```

--------------------------------

### FillLayer Component API Documentation

Source: https://maplibre.org/maplibre-react-native/docs/components/layers/fill-layer

Comprehensive API documentation for the MapLibre React Native FillLayer component. This entry details the component's props, including sourceID and style, and lists all available style attributes with their types, default values, and descriptions.

```APIDOC
Component: FillLayer

Description: Renders one or more filled (and optionally stroked) polygons on the map.

Props:
  style: FillLayerStyle
    Description: Customizable style attributes for the fill layer.
    Default: none
    Required: false

  sourceID: FIX ME UNKNOWN TYPE
    Description: FIX ME NO DESCRIPTION
    Default: MLRNModule.StyleSource.DefaultSourceID
    Required: false

Styles:
  fillSortKey:
    Description: Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
    Type: number
    Expression Parameters: zoom, feature

  visibility:
    Description: Whether this layer is displayed.
    Type: enum
    Default Value: visible
    Supported Values:
      - visible: The layer is shown.
      - none: The layer is not shown.

  fillAntialias:
    Description: Whether or not the fill should be antialiased.
    Type: boolean
    Default Value: true
    Expression Parameters: zoom

  fillOpacity:
    Description: The opacity of the entire fill layer. Affects the stroke opacity if used.
    Type: number
    Default Value: 1
    Minimum: 0
    Maximum: 1
    Expression Parameters: zoom, feature, feature-state

  fillOpacityTransition:
    Description: The transition affecting any changes to this layer’s fillOpacity property.
    Type: { duration, delay }
    Units: milliseconds
    Default Value: { duration: 300, delay: 0 }

  fillColor:
    Description: The color of the filled part of this layer. Can be specified as rgba. Does not affect stroke opacity.
    Type: color
    Default Value: #000000
    Disabled By: fillPattern
    Expression Parameters: zoom, feature, feature-state

  fillColorTransition:
    Description: The transition affecting any changes to this layer’s fillColor property.
    Type: { duration, delay }
    Units: milliseconds
    Default Value: { duration: 300, delay: 0 }

  fillOutlineColor:
    Description: The outline color of the fill. Matches fillColor if unspecified.
    Type: color
    Disabled By: fillPattern
    Expression Parameters: zoom, feature, feature-state

  fillOutlineColorTransition:
    Description: The transition affecting any changes to this layer’s fillOutlineColor property.
    Type: { duration, delay }
    Units: milliseconds
    Default Value: { duration: 300, delay: 0 }

  fillTranslate:
    Description: The distance above the map plane that the fill is extruded.
    Type: [number, number]
    Default Value: [0, 0]
    Expression Parameters: zoom

  fillTranslateAnchor:
    Description: Defines the origin of the fill-translate property.
    Type: enum
    Default Value: map
    Supported Values:
      - map: The fill-translate property is relative to the map.
      - viewport: The fill-translate property is relative to the viewport.

  fillPattern:
    Description: Name of the image assigned to the pattern. Requires an image to be registered with the map.
    Type: string
    Disabled By: fillColor, fillOutlineColor
    Expression Parameters: zoom, feature, feature-state
```

--------------------------------

### MapLibre RN: Get Cluster Expansion Zoom for ShapeSource

Source: https://maplibre.org/maplibre-react-native/docs/components/sources/shape-source

Calculates and returns the zoom level required to expand a given cluster feature. This is useful for visualizing clustered data points.

```APIDOC
getClusterExpansionZoom(feature)
  - Returns the zoom needed to expand the cluster.
  - Parameters:
    - feature (GeoJSON.Feature, Required): The feature cluster to expand.
  - Returns: The zoom level required to expand the cluster.
```

```javascript
const zoom = await shapeSource.getClusterExpansionZoom(clusterId);
```

--------------------------------

### MapLibre GL JS Line Layer Properties

Source: https://maplibre.org/maplibre-react-native/docs/components/layers/line-layer

Comprehensive documentation for MapLibre GL JS line layer styling properties. This entry groups related properties for line appearance and behavior, including transitions.

```APIDOC
lineOpacityTransition:
  Description: The transition affecting any changes to this layer’s lineOpacity property.
  Type: { duration, delay }
  Units: milliseconds
  Default Value: { duration: 300, delay: 0 }

lineColor:
  Description: The color with which the line will be drawn.
  Type: color
  Default Value: #000000
  Disabled By: linePattern
  Expression Parameters: zoom, feature, feature-state

lineColorTransition:
  Description: The transition affecting any changes to this layer’s lineColor property.
  Type: { duration, delay }
  Units: milliseconds
  Default Value: { duration: 300, delay: 0 }

lineTranslate:
  Description: The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.
  Type: number[]
  Default Value: 0,0
  Units: pixels
  Expression Parameters: zoom

lineTranslateTransition:
  Description: The transition affecting any changes to this layer’s lineTranslate property.
  Type: { duration, delay }
  Units: milliseconds
  Default Value: { duration: 300, delay: 0 }

lineTranslateAnchor:
  Description: Controls the frame of reference for lineTranslate.
  Type: enum
  Default Value: map
  Supported Values:
    - map: The line is translated relative to the map.
    - viewport: The line is translated relative to the viewport.
  Requires: lineTranslate
  Expression Parameters: zoom

lineWidth:
  Description: Stroke thickness.
  Type: number
  Default Value: 1
  Units: pixels
  Minimum: 0
  Supported Style Functions: camera
  Expression Parameters: zoom, feature, feature-state

lineWidthTransition:
  Description: The transition affecting any changes to this layer’s lineWidth property.
  Type: { duration, delay }
  Units: milliseconds
  Default Value: { duration: 300, delay: 0 }

lineGapWidth:
  Description: Draws a line casing outside of a line's actual path. Value indicates the width of the inner gap.
  Type: number
  Default Value: 0
  Units: pixels
  Minimum: 0
  Expression Parameters: zoom, feature, feature-state

lineGapWidthTransition:
  Description: The transition affecting any changes to this layer’s lineGapWidth property.
  Type: { duration, delay }
  Units: milliseconds
  Default Value: { duration: 300, delay: 0 }

lineOffset:
  Description: The line's offset. For linear features, a positive value offsets the line to the right, relative to the direction of the line, and a negative value to the left. For polygon features, a positive value results in an inset, and a negative value results in an outset.
  Type: number
  Default Value: 0
  Units: pixels
  Expression Parameters: zoom, feature, feature-state

lineOffsetTransition:
  Description: The transition affecting any changes to this layer’s lineOffset property.
  Type: { duration, delay }
  Units: milliseconds
  Default Value: { duration: 300, delay: 0 }

lineBlur:
  Description: Blur applied to the line, in pixels.
  Type: number
  Default Value: 0
  Units: pixels
  Minimum: 0
  Expression Parameters: zoom, feature, feature-state

lineBlurTransition:
  Description: The transition affecting any changes to this layer’s lineBlur property.
  Type: { duration, delay }
  Units: milliseconds
  Default Value: { duration: 300, delay: 0 }

lineDasharray:
  Description: Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. Note that GeoJSON sources with lineMetrics: true specified won't render dashed lines to the expected scale. Also note that zoomDependent expressions will be evaluated only at integer zoom levels.
  Type: number[]
  Units: line widths
  Minimum: 0
  Disabled By: linePattern
  Expression Parameters: zoom

lineDasharrayTransition:
  Description: The transition affecting any changes to this layer’s lineDasharray property.
  Type: { duration, delay }
  Units: milliseconds
  Default Value: { duration: 300, delay: 0 }
```

--------------------------------

### MapLibre React Native Annotations Comparison

Source: https://maplibre.org/maplibre-react-native/docs/guides/annotations

This documentation entry summarizes the features and implementation details of different annotation types available in MapLibre React Native. It compares CircleLayer, SymbolLayer, PointAnnotation, and MarkerView based on their capabilities like image usage, children support, interaction, z-index control, clustering, expression styling, and platform-specific implementations.

```APIDOC
Annotation Type: CircleLayer
Description: A layer for rendering circles.
Features:
- Can use Images: ✗
- children RN View: ✗
- Interactions: Click
- Control z-index: ✓
- Clustering: ✓
- Style with Expressions: ✓
Android Implementation: CircleLayer (https://maplibre.org/maplibre-native/android/api/-map-libre%20-native%20-android/org.maplibre.android.style.layers/-circle-layer/index.html)
iOS Implementation: MLNCircleStyleLayer (https://maplibre.org/maplibre-native/ios/latest/documentation/maplibre/mlncirclestylelayer/)
```

```APIDOC
Annotation Type: SymbolLayer
Description: A layer for rendering symbols, often used for points with icons or text.
Features:
- Can use Images: ✓
- children RN View: iOS: Static
- Interactions: Click
- Control z-index: ✓
- Clustering: ✓
- Style with Expressions: ✓
Android Implementation: SymbolLayer (https://maplibre.org/maplibre-native/android/api/-map-libre%20-native%20-android/org.maplibre.android.style.layers/-symbol-layer/index.html)
iOS Implementation: MLNSymbolStyleLayer (https://maplibre.org/maplibre-native/ios/latest/documentation/maplibre/mlnsymbolstylelayer/)
```

```APIDOC
Annotation Type: PointAnnotation
Description: Represents a point on the map, supporting custom views.
Features:
- Can use Images: ✗
- children RN View: iOS: Interactive, Android: Static
- Interactions: iOS: Complete, Android: Click, drag, callout
- Control z-index: iOS: Always on top, Android: Not available
- Clustering: ✗
- Style with Expressions: ✗
Android Implementation: annotation.Symbol (https://github.com/maplibre/maplibre-plugins-android/blob/main/plugin-annotation/src/main/java/org/maplibre/android/plugins/annotation/Symbol.java)
iOS Implementation: MLNAnnotationView (https://maplibre.org/maplibre-native/ios/latest/documentation/maplibre/mlnannotationview/)
```

```APIDOC
Annotation Type: MarkerView
Description: A marker that allows embedding arbitrary React Native Views.
Features:
- Can use Images: ✗
- children RN View: Interactive
- Interactions: Only children RN View is interactive
- Control z-index: Always on top
- Clustering: ✗
- Style with Expressions: ✗
Android Implementation: annotation.MarkerView (https://github.com/maplibre/maplibre-plugins-android/blob/main/plugin-markerview/src/main/java/org/maplibre/android/plugins/markerview/MarkerView.java)
iOS Implementation: MLNAnnotationView (https://maplibre.org/maplibre-native/ios/latest/documentation/maplibre/mlnannotationview/)
```

--------------------------------

### iOS Native Customizations via Podfile

Source: https://maplibre.org/maplibre-react-native/docs/setup/library-customizations

Shows how to set MapLibre React Native global variables in the iOS `Podfile`. These variables, prefixed with `$MLRN`, control native dependencies and configurations.

```ruby
+ $MLRN_NATIVE_VERSION="x.x.x"
 target "AppName" do


```

--------------------------------

### Expo Plugin Configuration for Custom Headers

Source: https://maplibre.org/maplibre-react-native/docs/guides/custom-http-headers

Example of how to configure custom HTTP headers for MapLibre React Native within an Expo project's app.json file, specifying headers to be added via the custom plugin.

```json
{
  "plugins": [
    [
      "./plugins/withCustomHeadersPlugin.ts",
      {
        "headers": [
          ["Authorization", "sECrEt"]
        ]
      }
    ]
  ]
}
```

--------------------------------

### Configure SPM Spec for MapLibre Native

Source: https://maplibre.org/maplibre-react-native/docs/setup/library-customizations

Defines the Swift Package Manager (SPM) specification for MapLibre React Native, enabling custom control over the native library version and distribution source.

```SPM
$MLRN_SPM_SPEC = {
  url: "https://github.com/maplibre/maplibre-gl-native-distribution",
  requirement: {
    kind: "upToNextMajorVersion",
    minimumVersion: "x.x.x"
  },
  product_name: "MapLibre"
}
```
Tokens:
Raw