Native Map Navigation

You can use navigation feature on the phone by calling native map applications. The URI schemes and parameters declared on Apple Developers and Google Map Documentation. You can use Apple Developers reference for iOS only but you can use Google Map Documentation for both iOS and Android. If maps not installed on devices, maps with navigation opens in the browser.

Opening Other Maps Applications on iOS

In order to support navigation to other Maps/Navigation Applications, you need to add their schema to the config/iOS/Info.plist file. An example with Google Maps and Yandex Navigation support will look like this:

    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>comgooglemaps</string>
        <string>yandexnavi</string>
    </array>

WARNING

On Smartface iOS emulator, only Apple Maps will be opened if you navigate to the other Maps application like Google Maps, because the above statement on info.plist doesn't exist on Smartface Emulator. If you navigate with a universal link (https://...), the browser will be opened instead.

The following example shows how to open default map application on the mobile device.

TypeScript

import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import System from "@smartface/native/device/system";
import Button from "@smartface/native/ui/button";
import Application from "@smartface/native/application";


//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
    btnMapsNavigation: Button;
    btnMapsNavigationAHL: Button;
  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
              flexDirection: 'COLUMN',
              justifyContent: 'CENTER',
              alignItems: 'CENTER'
            }
        }
    })
  }

  onShow() {
    super.onShow();
    const { headerBar } = System.OS === System.OSType.ANDROID ? this : this.parentController;
    Application.statusBar.visible = true;
    headerBar.visible = true;
  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();
    
    this.btnMapsNavigation = new Button({
        text: "Maps Navigation Smartface",
        onPress: function () {
          if (System.OS === System.OSType.ANDROID) {
            Application.call({
              uriScheme: "https://www.google.com/maps/dir/",
              data: {
                api: "1",
                travelmode: "walking",
                dir_action: "navigate",
                destination: "37.4492751,-122.1620912",
              },
            });
          } else {
            Application.call({
              uriScheme: "http://maps.apple.com/",
              data: {
                daddr: "37.4492751,-122.1620912",
                dirflg: "w",
              },
            });
          }
        },
      });
    
      this.btnMapsNavigationAHL = new Button({
        text: "Maps Navigation Ataturk Airport",
        onPress: function () {
          if (System.OS === System.OSType.ANDROID) {
            Application.call({
              uriScheme: "https://www.google.com/maps/dir/",
              data: {
                api: "1",
                travelmode: "walking",
                dir_action: "navigate",
                destination: "40.9829888,28.8104425",
              },
            });
          } else {
            Application.call({
              uriScheme: "http://maps.apple.com/",
              data: {
                daddr: "40.9829888,28.8104425",
                dirflg: "w",
              },
            });
          }
        },
      });
    
      this.addChild(
        this.btnMapsNavigation,
        "btnMapsNavigation",
        ".sf-button",
        {
          height: 75,
          width: 350,
          margin: 10,
          backgroundColor: "#0000FF",
          textColor: "#FFFFFF",
        }
      );
    
      this.addChild(
        this.btnMapsNavigationAHL,
        "btnMapsNavigationAHL",
        ".sf-button",
        {
          height: 75,
          width: 350,
          margin: 10,
          backgroundColor: "#0000FF",
          textColor: "#FFFFFF",
        }
      );
  }
}

List Available Navigation Apps on Android

Application.call({
  uriScheme: `geo:37.4492751,37.4492751?q=37.4492751,37.4492751`,
  chooserTitle: "",
  isShowChooser: true,
});