Please note that this project is based on a community driven Mapbox GL plugin. 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
[email protected]:cedarstudios/cedarmaps-flutter-sdk.git
- Add a CedarMaps clientID and clientSecret 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 CedarMaps vector tiles, which requires a CedarMaps clientID and a clientSecret. Obtain your free credentials on CedarMaps webpage.
The required way to provide your credentials is through the CedarMapsMap
constructor's clientID
and clientSecret
parameters. Note that you should always use the same credentials in your entire app.
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 | ✅ | ✅ |
Map styles can be supplied by setting the style
in the MapOptions
. The following styles are supported:
MapStyle.LIGHT
for light themed vector tiles, which is the default value.MapStyle.DARK
for dark themed vector tiles.MapStyle.LIGHT_RASTER
for light themed raster tiles.
To enable location features in an Android application:
You need to declare the ACCESS_COARSE_LOCATION
or ACCESS_FINE_LOCATION
permission in the AndroidManifest.xml and starting from Android API level 23 also request it at runtime. The plugin does not handle this for you. The example app uses the flutter 'location' plugin for this.
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.