[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9463":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},9463,"maps","flutter-mapbox-gl\u002Fmaps","flutter-mapbox-gl","A Mapbox GL flutter package for creating custom maps",null,"Dart",1061,544,28,19,0,1,56.31,"Other",false,"master",true,[],"2026-06-12 04:00:44","# Flutter Mapbox GL\n\n> **Please note that this project is community driven and is not an official Mapbox product.** \n> \n> We welcome [feedback](https:\u002F\u002Fgithub.com\u002Ftobrun\u002Fflutter-mapbox-gl\u002Fissues) and contributions.\n\n\n## Table of contents\n\n- [Flutter Mapbox GL](#flutter-mapbox-gl)\n  - [Table of contents](#table-of-contents)\n  - [Introduction](#introduction)\n  - [Setting up](#setting-up)\n    - [Mobile](#mobile)\n      - [Secret Mapbox access token](#secret-mapbox-access-token)\n    - [Web](#web)\n    - [All platforms](#all-platforms)\n      - [Public Mapbox access token](#public-mapbox-access-token)\n  - [Supported API](#supported-api)\n  - [Map Styles](#map-styles)\n  - [Offline Sideloading](#offline-sideloading)\n  - [Downloading Offline Regions](#downloading-offline-regions)\n  - [Create a static map snapshot](#create-a-static-map-snapshot)\n  - [Location features](#location-features)\n    - [Android](#android)\n    - [iOS](#ios)\n  - [Running the example code](#running-the-example-code)\n  - [Contributing](#contributing)\n\n## Introduction\n\nThis 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](https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-gl-native). For web, we rely on [mapbox-gl-js](https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-gl-js). This project only supports a subset of the API exposed by these libraries. \n\n![screenshot.png](screenshot.png)\n\n## Setting up\n\nThis package is available on [pub.dev](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fmapbox_gl).\n\nGet it by running the following command:\n\n```\nflutter pub add mapbox_gl\n```\n\n### Mobile\n\n#### Secret Mapbox access token\n\nA secret access token with the `Downloads: Read` scope is required for the underlying Mapbox SDKs to be downloaded.\nInformation on setting it up is available in the Mapbox documentation:\n[Android](https:\u002F\u002Fdocs.mapbox.com\u002Fandroid\u002Fmaps\u002Fguides\u002Finstall\u002F),\n[iOS](https:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Fguides\u002Finstall\u002F).\n\nIf the properly configured token is not present,\nthe build process fails with one the following errors *(for Android\u002FiOS respectively)*:\n\n```\n* What went wrong:\nA problem occurred evaluating project ':mapbox_gl'.\n> SDK Registry token is null. See README.md for more information.\n```\n\n```\n[!] Error installing Mapbox-iOS-SDK\ncurl: (22) The requested URL returned error: 401 Unauthorized\n```\n\n### Web\n\nInclude the JavaScript and CSS files in the `\u003Chead>` of your `index.html` file:\n\n```\n\u003Cscript src='https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv2.8.2\u002Fmapbox-gl.js'>\u003C\u002Fscript>\n\u003Clink href='https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv2.8.2\u002Fmapbox-gl.css' rel='stylesheet' \u002F>\n\n\u003Cstyle>\n   .mapboxgl-map {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\u003C\u002Fstyle>\n```\n\n*Note: Look for latest version in [Mapbox GL JS documentation](https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fguides\u002F).*\n\n### All platforms\n\n#### Public Mapbox access token\n\nA public access token must be provided to a MapboxMap widget for retrieving styles and resources.\nWhile you can hardcode it directly into source files,\nit's good practise to retrieve access tokens from some external source\n(e.g. a config file or an environment variable).\nThe example app uses the following technique:\n\nThe access token is passed via the command line arguments when either building\n\n```\nflutter build \u003Cplatform> --dart-define ACCESS_TOKEN=YOUR_TOKEN_HERE\n```\n\nor running the application\n\n```\nflutter run --dart-define ACCESS_TOKEN=YOUR_TOKEN_HERE\n```\n\nThen it's retrieved in Dart:\n```\nMapboxMap(\n  ...\n  accessToken: const String.fromEnvironment(\"ACCESS_TOKEN\"),\n  ...\n)\n```\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| Style DSL   | :x:  | :x:  | :x:  |\n| Raster Layer  | :white_check_mark:  | :white_check_mark:  | :white_check_mark: | \n| Symbol Layer | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Circle Layer | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Line Layer | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Fill Layer | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Fill Extrusion Layer | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Hillshade Layer | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Heatmap Layer   | :white_check_mark:  | :white_check_mark:  | :white_check_mark:  |\n| Vector Source   |  :white_check_mark:  | :white_check_mark:  | :white_check_mark:  |\n| Raster Source  |  :white_check_mark:  | :white_check_mark:  | :white_check_mark:  |\n| GeoJson Source  | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Image Source   | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Expressions   |  :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Symbol Annotation | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Circle Annotation | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Line Annotation | :white_check_mark:   | :white_check_mark: | :white_check_mark: |\n| Fill Annotation | :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):\u002F\u002F' or 'mapbox:\u002F\u002F'\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:\u002F\u002Fdocs.mapbox.com\u002Fios\u002Fmaps\u002Foverview\u002Foffline\u002F).\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\u002Fcache.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:\u002F\u002Fdocs.mapbox.com\u002Fplayground\u002Foffline-estimator\u002F.\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        \u002F\u002F ...\n      } else if (status.runtimeType == InProgress) {\n        int progress = (status as InProgress).progress.round();\n        \u002F\u002F ...\n      } else if (status.runtimeType == Error) {\n        \u002F\u002F ...\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:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v11',\n    );\n\n    downloadOfflineRegionStream(offlineRegion, onEvent);\n```\n## Create a static map snapshot\n\nThe snapshotManager generates static raster images of the map.\nEach snapshot image depicts a portion of a map defined by an SnapshotOptions object you provide.\n\n* Call `takeSnapshot` with predefined `SnapshotOptions`\n\n```   \n    final renderBox = mapKey.currentContext?.findRenderObject() as RenderBox;\n\n    final snapshotOptions = SnapshotOptions(\n      width: renderBox.size.width,\n      height: renderBox.size.height,\n      writeToDisk: true,\n      withLogo: false,\n    );\n    \n    final uri = await mapController?.takeSnapshot(snapshotOptions);\n```   \n\n## Location features\n### Android\nAdd the `ACCESS_COARSE_LOCATION` or `ACCESS_FINE_LOCATION` permission in the application manifest `android\u002Fapp\u002Fsrc\u002Fmain\u002FAndroidManifest.xml` to enable location features in an **Android** application:\n```\n\u003Cmanifest ...\n    \u003Cuses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" \u002F>\n    \u003Cuses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" \u002F>\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:\u002F\u002Fpub.dev\u002Fpackages\u002Flocation) 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\u002FRunner\u002FInfo.plist` to explain why you need access to their location data:\n\n```\nxml ...\n    \u003Ckey>NSLocationWhenInUseUsageDescription\u003C\u002Fkey>\n    \u003Cstring>[Your explanation here]\u003C\u002Fstring>\n```\n\n[Recommended](https:\u002F\u002Fdocs.mapbox.com\u002Fhelp\u002Ftutorials\u002Ffirst-steps-ios-sdk\u002F#display-the-users-location)  explanation about \"Shows your location on the map and helps improve the map\".\n\n## Flutter 3.x.x issues and experimental workarounds\nSince Flutter 3.x.x was introduced, it exposed some race conditions resulting in occasional crashes upon map disposal. The parameter `useDelayedDisposal` was introduced as a workaround for this issue until Flutter and\u002For Mapbox fix this issue properly. Use with caution - this is not yet production ready since several users still report crashes after using this workaround.\n\n## Running the example code\nSee the [documentation about this topic](doc\u002FRUNNING_EXAMPLE_CODE.md)\n\n## Contributing\n\nWe welcome contributions to this repository! If you're interested in helping build this Mapbox-Flutter integration, please read [the contribution guide](https:\u002F\u002Fgithub.com\u002Ftobrun\u002Fflutter-mapbox-gl\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md) to learn how to get started.\n","flutter-mapbox-gl\u002Fmaps 是一个用于在 Flutter 应用中创建自定义地图的插件。该项目基于 Dart 语言开发，支持 Android 和 iOS 平台上使用 mapbox-gl-native 集成，而在 Web 端则通过 mapbox-gl-js 实现交互式矢量地图展示。它提供了丰富的 API 子集来定制地图样式、加载离线区域以及获取位置信息等功能。适合需要跨平台地图显示能力的应用场景，如旅行应用、导航服务或任何需要地理可视化功能的产品。请注意，此项目为社区驱动，并非 Mapbox 官方产品。",2,"2026-06-11 03:22:58","top_language"]