Mapbox-flutter - A repository to demonstrate the use of Mapbox - it's Maps and Navigation SDKs in a Flutter application

Overview

MapBox Flutter

This repository contains code corresponding to the Youtube video - https://youtu.be/ashk0mYLx9c
If you loved this work then you can support me by liking and sharing the video, and starring this repository! 😇

🤔 So what is this app now?

MapBox Flutter demonstrates an implementation of MapBox in a Flutter application, along with its Maps and Navigation SDKs. We will do this by building a simple project involving a hungry you on a bicycle and a set of restaurants and cafes! 😂

👩🏻‍💻 Where are the instructions to get the app up and running?

Well open your browser and IDE, we have got a few things to do! Follow along as we get the app up and running.

  1. Head to https://account.mapbox.com and create a new account. Then go to your account page. You will see a public access token. This is something we will need later.

Screenshot 2022-02-11 at 9 03 04 PM

  1. In the same page click on Create a token and in the next page, add a new secret token. Make sure that the DOWNLOADS:READ permission is checked here. After you create the token, you must copy it somewhere else because you can only see this once.

Screenshot 2022-02-11 at 9 04 50 PM

  1. Now that you have both the tokens, you just need to replace them in appropriate places of the project code. Open the starter_code/mapbox_navigation folder and look for YOUR_PUBLIC_ACCESS_TOKEN and YOUR_SECRET_TOKEN in the entire project. Replace them with the tokens gotten in Step 1 and 2 respectively. To double check you can make sure that -
    • For ios: You must have put public token in Runner/Info.plist file.
    • Some android: You must have put public token as a string in app/src/main/res/values/strings.xml and secret token as a string in gradle.properties file.
  2. To run the app in an IOS device/emulator, you will need 1 more step. Open or create .netrc file in your home directory. In there add the following lines:
machine api.mapbox.com
  login mapbox
  password <YOUR_SECRET_TOKEN>
  1. Finally open your assets folder and add a config/.env file. You can add one key-value pair there:
MAPBOX_ACCESS_TOKEN="<YOUR_PUBLIC_ACCESS_TOKEN>"

That's it. You follow these 5 steps and you should be good to go. Now I would also recommend going through the documentation for Android and iOS, because there is a lot more to it, like adding permissions and stuff, which I have already done for you.

Comments
  • assets

    assets

    Hi, Imperial Lord

    On the source code, you gave the assets for env. are missing So I think maybe you have to re-uploading the source code, but thank you for your tutorial, that it's good.

    This is the image from your youtube tutorial Screen Shot 2022-05-11 at 19 37 38

    This is the image from your github Screen Shot 2022-05-11 at 19 48 24

    Thank you for your attention and your time Regards

    opened by rizaljamjam 2
  • Uncategorized (Xcode): Command CompileSwiftSources failed with a nonzero exit code

    Uncategorized (Xcode): Command CompileSwiftSources failed with a nonzero exit code

    
    > ➜  mapbox_turn_by_turn flutter run 
    > Launching lib/main.dart on iPhone 11 in debug mode...
    > Running pod install...                                              5.1s
    > Running Xcode build...                                                  
    > Xcode build done.                                           19.9s
    > Failed to build iOS app
    > Error output from Xcode build:
    > ↳
    >     ** BUILD FAILED **
    > 
    > 
    > Xcode's output:
    > ↳
    >     Writing result bundle at path:
    >         /var/folders/7w/h92ps26x53v5f1qfzq9f5jp40000gn/T/flutter_tools.PtOlzU/flutter_ios_build_temp_dirNWM01b/temporary_xcres
    >         ult_bundle
    > 
    >     ld: building for iOS Simulator, but linking in dylib built for iOS, file
    >     '/Users/mostafa/mapbox_turn_by_turn/ios/Pods/Mapbox-iOS-SDK/dynamic/Mapbox.framework/Mapbox' for architecture arm64
    >     clang: error: linker command failed with exit code 1 (use -v to see invocation)
    >     Command CompileSwiftSources failed with a nonzero exit code
    >     Command CompileSwiftSources failed with a nonzero exit code
    >     Command CompileSwiftSources failed with a nonzero exit code
    >     note: Using new build system
    >     note: Planning
    >     note: Build preparation complete
    >     note: Building targets in dependency order
    >     /Users/mostafa/mapbox_turn_by_turn/ios/Pods/Pods.xcodeproj: warning: The iOS Simulator deployment target
    >     'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 15.2.99.
    >     (in target 'Solar' from project 'Pods')
    > 
    >     Result bundle written to path:
    >         /var/folders/7w/h92ps26x53v5f1qfzq9f5jp40000gn/T/flutter_tools.PtOlzU/flutter_ios_build_temp_dirNWM01b/temporary_xcres
    >         ult_bundle
    > 
    > 
    > Error (Xcode): Building for iOS Simulator, but linking in dylib built for iOS, file
    > '/Users/mostafa/mapbox_turn_by_turn/ios/Pods/Mapbox-iOS-SDK/dynamic/Mapbox.framework/Mapbox' for architecture arm64
    > 
    > 
    > Could not build the application for the simulator.
    > Error launching application on iPhone 11.
    > 
    

    Screen Shot 2022-06-15 at 6 53 35 PM Screen Shot 2022-06-15 at 6 44 32 PM

    opened by mostafaac30 1
  • Abort message: 'terminating with uncaught exception of type jni::PendingJavaException'

    Abort message: 'terminating with uncaught exception of type jni::PendingJavaException'

    the app works perfectly fine until it reaches the turn by turn page. it crashes at that page and gives this abort message and then loses connection to the device

    opened by Deva33369 0
  • MAPBOX Map is not showing on real android device but working fine on emulator.

    MAPBOX Map is not showing on real android device but working fine on emulator.

    MapBox works on the emulator and when connected via cable, but it doesn't work on the APK.

    Any idea why this would occur?

    Why does it work the first time?

    Is it some permission issue?

    opened by itxAdie 0
  • directions_handler NoSuchMethodError

    directions_handler NoSuchMethodError

    When debugging on a physical Android Device, It throws an error at directions_handler.dart Line 12:

    NoSuchMethodError (NoSuchMethodError: The method '[]' was called on null.
    Receiver: null
    Tried calling: []("routes"))
    

    This occurs just after starting to debug while the MapBox logo is still shown on the device. I guess the responsevariable is still null since there wasn't a call for getCyclingRouteUsingMapbox, but it is still needed at the start by the Map geometry variable.

    opened by JoelJoos 1
  • Not Authorized - Invalid Token

    Not Authorized - Invalid Token

    Facing Issue : Not Authorized - Invalid Token

    Syncing files to device iPhone 13... flutter: https://api.mapbox.com/geocoding/v5/mapbox.places/78.1198,9.9252.json?access_token=%3Cpk.eyJ1IjoiaW52aXNpYmxlIiwiYSI6ImNsMnJ4ZWswdjAwajQzZHFsNXJqYnpoYnUifQ.b9Cja-IhYcszZxUCEw1ZsQ%3E flutter: Oops something went wrong [VERBOSE-2:ui_dart_state.cc(209)] Unhandled Exception: type 'Null' is not a subtype of type 'String' #0 getParsedReverseGeocoding (package:t..helpers/mapbox_handler.dart:42:19) <asynchronous suspension> #1 _SplashState.initializeLocationAndSave (package:../screens/authentication/splash.dart:48:10) <asynchronous suspension>

    opened by Invisiblearound 2
Owner
AB Satyaprakash
Upcoming SDE @oracle | Intern @oracle '21 | @microsoft Student Learn Ambassador | @MLH Fellow | Maths and Computing IIT Guwahati'22.
AB Satyaprakash
A migration of Google Maps Application with Flutter & Google Maps APIs including: Maps SDK for Android & IOS, Places API & polylines

google_maps A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

TAD 1 Mar 4, 2022
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 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
Flutter Maps A Flutter app using Google Maps SDK & Directions API

Flutter Maps A Flutter app using Google Maps SDK & Directions API Plugins The plugins used in this project are: google_maps_flutter geolocator flutter

Salsabil Mohamed Hemada 1 Jul 15, 2022
Easy to use Animated Maps Markers with a detail card. Use it for a store or any place locator.

interactive_maps_marker for Flutter Easy to use Animated Maps Markers with detail card. Use it for store or any place locator. Demo Usage Add this pac

Atiq Samtia 95 Dec 28, 2022
A new flutter plugin for mapbox. You can use it for your map backgrounds inside flutter applications

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

Boris Gautier 5 Sep 14, 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
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
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
A car rental flutter application using firebase and google maps API

A car sharing & rental app using Flutter, Firebase & Google Maps APIs ?? About the App ?? hopOn is flutter based application for car sharing and renta

Shivani Singh 97 Dec 30, 2022
Interactive, thoroughly customizable maps in native Android, iOS, macOS, Node.js, and Qt applications, powered by vector tiles and OpenGL

Mapbox GL Native A C++ library that powers customizable vector maps in native applications on multiple platforms by taking stylesheets that conform to

Mapbox 4.2k Jan 6, 2023
This is a Flutter package that uses the Google Maps API to make a TextField that tries to autocomplete places as the user types, with simple smooth animations, making a nice UI and UX.

search_map_place This is a Flutter package that uses the Google Maps API to make a TextField that tries to autocomplete places as the user types, with

Lucas Bernardi 127 Oct 22, 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

MarchDev Toolkit 86 Sep 26, 2022
Aplications with google maps and geolocation

Aplications with google maps and geolocation

Richardson Tsavo 4 Jul 26, 2022
A flutter plugin for Google Maps

IMPORTANT: This plugin is no longer under development Why? We initially built this plugin to fill an early gap in flutter. Since then, Google has made

AppTree Software, Inc 415 Dec 29, 2022
Flutter Google Maps Tutorial

Flutter Google Maps Tutorial YouTube Video Setup Get an API Key at https://cloud.google.com/maps-platform/ Enable Maps SDK for Android, Maps SDK for i

Marcus Ng 85 Nov 30, 2022
A Flutter app using Google Maps SDK & Directions API

Flutter Maps A Flutter app using Google Maps SDK & Directions API Plugins The plugins used in this project are: google_maps_flutter geolocator flutter

Youhaan bootwala 1 Mar 18, 2022
A Flutter app using Google Maps SDK & Directions API

Flutter Maps A Flutter app using Google Maps SDK & Directions API Plugins The plugins used in this project are: google_maps_flutter geolocator flutter

Varun CN 2 Apr 19, 2022
A Flutter package to provide the native maps to Android/iOS

platform_maps_flutter A Flutter package that provides a native map to both Android and iOS devices. The plugin relies on Flutter's mechanism for embed

Luis Thein 70 Aug 13, 2022