Please note that this project is community driven and is not an official Mapbox product. We welcome feedback and contributions.
This Flutter plugin allows to show embedded interactive and customizable vector maps inside a Flutter widget. For the Android and iOS integration, we use mapbox-gl-native. For web, we rely on mapbox-gl-js. This project only supports a subset of the API exposed by these libraries.
- Install Flutter and validate its installation with
flutter doctor
- Clone the repository with
git clone [email protected]:mapbox/flutter-mapbox-gl.git
- Add a Mapbox access token to the example app (see next section)
- Connect a mobile device or start an emulator, simulator or chrome
- Locate the id of a the device with
flutter devices
- Run the app with `cd flutter_mapbox/example && flutter packages get && flutter run -d {device_id}``
This project uses Mapbox vector tiles, which requires a Mapbox account and a Mapbox access token. Obtain a free access token on your Mapbox account page.
Even if you do not use Mapbox vector tiles but vector tiles from a different source (like self-hosted tiles) with this plugin, you will need to specify any non-empty string as Access Token as explained below!
Add Mapbox access token configuration in the application manifest example/android/app/src/main/AndroidManifest.xml
:
<manifest ...
<application ...
<meta-data android:name="com.mapbox.token" android:value="YOUR_TOKEN_HERE" />
Add Mapbox access token configuration to the application Info.plist example/ios/Runner/Info.plist
:
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>MGLMapboxAccessToken</key>
<string>YOUR_TOKEN_HERE</string>
Add Mapbox access token configuration to index.html example/web/index.html
:
<body>
...
<script>
mapboxgl.accessToken = 'YOUR_TOKEN_HERE';
</script>
</body>
This project is available on pub.dev, follow the instructions to integrate a package into your flutter application. For platform specific integration, use the flutter application under the example folder as reference.
Feature | Android | iOS | Web |
---|---|---|---|
Style | ✅ | ✅ | ✅ |
Camera | ✅ | ✅ | ✅ |
Gesture | ✅ | ✅ | ✅ |
User Location | ✅ | ✅ | ✅ |
Symbol | ✅ | ✅ | ✅ |
Circle | ✅ | ✅ | ✅ |
Line | ✅ | ✅ | ✅ |
Fill |
Support for offline maps is available by "side loading" the required map tiles and including them in your assets
folder.
-
Create your tiles package by following the guide available here.
-
Place the tiles.db file generated in step one in your assets directory and add a reference to it in your
pubspec.yml
file.
assets:
- assets/cache.db
- Call
installOfflineMapTiles
when your application starts to copy your tiles into the location where Mapbox can access them. NOTE: This method should be called before the Map widget is loaded to prevent collisions when copying the files into place.
try {
await installOfflineMapTiles(join("assets", "cache.db"));
} catch (err) {
print(err);
}
To enable location features in an iOS application:
If you access your users' location, you should also add the following key to your Info.plist to explain why you need access to their location data:
<key>NSLocationWhenInUseUsageDescription</key>
<string>[Your explanation here]</string>
Mapbox recommends the explanation "Shows your location on the map and helps improve the map".
This README file currently houses all of the documentation for this Flutter project. Please visit mapbox.com/android-docs if you'd like more information about the Mapbox Maps SDK for Android and mapbox.com/ios-sdk for more information about the Mapbox Maps SDK for iOS.
- Need help with your code?: Look for previous questions on the #mapbox tag — or ask a new question.
- Have a bug to report? Open an issue. If possible, include a full log and information which shows the issue.
- Have a feature request? Open an issue. Tell us what the feature should do and why you want the feature.
We welcome contributions to this repository! If you're interested in helping build this Mapbox/Flutter integration, please read the contribution guide to learn how to get started.