A Flutter package for place search using MapBox Api and for Static map image

Overview

Pub

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 marker icon

As this package doesn't depend on Flutter SDK you cannot use the Colors class anymore on you Flutter project. Instead use map_box_search's Color.rgb constructor, passing the values as parameters:

var myColor = Colors.redAccent; //Flutter's Color class
var mapBoxColor = Color.rgb( myColor.red, myColor.green, myColor.blue);

Installing

First of all you must acquire an API key on the MapBox website https://www.mapbox.com/

Then, add the following to your pubspec.yaml file:

dependencies:
  mapbox_search: any

Examples

Reverse GeoCoding

var reverseGeoCoding = ReverseGeoCoding(
    apiKey: 'API Key',
    limit: 5,
);

Future<List<MapBoxPlace>> getPlaces() =>
  reverseGeoCoding.getAddress(
    Location(lat: 72.0, lng: 76.00),
);

Places Seach

var placesSearch = PlacesSearch(
    apiKey: 'API Key',
    limit: 5,
);

Future<List<MapBoxPlace>> getPlaces() =>
  placesSearch.getPlaces("New York");

Static Image

MapBoxStaticImage staticImage = MapBoxStaticImage(
    apiKey:
        "API Key");

Image With Polyline

    String getStaticImageWithPolyline() => staticImage.getStaticUrlWithPolyline(
      point1: Location(lat: 37.77343, lng: -122.46589),
      point2: Location(lat: 37.75965, lng: -122.42816),
      marker1: MapBoxMarker( markerColor: Colors.black, 
      markerLetter: MakiIcons.aerialway.value, 
      markerSize: MarkerSize.LARGE),
      marker2: MapBoxMarker(
          markerColor: Color.rgb(244, 67, 54),
          markerLetter: 'q',
          markerSize: MarkerSize.SMALL),
      height: 300,
      width: 600,
      zoomLevel: 16,
      style: MapBoxStyle.Mapbox_Dark,
      path: MapBoxPath(pathColor: Color.rgb(255, 0, 0), pathOpacity: 0.5,     pathWidth: 5),
      render2x: true);

Image with Marker

String getStaticImageWithMarker() => staticImage.getStaticUrlWithMarker(
  center: Location(lat: 37.77343, lng: -122.46589),
  marker: MapBoxMarker(
      markerColor: Color.rgb(0, 0, 0), markerLetter: 'p', markerSize: MarkerSize.LARGE),
  height: 300,
  width: 600,
  zoomLevel: 16,
  style: MapBoxStyle.Mapbox_Streets,
  render2x: true,
);

Image without Marker

String getStaticImageWithoutMarker() => staticImage.getStaticUrlWithoutMarker(
    center: Location(lat: 37.75965, lng: -122.42816),
    height: 300,
    width: 600,
    zoomLevel: 16,
    style: MapBoxStyle.Mapbox_Outdoors,
    render2x: true,
  );

Screenshots

Static Map Image

Static Map Image

Search Widget

Demo

Demo

Comments
  • reverseGeoCoding.getAddress not working

    reverseGeoCoding.getAddress not working

    Hey, i was just checking out the getAddress function in README

        List<MapBoxPlace> places = await reverseGeoCoding.getAddress(
          Location(lat: 72.0, lng: 76.00),
        );
    

    but even this returns 0 results, almost all coordinates return 0 results, something up with the API changes ?

    bug 
    opened by satyajitghana 9
  • Reverse geocoding returns 0 places

    Reverse geocoding returns 0 places

    What am I doing wrong?

        return new FlutterMap(
          options: new MapOptions(
              center: new LatLng(42.8746, 74.5698),
              zoom: 17.0,
              onPositionChanged: (MapPosition position, bool hasGesture) async {
                print('position changed');
                print(position.center.longitude);
                print(position.center.latitude);
    ReverseGeoCoding reverseGeoCoding = ReverseGeoCoding(
          apiKey: APIConstants.MAPBOX_API_KEY, // api key is correct
          limit: 5,
        );
    
                List<MapBoxPlace> places = await reverseGeoCoding.getAddress(
                    Location(
                        lat: 48.8584, // this is eiffel tower position
                        lng: 2.2945));
                print(places.length);
    ...
    
    bug 
    opened by omurbekjk 3
  • Reopenned: enum toString() doesn't return the main value

    Reopenned: enum toString() doesn't return the main value

    dart enum toString() method returns the concatenated string of the Enum name and the value name. i.e. PlaceType.region.toString() will return "PlaceType.region" not "region". Ref: https://stackoverflow.com/a/29567669/7171719

    opened by jahid-hasan-polash 2
  • add types query parameter to places search request

    add types query parameter to places search request

    Simply adds the query parameter 'types' to the mapbox geocoding api requests.

    https://docs.mapbox.com/api/search/geocoding/#forward-geocoding https://docs.mapbox.com/api/search/geocoding/#reverse-geocoding

    opened by FallenRiteMonk 2
  • Removing colors dependency

    Removing colors dependency

    Since the Colors library is almost "abandoned", I removed the library dependency from the project by copying its files to inside mapbox_search.

    opened by shinayser 2
  • How do I draw the map?

    How do I draw the map?

    It is more of a silly query ... I see the different methods, but how do you draw the map in a widget? I think that I am missing putting that there in the documentation or I do not see it or understand it well ... can you help me? i need to draw the map in a statefull

    question 
    opened by NestorDevs 2
  • is ReverseGeoCoding not working ?

    is ReverseGeoCoding not working ?

    ReverseGeoCoding reverseGeoCoding = ReverseGeoCoding( apiKey: dotenv.env['mapbox_access_token'], country: "KR", language: 'ko', limit: 10, types: PlaceType.address, );

    List<MapBoxPlace> list = await reverseGeoCoding.getAddress(
      Location(
        lat: Get.find<PlaceMapUpdateController>().map_controller.cameraPosition.target.latitude,
        lng: Get.find<PlaceMapUpdateController>().map_controller.cameraPosition.target.longitude,
      ),
    );
    

    print(list);

    this is my code, but it returns []

    how can i solve it ?

    opened by Oct7 1
  • enum toString() doesn't return the main value

    enum toString() doesn't return the main value

    dart enum toString() method returns the concatenated string of the Enum name and the value name. i.e. PlaceType.region.toString() will return "PlaceType.region" not "region". Ref: https://stackoverflow.com/a/29567669/7171719

    opened by jahid-hasan-polash 1
  • 'Color' is undefined

    'Color' is undefined

    Hi, I am not able to use the following method because the color is not defined

    import 'package:mapbox_search/mapbox_search.dart' as m;
    
     String getStaticImageWithMarker() => _staticImage.getStaticUrlWithMarker(
            center: m.Location(
              lat: _locationData.latitude,
              lng: _locationData.longitude,
            ),
            marker: m.MapBoxMarker(
              markerColor: m.Color.rgb(0, 0, 0) ,
              markerLetter: 'o',
              markerSize: m.MarkerSize.LARGE,
            ),
            height: 300,
            width: 600,
            zoomLevel: 16,
            style: m.MapBoxStyle.Streets,
            render2x: true,
          );
    

    It gives the following error

    The name 'Color' is being referenced through the prefix 'm', but it isn't defined in any of the libraries imported using that prefix.
    Try correcting the prefix or importing the library that defines 'Color'.
    

    I get the problem in version mapbox_search: ^2.1.0+1 but in the version mapbox_search: ^3.0.0-nullsafety.0 the problem can be fixed while importing the following line

    import 'package:mapbox_search/colors/color.dart';
    

    but now I can't use mapbox_search_flutter: ^1.0.6+1 pacakge becuase it's without null-safety and mapbox_search: ^3.0.0-nullsafety.0 is with null-safety

    opened by UsamaKarim 1
  • Improve static images

    Improve static images

    • simplified the url serialisation
    • added the auto attribute to static images
    • renamed MapBoxStaticImage to StaticImage to make the naming in this library more consistent
    • added simple unit tests for static images

    please give me feedback

    opened by lukas-h 1
  • Result is not being displayed or marked on map..

    Result is not being displayed or marked on map..

    After i pick a location, all i get is the static images placed, can you provide an example how to dynamically place a marker on search result?

    Thanks!

    opened by ameeee 1
  • Is there any way to get city name of a address ?

    Is there any way to get city name of a address ?

    as of now we can get ,

    String id; FeatureType type; List<PlaceType> placeType; String addressNumber; Properties properties; String text; String placeName; List<double> bbox; List<double> center; Geometry geometry; List<Context> context; String matchingText; String matchingPlaceName;

    please add way to get city too. please

    opened by developmentkws 0
  • Configure Renovate

    Configure Renovate

    WhiteSource Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    :vertical_traffic_light: To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • .github/workflows/dart.yml (github-actions)
    • pubspec.yaml (pub)

    Configuration Summary

    Based on the default config's presets, Renovate will:

    • Start dependency updates only once this onboarding PR is merged
    • Separate major versions of dependencies into individual branches/PRs
    • Do not separate patch and minor upgrades into separate PRs for the same dependency
    • Upgrade to unstable versions only if the existing version is unstable
    • Raise PRs immediately (after branch is created)
    • If semantic commits detected, use semantic commit type fix for dependencies and chore for all others
    • Keep existing branches updated even when not scheduled
    • Disable automerging feature - wait for humans to merge all PRs
    • Ignore node_modules, bower_components, vendor and various test/tests directories
    • Autodetect whether to pin dependencies or maintain ranges
    • Rate limit PR creation to a maximum of two per hour
    • Limit to maximum 20 open PRs at any time
    • Group known monorepo packages together
    • Use curated list of recommended non-monorepo package groupings
    • Ignore spring cloud 1.x releases
    • Ignore http4s digest-based 1.x milestones

    :abcd: Would you like to change the way Renovate is upgrading your dependencies? Simply edit the renovate.json in this branch with your custom config and the list of Pull Requests in the "What to Expect" section below will be updated the next time Renovate runs.


    What to Expect

    With your current configuration, Renovate will create 3 Pull Requests:

    Update actions/checkout action to v2
    • Schedule: ["at any time"]
    • Branch name: renovate/actions-checkout-2.x
    • Merge into: master
    • Upgrade actions/checkout to v2
    Update dependency color to v3
    • Schedule: ["at any time"]
    • Branch name: renovate/color-3.x
    • Merge into: master
    • Upgrade color to ^3.0.0
    Update dependency http_multi_server to v3
    • Schedule: ["at any time"]
    • Branch name: renovate/http_multi_server-3.x
    • Merge into: master
    • Upgrade http_multi_server to ^3.0.0

    :children_crossing: Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.


    :question: Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by WhiteSource Renovate. View repository job log here.

    opened by renovate[bot] 0
  • pass in bbox param to places_search

    pass in bbox param to places_search

    In my app I am limiting results to a bbox. This my first time making a PR for a dart package, please let me know next steps if I'm missing something. Thanks

    opened by 0radek 2
Owner
Ketan Choyal
iOS/Android App Developer 📱 Flutter + Native https://sourcerer.io/ketanchoyal
Ketan Choyal
Mapbox-flutter - A repository to demonstrate the use of Mapbox - it's Maps and Navigation SDKs in a Flutter application

MapBox Flutter This repository contains code corresponding to the Youtube video

AB Satyaprakash 39 Dec 30, 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
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
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
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
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 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
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 Flutter plugin which provides 'Picking Place' using Google Maps widget

Google Maps Places Picker Refractored This is a forked version of google_maps_place_picker package, with added custom styling and features.

Varun 5 Nov 13, 2022
Flutter Community - A central place for community made Flutter content.

Flutter Community A central place for community made Flutter content. The Flutter Community is an organization aimed at providing a central place for

Flutter Community 1.3k Jan 1, 2023
Place picker on Google Maps for Flutter

Google Maps Place Picker A Flutter plugin which provides 'Picking Place' using Google Maps widget. The project relies on below packages. Map using Flu

Terry Kwon 178 Dec 16, 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 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

Ahmet ÇELİK 49 Nov 17, 2022
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

Fabian Rosenthal 19 Oct 11, 2022
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

Samuel Adekunle 10 Dec 22, 2022
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

Akbar 16 Jul 15, 2022
Flutter Google Map Example - Day 41

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

Mohammad Rahmani 74 Jan 3, 2023
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
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

null 2.2k Dec 28, 2022