{"id":22309093,"url":"https://github.com/borisgautier/mapbox_flutter","last_synced_at":"2025-09-02T15:31:03.249Z","repository":{"id":46723282,"uuid":"411158814","full_name":"BorisGautier/mapbox_flutter","owner":"BorisGautier","description":"A new flutter plugin for mapbox. You can use it for your map backgrounds inside flutter applications","archived":false,"fork":false,"pushed_at":"2021-09-28T12:10:19.000Z","size":453,"stargazers_count":6,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-17T15:31:20.492Z","etag":null,"topics":["android","dart","flutter","ios","mapbox","plugin","website"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/mapbox_flutter","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BorisGautier.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-28T06:12:38.000Z","updated_at":"2023-02-05T19:06:34.000Z","dependencies_parsed_at":"2022-09-09T18:00:21.530Z","dependency_job_id":null,"html_url":"https://github.com/BorisGautier/mapbox_flutter","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BorisGautier%2Fmapbox_flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BorisGautier%2Fmapbox_flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BorisGautier%2Fmapbox_flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BorisGautier%2Fmapbox_flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BorisGautier","download_url":"https://codeload.github.com/BorisGautier/mapbox_flutter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231797609,"owners_count":18428057,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","dart","flutter","ios","mapbox","plugin","website"],"created_at":"2024-12-03T20:16:52.600Z","updated_at":"2024-12-29T23:26:17.131Z","avatar_url":"https://github.com/BorisGautier.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mapbox Flutter\n\nThis project is inspired by [Mapbox_gl](https://github.com/tobrun/flutter-mapbox-gl)\n\nThis project also integrates the Null_Safety\n\nWe welcome [feedback](https://github.com/BorisGautier/mapbox_flutter/issues) and contributions.\n\n![mapbox.PNG](mapbox.PNG)\n\n## Running the example app\n\n- Install [Flutter](https://flutter.io/get-started/) and validate its installation with `flutter doctor`\n- Clone the repository with `git clone git@github.com:BorisGautier/mapbox_flutter.git`\n- Add a public Mapbox access token to the example app (see next section)\n- Add a secret Mapbox access token for downloading the SDK\n- Connect a mobile device or start an emulator, simulator or chrome\n- Locate the id of a the device with `flutter devices`\n- Run the app with `cd mapbox_flutter/example \u0026\u0026 flutter packages get \u0026\u0026 flutter run -d {device_id}`\n\n## Adding a Mapbox Access Token\n\nThis 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](https://www.mapbox.com/account/access-tokens/).\n\u003e **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!**\n\n\nThe **recommended** way to provide your access token is through the `accessToken` parameter of the `MapboxFlutterMap` constructor Note that you should always use the same token throughout your application.\n\n# Adding a Mapbox Access Token\n\nThis 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](https://www.mapbox.com/account/access-tokens/).\n\u003e **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!**\n\n### Providing your access token in Flutter (recommended)\n\nThe **recommended** way to provide your access token is through the `MapboxFlutterMap` constructor's `accessToken` parameter. Note that you should always use the same token throughout your entire app.\n\n***\n\n\n### Setting your access token through platform-specific files (old method)\n\nFor earlier versions you need to set your access token through platform-specific files as described below. This will also continue to work as a fallback on v0.8. You should **not** set the access token through both the constructor parameter and platform-specific files!\n\n#### Android\n\nAdd Mapbox access token configuration in the application manifest `example/android/app/src/main/AndroidManifest.xml`:\n\n```xml\n\u003cmanifest ...\n  \u003capplication ...\n    \u003cmeta-data android:name=\"com.mapbox.token\" android:value=\"YOUR_TOKEN_HERE\" /\u003e\n```\n\n### iOS\n\nAdd Mapbox access token configuration to the application Info.plist `example/ios/Runner/Info.plist`:\n\n```xml\n\u003ckey\u003eio.flutter.embedded_views_preview\u003c/key\u003e\n\u003ctrue/\u003e\n\u003ckey\u003eMGLMapboxAccessToken\u003c/key\u003e\n\u003cstring\u003eYOUR_TOKEN_HERE\u003c/string\u003e\n```\n\n### Web\n\nAdd Mapbox access token configuration to index.html `example/web/index.html`:\n\n```html\n\u003cbody\u003e\n  ...\n  \u003cscript\u003e\n    mapboxgl.accessToken = 'YOUR_TOKEN_HERE';\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n### SDK Download token\n\nYou must also [configure a secret access token having the Download: read\nscope][https://docs.mapbox.com/ios/maps/guides/install/]. If this configuration\nis not present, an error like the following appears during the iOS build.\n\n```\n[!] Error installing Mapbox-iOS-SDK\ncurl: (22) The requested URL returned error: 401 Unauthorized\n```\n\n## Avoid Android UnsatisfiedLinkError\n\nUpdate buildTypes in `android\\app\\build.gradle`\n\n```gradle\nbuildTypes {\n    release {\n        // other configs\n        ndk {\n            abiFilters 'armeabi-v7a','arm64-v8a','x86_64', 'x86'\n        }\n    }\n}\n```\n\n## Using the SDK in your project\n\nThis project is available on [pub.dev](https://pub.dev/packages/mapbox_flutter), follow the [instructions](https://flutter.dev/docs/development/packages-and-plugins/using-packages#adding-a-package-dependency-to-an-app) to integrate a package into your flutter application. For platform specific integration, use the flutter application under the example folder as reference.\n\n## Supported API\n\n| Feature | Android | iOS | Web |\n| ------ | ------ | ----- | ----- |\n| Style | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Camera | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Gesture | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| User Location | :white_check_mark: | :white_check_mark: | :white_check_mark: |\n| Symbol | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Circle | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Line | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Fill | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n\n## Map Styles\n\nMap styles can be supplied by setting the `styleString` in the `MapOptions`. The following formats are supported:\n\n1. Passing the URL of the map style. This can be one of the built-in map styles, also see `MapboxStyles` or a custom map style served remotely using a URL that start with 'http(s)://' or 'mapbox://'\n2. Passing the style as a local asset. Create a JSON file in the `assets` and add a reference in `pubspec.yml`. Set the style string to the relative path for this asset in order to load it into the map.\n3. Passing the style as a local file. create an JSON file in app directory (e.g. ApplicationDocumentsDirectory). Set the style string to the absolute path of this JSON file.\n4. Passing the raw JSON of the map style. This is only supported on Android.\n\n## Offline Sideloading\n\nSupport for offline maps is available by *\"side loading\"* the required map tiles and including them in your `assets` folder.\n\n* Create your tiles package by following the guide available [here](https://docs.mapbox.com/ios/maps/overview/offline/).\n\n* Place the tiles.db file generated in step one in your assets directory and add a reference to it in your `pubspec.yml` file.\n\n```\n   assets:\n     - assets/cache.db\n```\n\n* 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.\n\n```\n    try {\n      await installOfflineMapTiles(join(\"assets\", \"cache.db\"));\n    } catch (err) {\n      print(err);\n    }\n```\n\n## Downloading Offline Regions\n\nAn offline region is a defined region of a map that is available for use in conditions with limited or no network connection. Tiles for selected region, style and precision are downloaded from Mapbox using proper SDK methods and stored in application's cache.\n\n* Beware of selecting big regions, as size might be significant. Here is an online estimator https://docs.mapbox.com/playground/offline-estimator/.\n\n* Call `downloadOfflineRegionStream` with predefined `OfflineRegion` and optionally track progress in the callback function.\n\n```\n    final Function(DownloadRegionStatus event) onEvent = (DownloadRegionStatus status) {\n      if (status.runtimeType == Success) {\n        // ...\n      } else if (status.runtimeType == InProgress) {\n        int progress = (status as InProgress).progress.round();\n        // ...\n      } else if (status.runtimeType == Error) {\n        // ...\n      }\n    };\n\n    final OfflineRegion offlineRegion = OfflineRegion(\n      bounds: LatLngBounds(\n        northeast: LatLng(52.5050648, 13.3915634),\n        southwest: LatLng(52.4943073, 13.4055383),\n      ),\n      id: 1,\n      minZoom: 6,\n      maxZoom: 18,\n      mapStyleUrl: 'mapbox://styles/mapbox/streets-v11',\n    );\n\n    downloadOfflineRegionStream(offlineRegion, onEvent);\n```\n\n\n## Location features\n### Android\nAdd the `ACCESS_COARSE_LOCATION` or `ACCESS_FINE_LOCATION` permission in the application manifest `android/app/src/main/AndroidManifest.xml` to enable location features in an **Android** application:\n```\n\u003cmanifest ...\n    \u003cuses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" /\u003e\n    \u003cuses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" /\u003e\n```\n\nStarting from Android API level 23 you also need to request it at runtime. This plugin does not handle this for you. The example app uses the flutter ['location' plugin](https://pub.dev/packages/location) for this.\n\n### iOS\nTo enable location features in an **iOS** application:\n\nIf you access your users' location, you should also add the following key to `ios/Runner/Info.plist` to explain why you need access to their location data:\n\n```\nxml ...\n    \u003ckey\u003eNSLocationWhenInUseUsageDescription\u003c/key\u003e\n    \u003cstring\u003e[Your explanation here]\u003c/string\u003e\n```\n\nMapbox [recommends](https://docs.mapbox.com/help/tutorials/first-steps-ios-sdk/#display-the-users-location) the explanation \"Shows your location on the map and helps improve the map\".\n\n\n## Contributing\n\n- Open issue regarding proposed change.\n- Repo owner will contact you there.\n- If your proposed change is approved, Fork this repo and do changes.\n- Open PR against latest `dev` branch. Add nice description in PR.\n- You're done!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fborisgautier%2Fmapbox_flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fborisgautier%2Fmapbox_flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fborisgautier%2Fmapbox_flutter/lists"}