MapLibre React Native

You can enable point clustering on a GeoJSONSource using the following props:

• cluster: Set to true to enable clustering.
• clusterRadius: The radius of each cluster in pixels. Default is 50. A value of 512 produces a radius equal to the width of a tile.
• clusterMinPoints: Minimum number of points required to form a cluster. Default is 2.
• clusterMaxZoom: The maximum zoom level at which to cluster points. Defaults to one zoom level less than maxzoom.
• clusterProperties: Custom properties for generated clusters. It uses the format { "property_name": [operator, map_expression] }, where operator is a custom reduce expression referencing the special ["accumulated"] value.

<GeoJSONSource
  data={myData}
  cluster={true}
  clusterRadius={50}
  clusterMinPoints={3}
  clusterMaxZoom={12}
  clusterProperties={{
    'population': ['sum', ['get', 'population']]
  }}
/>

When adding visual elements to a map, choose between four primary methods based on your requirements for interactivity, styling, and performance:

1. CircleLayer

Best for simple, high-performance circular points that need to support clustering and expression-based styling.

• Interactions: Click only.
• Styling: Supports MapLibre expressions and z-index control.
• Limitations: Cannot use images or React Native children views.

2. SymbolLayer

Best for icon-based annotations that require clustering or expression-based styling.

• Interactions: Click only.
• Styling: Supports images, expressions, and z-index control.
• Limitations: On iOS, the view is static (not interactive).

3. ViewAnnotation

Best for displaying React Native components on the map with varying levels of platform support.

• Interactions:
  • iOS: Complete interactivity.
  • Android: Click, drag, and callout support (view is static).
• Z-Index: Always on top on iOS; uses layer ID org.maplibre.annotations.points on Android.
• Limitations: Cannot use images or clustering; does not support expressions.

4. Marker

Best for highly interactive React Native components.

• Interactions: Only the children React Native view is interactive.
• Z-Index: Always on top.
• Limitations: Cannot use images, clustering, or expressions.

The ViewAnnotation component represents a one-dimensional shape located at a specific geographical coordinate. It is best used when you need interactive views at specific points on the map.

When to use ViewAnnotation vs other methods:

• Use ViewAnnotation when you need interactive views.
• Use Marker if you need interactive views (Note: on Android, ViewAnnotation child views are rendered onto a bitmap for performance).
• Use GeoJSONSource and SymbolLayer if you have a large number of points or use static images, as they offer significantly better performance.

ViewAnnotation expects one child (the view to be anchored) and an optional second child which acts as a callout.

<ViewAnnotation lngLat={[longitude, latitude]}>
  <View>
    <Text>My Annotation</Text>
  </View>
  {/* Optional Callout */}
  <View>
    <Text>Callout Content</Text>
  </View>
</ViewAnnotation>

The TransformRequestManager allows you to intercept and modify HTTP requests made by MapLibre. It supports three types of transformations, which are applied in a specific order:

1. URL Transforms: Search and replace operations on the URL string.
2. URL Search Params: Appending query parameters to the URL.
3. HTTP Headers: Adding custom headers to the request.

Important details:

• Order of Operations: URL transforms are applied first, followed by search parameters, and finally HTTP headers.
• Pipeline Effect: Each transformation is applied to the URL resulting from the previous step. For example, a URL transform might change a domain, and a subsequent search parameter transform will match against that new domain.
• In-place Updates: If you call an add* method with an id that already exists, the manager updates the existing transformation in-place. This preserves its position in the pipeline, making it safe to update tokens or domains without disrupting the order of other transforms.
• Debugging: To see which transforms are being applied to your requests, set the log level to "debug" using LogManager.

LogManager.setLogLevel("debug");