A new flutter plugin for mapbox. You can use it for your map backgrounds inside flutter applications

Overview

Mapbox Flutter

This project is inspired by Mapbox_gl

This project also integrates the Null_Safety

We welcome feedback and contributions.

mapbox.PNG

Running the example app

  • Install Flutter and validate its installation with flutter doctor
  • Clone the repository with git clone [email protected]:BorisGautier/mapbox_flutter.git
  • Add a public Mapbox access token to the example app (see next section)
  • Add a secret Mapbox access token for downloading the SDK
  • 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 mapbox_flutter/example && flutter packages get && flutter run -d {device_id}

Adding a Mapbox Access Token

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!

The 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.

Adding a Mapbox Access Token

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!

Providing your access token in Flutter (recommended)

The 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.


Setting your access token through platform-specific files (old method)

For 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!

Android

Add Mapbox access token configuration in the application manifest example/android/app/src/main/AndroidManifest.xml:

">
<manifest ...
  
  android
  :
  name=
  "com.mapbox.token" 
  android
  :
  value=
  "YOUR_TOKEN_HERE" />
 

iOS

Add Mapbox access token configuration to the application Info.plist example/ios/Runner/Info.plist:

<key>io.flutter.embedded_views_previewkey>
<true/>
<key>MGLMapboxAccessTokenkey>
<string>YOUR_TOKEN_HEREstring>

Web

Add Mapbox access token configuration to index.html example/web/index.html:

<body>
  ...
  <script>
    mapboxgl.accessToken = 'YOUR_TOKEN_HERE';
  script>
body>

SDK Download token

You must also [configure a secret access token having the Download: read scope][https://docs.mapbox.com/ios/maps/guides/install/]. If this configuration is not present, an error like the following appears during the iOS build.

[!] Error installing Mapbox-iOS-SDK
curl: (22) The requested URL returned error: 401 Unauthorized

Avoid Android UnsatisfiedLinkError

Update buildTypes in android\app\build.gradle

buildTypes {
    release {
        // other configs
        ndk {
            abiFilters 'armeabi-v7a','arm64-v8a','x86_64', 'x86'
        }
    }
}

Using the SDK in your project

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.

Supported API

Feature Android iOS Web
Style
Camera
Gesture
User Location
Symbol
Circle
Line
Fill

Map Styles

Map styles can be supplied by setting the styleString in the MapOptions. The following formats are supported:

  1. 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://'
  2. 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.
  3. 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.
  4. Passing the raw JSON of the map style. This is only supported on Android.

Offline Sideloading

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);
    }

Downloading Offline Regions

An 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.

  • Beware of selecting big regions, as size might be significant. Here is an online estimator https://docs.mapbox.com/playground/offline-estimator/.

  • Call downloadOfflineRegionStream with predefined OfflineRegion and optionally track progress in the callback function.

    final Function(DownloadRegionStatus event) onEvent = (DownloadRegionStatus status) {
      if (status.runtimeType == Success) {
        // ...
      } else if (status.runtimeType == InProgress) {
        int progress = (status as InProgress).progress.round();
        // ...
      } else if (status.runtimeType == Error) {
        // ...
      }
    };

    final OfflineRegion offlineRegion = OfflineRegion(
      bounds: LatLngBounds(
        northeast: LatLng(52.5050648, 13.3915634),
        southwest: LatLng(52.4943073, 13.4055383),
      ),
      id: 1,
      minZoom: 6,
      maxZoom: 18,
      mapStyleUrl: 'mapbox://styles/mapbox/streets-v11',
    );

    downloadOfflineRegionStream(offlineRegion, onEvent);

Location features

Android

Add 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:

">

  
    
  

Starting 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 for this.

iOS

To enable location features in an iOS application:

If 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:

xml ...
    
   
    NSLocationWhenInUseUsageDescription
   
    
   
    [Your explanation here]
   

Mapbox recommends the explanation "Shows your location on the map and helps improve the map".

Contributing

  • Open issue regarding proposed change.
  • Repo owner will contact you there.
  • If your proposed change is approved, Fork this repo and do changes.
  • Open PR against latest dev branch. Add nice description in PR.
  • You're done!
You might also like...

flutter_map plugin to request and display the users location and heading on the map

flutter_map plugin to request and display the users location and heading on the map

The plugin is discontinued. Feel free to fork it or checkout similar plugins. Flutter Map – Location plugin A flutter_map plugin to request and displa

Oct 11, 2022

A Flutter plugin for integrating Google Maps in iOS, Android and Web applications

flutter_google_maps A Flutter plugin for integrating Google Maps in iOS, Android and Web applications. It is a wrapper of google_maps_flutter for Mobi

Sep 26, 2022

A Flutter example to use Google Maps in iOS and Android apps via the embedded Google Maps plugin Google Maps Plugin

A Flutter example to use Google Maps in iOS and Android apps via the embedded Google Maps plugin Google Maps Plugin

maps_demo A Flutter example to use Google Maps in iOS and Android apps via the embedded Google Maps plugin Google Maps Plugin Getting Started Get an A

Feb 14, 2022

A flutter package for select a city from svg map.

A flutter package for select a city from svg map.

City Picker From Map A flutter package for select a city from svg map. Supported countries (+150) are here. Screenshots Getting Started In the pubspec

Nov 17, 2022

Flutter Tutorial - Google Map with Live Location Tracking

 Flutter Tutorial - Google Map with Live Location Tracking

Flutter Tutorial - Google Map with Live Location Tracking Build Google Map app with Live Location Tracking in Flutter. ✌   App Preview Android Preview

Dec 22, 2022

Map Picker for Flutter

Map Picker for Flutter

Map Pin Picker A Vendor-free map Library for Easy and Quick Usage. Follow the steps to integrate Google Maps (https://pub.dev/packages/google_maps_flu

Jul 15, 2022

Flutter Google Map Example - Day 41

Flutter Google Map Example - Day 41

Flutter Google Map Example - Day 41 class Afgprogrammer extends Flutter100DaysOfCode { video() { return { "title": "Flutter Google Map Exa

Jan 3, 2023

A Flutter map widget inspired by Leaflet

flutter_map A Dart implementation of Leaflet for Flutter apps. Installation Add flutter_map to your pubspec: dependencies: flutter_map: any # or the

Dec 28, 2022

🌍 Map location picker component for flutter Based on google_maps_flutter

🌍 Map location picker component for flutter Based on google_maps_flutter

google_map_location_picker Location picker using the official google_maps_flutter. I made This plugin because google deprecated Place Picker. Using Pu

Dec 5, 2022
Comments
  • no such module 'mapbox'

    no such module 'mapbox'

    Flutter 2.5.2 mapbox_flutter-1.0.0-dev.1.1

    Steps to recreate:

    • flutter create my-mapbox-sample
    • cd my-mapbox-sample
    • flutter pub add mapbox_flutter
    • flutter run

    The result is:

    Xcode's output:
    ↳
        /Users/theuser/flutter/.pub-cache/hosted/pub.dartlang.org/mapbox_flutter-1.0.0-dev.1.1/ios/Classes/Constants.swift:1:8: error: no such module 'mapbox'
        import mapbox
     
    
    bug 
    opened by d95sld95 0
Releases(v1.0.0-dev-1.0)
Owner
Boris Gautier
Software Development Engineer- Backend Developper- Flutter
Boris Gautier
MapBox-GL-flutter - MapBox GL flutter package

MapBox GL - Flutter This app use MapBox If you want to run this code, please rep

Brandon Rojas 2 May 29, 2022
A Flutter package for place search using MapBox Api and for Static map image

About This package provides easy api calls to MapBox Search API. Also, it contains an static map image generator ?? . Maki Icons can be used now in ma

Ketan Choyal 63 Dec 2, 2022
Stateful map controller for Flutter Map

Map controller Stateful map controller for Flutter Map. Manage markers, lines and polygons. View the web demo Usage import 'dart:async'; import 'packa

null 55 Sep 15, 2022
A map tour guide mobile app based on Flutter, an AI travel notes product integrating map tour guide and UGC.

A map tour guide mobile app based on Flutter, an AI travel notes product integrating map tour guide and UGC. Through the combination of 5g + AI, colle

null 24 Jan 14, 2022
Custom map markers - Custom Map Markers Using Flutter

Custom Map Markers Not only "Everything is a widget" also "Everywhere is a widge

null 8 Oct 19, 2022
Moved to https://github.com/tobrun/flutter-mapbox-gl

Please note that this project has moved. Please head to https://github.com/tobrun/flutter-mapbox-gl for updates. Flutter Mapbox GL Native This Flutter

Mapbox 258 Oct 16, 2022
A Mapbox GL flutter package for creating custom maps

Flutter Mapbox GL Please note that this project is community driven and is not an official Mapbox product. We welcome feedback and contributions. This

flutter-mapbox-gl 917 Dec 31, 2022
Plugin for 'flutter_map' providing advanced caching functionality, with ability to download map regions for offline use. Also includes useful prebuilt widgets.

flutter_map_tile_caching A plugin for the flutter_map library to provide an easy way to cache tiles and download map regions for offline use. Installa

Luka S 69 Jan 3, 2023
MapBox Search Widget

About This package provides some widgets to use in conjunction to mapbox_search library. Also, it contains an static map image generator ?? . Installi

Ketan Choyal 7 Apr 20, 2021
Flutter plugin to display a simple flat world map with animated points in real time

Flutter Simple Map Flutter plugin to display a simple flat world map with animated points in real time. Can be used as a presentation of online users,

Vladyslav Korniienko 7 Dec 8, 2022