DEV Community: OLayemii

Adding Route Paths (Polylines) Between two Points to Google Maps in Flutter

OLayemii — Sat, 30 Jan 2021 17:08:24 +0000

Recently, I was working on a flutter project which requires maps and route lines showing the path between two coordinates (the source and destination coordinates).

In this tutorial, I will show you how I was able to achieve this using this two packages from pub.dev

google_maps_flutter

flutter_polyline_points

After installing this packages, we need to create a google project and get a Google Maps API key from the Google Developer Console.

You can also check this article on how to get an api key.

We also need to activate the following services on the developer console for our Google project:

Maps SDK for Android
Maps SDK for iOS
Directions API

This can be done by clicking on the search icon on the app bar of the developer console and searching for this services then activating them

Lastly, we need to setup billing for our project, the Directions API which does the route generation requires billing to work. Though you won't be charged without activating auto charge after your free trial.

You can read this article on How to Setup Billing For Your Google Developer Account

We now need to setup Google maps for our flutter project.

On Android

Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:



<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY" 
android:value="YOUR KEY HERE"/>

On iOS

Specify your API key in the application delegate ios/Runner/AppDelegate.m:



#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Or in your swift code, specify your API key in the application delegate ios/Runner/AppDelegate.swift:




import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Adding Google Maps to Our Flutter Application



import 'dart:async';

import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

// Starting point latitude
  double _originLatitude = 6.5212402;
// Starting point longitude
  double _originLongitude = 3.3679965;
// Destination latitude
  double _destLatitude = 6.849660;
// Destination Longitude
  double _destLongitude = 3.648190;
// Markers to show points on the map
  Map<MarkerId, Marker> markers = {}; 

class _MyAppState extends State<MyApp> {
  // Google Maps controller
  Completer<GoogleMapController> _controller = Completer();
  // Configure map position and zoom
  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(_originLatitude, _originLongitude),
    zoom: 9.4746,
  ); 

  @override
  void initState() {
    /// add origin marker origin marker
    _addMarker(
      LatLng(_originLatitude, _originLongitude),
      "origin",
      BitmapDescriptor.defaultMarker,
    );

    // Add destination marker
    _addMarker(
      LatLng(_originLatitude, _originLongitude),
      "destination",
      BitmapDescriptor.defaultMarkerWithHue(90),
    );
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: GoogleMap(
            mapType: MapType.normal,
            initialCameraPosition: _kGooglePlex,
            myLocationEnabled: true,
            tiltGesturesEnabled: true,
            compassEnabled: true,
            scrollGesturesEnabled: true,
            zoomGesturesEnabled: true,
            markers: Set<Marker>.of(markers.values),
            onMapCreated: (GoogleMapController controller) {
              _controller.complete(controller);
            },
       ), 
      ),
    );
  }

  // This method will add markers to the map based on the LatLng position
  _addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
    MarkerId markerId = MarkerId(id);
    Marker marker =
        Marker(markerId: markerId, icon: descriptor, position: position);
    markers[markerId] = marker;
  }
}

This should render google maps with two markers at the origin and destination coordinates.

Adding Polylines Between the Locations on Our Map

Now all we need to do is add the polylines to show the path between our point. To do this we make use of the flutter_polyline_points package

Add ```dart

import 'package:flutter_polyline_points/flutter_polyline_points.dart';{% raw %}``
to the imports at the top of the file.

Next, we need to define a variable to store the polylines we will later query for, and create a PolylinePoints object too.

Add this among other class properties we defined earlier

`dart PolylinePoints polylinePoints = PolylinePoints(); Map<PolylineId, Polyline> polylines = {}; `

Next, we need to write a method to help us query the directions API for the points of the polyline

`dart
void _getPolyline() async {
List polylineCoordinates = [];

PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
  Constants.API_KEY,
  PointLatLng(_originLatitude, _originLongitude),
  PointLatLng(_destLatitude, _destLongitude),
  travelMode: TravelMode.driving,
);
if (result.points.isNotEmpty) {
  result.points.forEach((PointLatLng point) {
    polylineCoordinates.add(LatLng(point.latitude, point.longitude));
  });
} else {
  print(result.errorMessage);
}
_addPolyLine(polylineCoordinates);

}
`

We referenced a _addPolyLine function from the _getPolyline function, the _addPolyLine will help us populate the maps with the polyline points. Let's create this method too

`dart _addPolyLine(List<LatLng> polylineCoordinates) { PolylineId id = PolylineId("poly"); Polyline polyline = Polyline( polylineId: id, color: Constants.primaryColorSwatch, points: polylineCoordinates, width: 8, ); polylines[id] = polyline; setState(() {}); } `

Then we add the polylines object to our GoogleMap property

`dart polylines: Set<Polyline>.of(polylines.values), `

This is the final code

`dart
import 'dart:async';

import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

// Starting point latitude
double _originLatitude = 6.5212402;
// Starting point longitude
double _originLongitude = 3.3679965;
// Destination latitude
double _destLatitude = 6.849660;
// Destination Longitude
double _destLongitude = 3.648190;
// Markers to show points on the map
Map markers = {};

PolylinePoints polylinePoints = PolylinePoints();
Map polylines = {};

class _MyAppState extends State {
// Google Maps controller
Completer _controller = Completer();
// Configure map position and zoom
static final CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(_originLatitude, _originLongitude),
zoom: 9.4746,
);

@override
void initState() {
/// add origin marker origin marker
_addMarker(
LatLng(_originLatitude, _originLongitude),
"origin",
BitmapDescriptor.defaultMarker,
);

// Add destination marker
_addMarker(
  LatLng(_destLatitude, _destLongitude),
  "destination",
  BitmapDescriptor.defaultMarkerWithHue(90),
);

_getPolyline();

super.initState();

}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: _kGooglePlex,
myLocationEnabled: true,
tiltGesturesEnabled: true,
compassEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
polylines: Set.of(polylines.values),
markers: Set.of(markers.values),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
),
);
}

// This method will add markers to the map based on the LatLng position
_addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
MarkerId markerId = MarkerId(id);
Marker marker =
Marker(markerId: markerId, icon: descriptor, position: position);
markers[markerId] = marker;
}

_addPolyLine(List polylineCoordinates) {
PolylineId id = PolylineId("poly");
Polyline polyline = Polyline(
polylineId: id,
points: polylineCoordinates,
width: 8,
);
polylines[id] = polyline;
setState(() {});
}

void _getPolyline() async {
List polylineCoordinates = [];

PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
  "YOUR API KEY HERE",
  PointLatLng(_originLatitude, _originLongitude),
  PointLatLng(_destLatitude, _destLongitude),
  travelMode: TravelMode.driving,
);
if (result.points.isNotEmpty) {
  result.points.forEach((PointLatLng point) {
    polylineCoordinates.add(LatLng(point.latitude, point.longitude));
  });
} else {
  print(result.errorMessage);
}
_addPolyLine(polylineCoordinates);

}
}
`

This is a link to a gist with complete code

Cleaner React git commits

OLayemii — Sat, 09 Jan 2021 17:12:40 +0000

In this article, we’re going to learn how we can improve the quality of codes we commit to git by beautifying and linting at the point of commit. We’ll walk through an example React app to see how with husky, we can configure githooks to trigger code linting and beautification before committing to git.

When we write softwares, we always want to keep our codebase to be clean, readable, free from unused fragments and consistent across files. However, this is a hectic task to handle manually.

In this tutorial, I will be showing you how you can effortlessly make setups for automatic code linting and beautification before any commit to git.

Getting Started

Since we’ll be using React for this tutorial, the first step is to create a new react application.
I will be scaffolding a new React application with the CRA tool.

# scaffold new react application
npx create-react-app react-husky-setup

# navigate to the newly created application
cd react-husky-setup

Next, we will install all the tools we need as development dependencies.

I have outlined every dependency we need to install before we unlock this super powers I have been talking about.

[ ] Install PrettierJS
[ ] Install EsLint and EsLint plugins
[ ] Install Lint-staged
[ ] Intall HuskyJS
[ ] Unlock Awesomeness

Install PrettierJS

According to the official website,

Prettier is an opinionated code formatter with support for: JavaScript, including ES2017 , JSX, Angular, Vue, Flow, TypeScript; CSS, Less, and SCSS, HTML, JSON, GraphQL, Markdown, including GFM and MDX and YAML.

It removes all original styling* and ensures that all outputted code conforms to a consistent style..

We will be using prettier to format badly indented codes and perform code formatting before making commits. Let’s install prettier

# install with yarn
yarn add prettier --dev --exact

# install with npm
npm install --save-dev --save-exact prettier

We then create a .prettierrc file in our root directory, this will allow us configure prettier based on our standards.

This is my preferred configuration:

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "proseWrap": "always",
  "htmlWhitespaceSensitivity": "css",
  "quoteProps": "as-needed"
}

Install ES Lint and ES Lint plugins

ESLint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. ESLint helps you maintain your code quality with ease.

# install with yarn 
yarn add eslint babel-eslint eslint-config-prettier eslint-plugin-html eslint-plugin-prettier --dev

# install with npm

npm install --save-dev eslint babel-eslint eslint-config-prettier eslint-plugin-html eslint-plugin-prettier

We are installing eslint along with some eslint based plugins. The extra plugins and their uses are listed in the table below:


`babel-eslint`	This allows you to lint ALL valid Babel code including experimental features (such as new features).
`eslint-config-prettier`	This turns off all rules that are unnecessary or might conflict with Prettier.
`eslint-plugin-html`	This will allow eslint to lint inline scripts embeded within HTML
`eslint-plugin-prettier`	This runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

We also need to create an .eslintrc file in our root directory to configure eslint. This is my preferred configurations:

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": ["eslint:recommended", "react-app", "prettier"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react-hooks"],
  "rules": {
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "no-console": 2,
    "no-alert": 2,
    "no-func-assign": 1,
    "no-invalid-regexp": 1,
    "no-unreachable": 1,
    "default-case": 1,
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Install Lint-Staged

Lint staged allows us to lint only staged code, this is because running a lint process on a whole project is slow and some linting results from an overall linting can be irrelevant. Therefore, lint staged helps us to confine our linting to only staged codes making the process faster and efficient (since we only need to lint codes we intend to commit anyway).

# install with yarn
yarn add lint-staged --dev --exact

# install with npm
npm install --save-dev lint-staged

We’ll then setup lint-stage by including a config object in our package.json file

#... Rest package.json
"lint-staged": {
  "**/*.+(js|ts|graphql|yml|yaml|vue)": [
    "eslint --fix",
    "prettier --write",
    "git add"
  ],
  "*/*.+(css|sass|less|scss|json|html)": [
    "prettier --write",
    "git add"
  ]
}


Here we are configuring lint-staged to run `eslint, prettier` then perform a new `git add` to staged codes for all `js,ts,graphql,yaml,vue` files and to only run `prettier` and a `git add` for `css, sass, less, scss, json, html` files.

Install HuskyJS

When we use git, we automatically have access to use git hooks, git hooks allow us to hook into various hook events and perform functions before or after this events. We can see a list of available git hooks if we check .git/hooks directory in our project.
You can see also see the list of supported hooks from the documentation. However, for this tutorial we are only really concerned about the pre-commit hook. This hook is executed before a git commit operation.
The turn down of using git hooks is that you can only write them as bash scripts. But we dont want to go through the hazzle of learning a new language for this purpose, and that is where husky comes into play.

Husky allows us write git hooks easily and makes it easier to share them across team members.

# install with yarn
yarn add husky --dev

# install with npm
npm install --save-dev husky

To configure husky to use our custom pre-commit hook, we need to include husky configuration to our package.json file

#... Rest package.json
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},

This tells husky to run the commands we defined for lint-staged in our package.json file.

Unlock Awesomeness

Finally we’ve gone through all installations and setups, from my .eslintrc rules, I enabled and error flag for console statements in my codebase, so let’s try adding a console.log statement to our App.js file and try committing our code to git.

Aha! Eslint flags the console statement so our intended commit is reverted and we get to see what line has errors.