> ## Documentation Index
> Fetch the complete documentation index at: https://docs.remind.tools/llms.txt
> Use this file to discover all available pages before exploring further.

# MapBox Integration

> 3D maps and location services integration

# MapBox Integration

Comprehensive guide for integrating MapBox GL in Remind Tools for advanced mapping features.

## Setup

### Configuration

```bash theme={null}
# .env file
MAPBOX_ACCESS_TOKEN=your_mapbox_token
MAPBOX_STYLE_URL=mapbox://styles/mapbox/streets-v11
```

### Platform Setup

<Tabs>
  <Tab title="iOS">
    ```xml theme={null}
    <!-- Info.plist -->
    <key>MBXAccessToken</key>
    <string>$(MAPBOX_ACCESS_TOKEN)</string>
    ```
  </Tab>

  <Tab title="Android">
    ```xml theme={null}
    <!-- strings.xml -->
    <string name="mapbox_access_token">YOUR_TOKEN</string>
    ```

    ```gradle theme={null}
    // build.gradle
    implementation 'com.mapbox.maps:android:10.0.0'
    ```
  </Tab>

  <Tab title="Web">
    ```html theme={null}
    <!-- index.html -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
    ```
  </Tab>
</Tabs>

## Map Implementation

### Basic Map

```dart theme={null}
import 'package:mapbox_gl/mapbox_gl.dart';

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MapboxMap(
      accessToken: Environment.mapboxToken,
      initialCameraPosition: CameraPosition(
        target: LatLng(48.8566, 2.3522), // Paris
        zoom: 12.0,
      ),
      onMapCreated: (controller) {
        // Map is ready
      },
    );
  }
}
```

### 3D Buildings

```dart theme={null}
void enable3DBuildings(MapboxMapController controller) {
  controller.addLayer(
    'buildings-3d',
    '3d-buildings',
    FillExtrusionLayerProperties(
      fillExtrusionColor: '#aaa',
      fillExtrusionHeight: [
        'interpolate',
        ['linear'],
        ['zoom'],
        15, 0,
        15.05, ['get', 'height']
      ],
      fillExtrusionOpacity: 0.6,
    ),
  );
}
```

## Features

### Place Search

```dart theme={null}
Future<List<Place>> searchPlaces(String query) async {
  final response = await http.get(
    Uri.parse(
      'https://api.mapbox.com/geocoding/v5/mapbox.places/$query.json'
      '?access_token=${Environment.mapboxToken}'
    ),
  );
  
  final data = json.decode(response.body);
  return (data['features'] as List)
    .map((f) => Place.fromJson(f))
    .toList();
}
```

### Route Planning

```dart theme={null}
Future<Route> getRoute({
  required LatLng origin,
  required LatLng destination,
  String profile = 'driving',
}) async {
  final url = 'https://api.mapbox.com/directions/v5/mapbox/$profile/'
    '${origin.longitude},${origin.latitude};'
    '${destination.longitude},${destination.latitude}'
    '?geometries=geojson&access_token=${Environment.mapboxToken}';
  
  final response = await http.get(Uri.parse(url));
  final data = json.decode(response.body);
  
  return Route.fromJson(data['routes'][0]);
}
```

### Custom Markers

```dart theme={null}
void addCustomMarker(
  MapboxMapController controller,
  LatLng position,
  Widget markerWidget,
) async {
  final bytes = await _widgetToImage(markerWidget);
  
  await controller.addImage('custom-marker', bytes);
  
  await controller.addSymbol(
    SymbolOptions(
      geometry: position,
      iconImage: 'custom-marker',
      iconSize: 1.0,
    ),
  );
}
```

## Offline Maps

```dart theme={null}
class OfflineMapManager {
  Future<void> downloadRegion({
    required LatLngBounds bounds,
    required double minZoom,
    required double maxZoom,
  }) async {
    await installOfflineMapTiles(
      accessToken: Environment.mapboxToken,
      bounds: bounds,
      minZoom: minZoom,
      maxZoom: maxZoom,
      mapStyleUrl: Environment.mapboxStyleUrl,
    );
  }
  
  Future<List<OfflineRegion>> getOfflineRegions() async {
    return await getListOfOfflineMapTiles(
      accessToken: Environment.mapboxToken,
    );
  }
}
```

## Performance Optimization

### Clustering

```dart theme={null}
void setupClustering(MapboxMapController controller) {
  controller.addSource(
    'points',
    GeojsonSourceProperties(
      data: pointsGeoJson,
      cluster: true,
      clusterMaxZoom: 14,
      clusterRadius: 50,
    ),
  );
  
  // Add cluster layers
  controller.addLayer(
    'clusters',
    'points',
    CircleLayerProperties(
      circleColor: '#51bbd6',
      circleRadius: [
        'step',
        ['get', 'point_count'],
        20, 100,
        30, 750,
        40,
      ],
    ),
  );
}
```

### Tile Caching

```dart theme={null}
class MapCacheManager {
  static const _cacheSize = 100 * 1024 * 1024; // 100MB
  
  Future<void> configureCaching() async {
    await setOfflineMapTileCountLimit(_cacheSize);
    await setHttpConnectionCount(8);
  }
}
```

## Best Practices

1. **Implement zoom-based rendering** for performance
2. **Use vector tiles** for better scaling
3. **Cache map tiles** for offline use
4. **Cluster markers** when displaying many points
5. **Optimize style layers** to reduce rendering overhead
6. **Handle location permissions** properly


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.