ketanchoyal / mapbox_search

A Flutter package for place search using MapBox Api and for Static map image
MIT License
74 stars 57 forks source link
dart dartlang flutter flutter-package hacktoberfest mapbox-api

Pub

About

Note: Breaking Changes in 4.x.x

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

Setup

Now you can setup the API key for whole app by calling MapBoxSearch.init('API KEY') in your main() function, this way you don't have to pass the API key to every class that uses the package.

Usage of ApiResponse

final ApiResponse<List<MapBoxPlace>> addresses = await getAddress();
addresses.fold(
    (success) => // Do something with success data,
    (failure) => // Do something with failure data,
  );

Examples

SearchBox API

SearchBoxAPI search = SearchBoxAPI(
      apiKey: 'API Key', // dont pass if you have set it in MapBoxSearch.init('API KEY')
      limit: 6,
);
Get Suggestions
  ApiResponse<SuggestionResponse> searchPlace = await search.getSuggestions(
      "central",
    );
Get mapbox_id

Reverse GeoCoding

var reverseGeoCoding = GeoCoding(
    apiKey: 'API Key', // dont pass if you have set it in MapBoxSearch.init('API KEY')
    limit: 5,
);

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

Forward GeoCoding Seach

var geocoding = GeoCoding(
    apiKey: 'API Key', // dont pass if you have set it in MapBoxSearch.init('API KEY')
    country: "BR",
    limit: 5,
    types: [PlaceType.address, PlaceType.place],
);

Future<ApiResponse<List<MapBoxPlace>>> getPlaces() =>
  geocoding.getPlaces(
      "central park",
      proximity: Location(
        lat: -19.984634,
        lng: -43.9502958,
      ),
    );

Static Image

MapBoxStaticImage staticImage = MapBoxStaticImage(
    apiKey: 'API Key', // dont pass if you have set it in MapBoxSearch.init('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