DOCSEARCHbyAlgolia
Submit Docs

@rnmapbox/maps Documentation

website·Indexed 29 days ago

https://rnmapbox.github.io

Documentation for @rnmapbox/maps, providing a set of React Native components for Mapbox. It includes detailed API references for map layers (SymbolLayer, FillLayer, LineLayer, CircleLayer, HeatmapLayer, ModelLayer), data sources (ShapeSource, RasterSource, ImageSource), and utility managers for offline tiles, snapshots, and location tracking.

Tokens
68.3K
Snippets
351
Records
511
Agent score
72%

What's inside @rnmapbox/maps

  1. Overview of VectorSource component

    The VectorSource component is a map content source that supplies tiled vector data in Mapbox Vector Tile format. The location and metadata for these tiles are defined either via component props or through an external file conforming to the TileJSON specification.
    import { VectorSource } from '@rnmapbox/maps';

  2. Overview of RasterParticleLayer

    The RasterParticleLayer component renders a particle animation driven by velocity data from a raster array source. It is typically used for visualizing directional flow data such as wind patterns or ocean currents. This component is experimental and requires Mapbox Maps SDK v11.4.0 or later.
    import { RasterParticleLayer } from '@rnmapbox/maps';

  3. Overview of the Viewport component

    The Viewport component from @rnmapbox/maps provides a structured approach to organizing camera management logic using states and transitions. The viewport exists in one of three conditions: idle, in a specific state (managed by a ViewportState), or transitioning between states.
    import { Viewport } from '@rnmapbox/maps';

  4. Overview of SkyLayer component

    The SkyLayer component from @rnmapbox/maps creates a spherical dome around the map. This layer is always rendered behind all other layers.
    import { SkyLayer } from '@rnmapbox/maps';

  5. Manage tile storage and disk quotas with TileStore

    The tileStore object from @rnmapbox/maps manages the downloading and local storage of tile-related API requests. It enforces a disk usage quota, meaning older tiles may be deleted from the disk to make room for new downloads. Developers can use this interface to configure disk quotas and other storage options.
    import { tileStore } from '@rnmapbox/maps';

  8. Use CameraGestureObserver to detect map steady state

    The CameraGestureObserver is a unified native observer optimized for detecting when a map has stopped moving. It is primarily used to trigger actions once gestures or animations have ceased and the map is 'steady'.
    import { CameraGestureObserver } from '@rnmapbox/maps';

<CameraGestureObserver 
  onMapSteady={(event) => console.log('Map is steady', event)} 
/>

  9. Use RasterSource to add raster image tiles to a map

    The RasterSource component is a map content source that supplies raster image tiles. It can be configured using an option dictionary or an external file conforming to the TileJSON specification.
    import { RasterSource } from '@rnmapbox/maps';

<RasterSource id="my-raster-source" url="https://example.com/tiles.json" />

  10. Render data-driven circles with CircleLayer

    Use the Circle Layer to render circles on a map where the radius and color are determined by data-driven expressions. This allows the visual properties of each circle to change based on the underlying data associated with the feature.

  11. Configure the Callout component in @rnmapbox/maps

    The Callout component displays information about a selected annotation near that annotation. It requires a title prop to display text within the default callout bubble.
    import { Callout } from '@rnmapbox/maps';

<Callout title="Annotation Title" />

  12. Monitor offline pack download status

    When creating an offline pack, the progress callback provides an offlineRegionStatus object containing real-time metrics about the download. The state of the download can be verified using Mapbox.OfflinePackDownloadState constants.
    // Example of checking the download state
switch (offlineRegionStatus.state) {
  case Mapbox.OfflinePackDownloadState.Active: 
    console.log('Download is currently active');
    break;
  case Mapbox.OfflinePackDownloadState.Complete: 
    console.log('Download finished');
    break;
  default: 
    console.log('Inactive');
}

// Available status properties:
// offlineRegionStatus.percentage: The percentage of the pack downloaded
// offlineRegionStatus.completedResourceCount: Number of resources downloaded
// offlineRegionStatus.completedResourceSize: Size of downloaded resources
// offlineRegionStatus.completedTileCount: Number of tiles downloaded
// offlineRegionStatus.requiredResourceCount: Total resources required for the region