Get Started

Thank you for using the HERE SDK for Flutter. The HERE SDK is tailored to bring the best and freshest assets from the HERE platform to your mobile applications. It supports a broad range of devices allowing you to reach millions of users worldwide. Below you can find more details:

Get Your Credentials

When using the HERE SDK, your application must be authenticated with a set of credentials. For this, you need to acquire a set of credentials by registering yourself on developer.here.com - or ask your HERE representative.

The HERE SDK for Flutter requires two strings - one unique ID and a secret key - to operate. No other credentials or tokens are needed to use the HERE SDK. To obtain your personal access_key_id and access_key_secret, do the following:

  1. Register or sign in at developer.here.com.
  2. After creating your project, generate an app to obtain an access key ID and access key secret.

You can either choose an existing project or Select a plan for a new project. Then scroll down to the HERE SDK product family and click Create a Key. You can create two sets of keys. Below this button you can download the HERE SDK artifacts which consist of the Flutter plugin (the zipped HERE SDK plugin folder to include in your app(s)) and selected documentation files.

Try the Example Apps

The easiest way to get started, is to try one of the example projects that are available for the HERE SDK.

Choose an example of your choice, then set your credentials for the individual Android and iOS projects:

Inside the example app's folder, open /android/app/src/main/AndroidManifest.xml and set your credentials (key / secret) to:

<meta-data android:name="com.here.sdk.access_key_id" android:value="YOUR_ACCESS_KEY_ID"/>
<meta-data android:name="com.here.sdk.access_key_secret" android:value="YOUR_ACCESS_KEY_SECRET"/>

Open /ios/Runner/Info.plist and set your credentials (key / secret) to:

<key>AccessKeyId</key>
<string>YOUR_ACCESS_KEY_ID</string>
<key>AccessKeySecret</key>
<string>YOUR_ACCESS_KEY_SECRET</string>

Now unzip the HERE SDK for Flutter plugin folder and place it to the path ../../plugins/here_sdk - relative to the example directory. Rename the plugin folder to match the name "here_sdk" (or update the path in the pubspec.yaml file). By default, we assume that the HERE SDK plugin folder is located outside the Flutter project, two levels up.

Finally, make sure an emulator (Android) or simulator (iOS) is running. Execute flutter run on your terminal from the example's directory - or run the app from within your IDE.

Feel free to experiment with the code of the examples. You can also follow the below guide to get a more thorough introduction on how to develop apps with the HERE SDK.

Create a New HERE SDK for Flutter Project

As a very first step-by-step example, we will develop a "Hello Map" Flutter application that shows - yes! - a map. If you want to integrate the HERE SDK into an existing application, you can skip this step. No specific SDK code is involved here.

If you are new to Flutter, please follow the guides on flutter.dev to help you get started with the first steps.

The example code for "hello_map" is available from here.

To follow this step-by-step instruction, you do not need to have any advanced Flutter nor Android or iOS experience.

For this guide, we have used Android Studio version 3.5 and Xcode version 11.3. In addition, we have used:

  • Flutter plugin version 44.0.1
  • Dart plugin version 191.8593

The HERE SDK for Flutter should also work with other versions.

First, create a new Flutter project, we have called it "hello_map". Make sure, you can run your new Flutter project on an Android and an iOS device of your choice to make sure your Flutter SDK is configured correctly. If it does not work, please refer to the Flutter documentation.

If you don't want to support both platforms, you can skip the steps for either iOS or Android. Note that the HERE SDK for Flutter does not support web and desktop apps.

Once you have verified that everything is set up correctly, it's time to integrate the HERE SDK for Flutter.

Note that the HERE SDK is only available as a separate download. Artifactory support is not yet available.

Make sure you have unzipped the HERE SDK plugin folder.

Copy the plugin folder to ../../plugins/here_sdk relative to the location of your app. For example, if this is your project examples/flutter/hello_map location, move the plugin folder here: examples/plugins/here_sdk.

Open the pubspec.yaml file of your Flutter project and add the path from above to the dependencies section. If you are not sure where to add this, it should look like below:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.3
  here_sdk:
    path: ../../plugins/here_sdk

Of course, you can rename the plugin folder and adjust the path, if desired.

If the path is specified correctly, you can execute flutter packages get from your terminal and the HERE SDK should appear in your project tree. For example, if you are using Android Studio, it will appear under External Libraries -> Flutter Plugins.

After you have executed "packages get" (or clicked the respective button in your IDE), a new Podfile is created for iOS. Open hello_map/ios/Podfile and set the platform to the minimum supported version:

# Uncomment this line to define a global platform for your project
platform :ios, '12.0'

Do the same for Android and open /hello_map/android/app/build.gradle to change the minSdkVersion to:

minSdkVersion 21

Finally, it's time to set the credentials for authenticating the HERE SDK.

Open /hello_map/android/app/src/main/AndroidManifest.xml and add the following meta-data tags nested under the application tag:

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="hellomap"
    android:icon="@mipmap/ic_launcher">

<meta-data android:name="com.here.sdk.access_key_id" android:value="YOUR_ACCESS_KEY_ID"/>
<meta-data android:name="com.here.sdk.access_key_secret" android:value="YOUR_ACCESS_KEY_SECRET"/>
...

Do the same for iOS, open /hello_map/ios/Runner/Info.plist, then add:

<key>HERECredentials</key>
  <dict>
      <key>AccessKeyId</key>
      <string>YOUR_ACCESS_KEY_ID</string>
      <key>AccessKeySecret</key>
      <string>YOUR_ACCESS_KEY_SECRET</string>
  </dict>

<key>io.flutter.embedded_views_preview</key>
<true/>

Make sure to set your own credentials (key / secret).

Note that we also added the key io.flutter.embedded_views_preview, since the HERE SDK map is natively rendered as UiKitView.

Now, all preparation work is done and you can start using the HERE SDK.

Let's start coding.

Below you can see how to show a HERE map view. Remove all the code from your main.dart file and replace it with the following:

import 'package:flutter/material.dart';
import 'package:here_sdk/core.dart';
import 'package:here_sdk/mapview.dart';

void main() {
  SdkContext.init(IsolateOrigin.main);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HERE SDK for Flutter - Hello Map!',
      home: HereMap(onMapViewCreated: _onMapViewCreated),
    );
  }

  void _onMapViewCreated(MapView mapView) {
    mapView.mapScene.loadSceneForMapScheme(MapScheme.normalDay,
        (MapError error) {
      if (error != null) {
        print("Map scene not loaded. MapError: " + error.toString());
      }

      double distanceToEarthInMeters = 8000;
      mapView.camera.lookAtPointWithDistance(
          GeoCoordinates(52.530932, 13.384915), distanceToEarthInMeters);
    });
  }
}

The HERE SDK requires initialization of its native libraries via SdkContext, which should happen, before your app is started. Therefore, we updated the main() function of the Flutter project.

Since the HereMap is already implemented as a stateful widget, you can set it directly as the home for your app. The private _onMapViewCreated callback notifies us when the MapView instance is created. The MapView represents the map you can interact with.

Before you can see any vector tiles on the map, we must load a map scheme. Here we load MapScheme.normalDay. As an exercise, try out other available map schemes.

The view onto the map can be defined via the camera object. In the example above we show a location in Berlin, Germany.

Now it's time to build and run the app. Start an emulator or simulator and execute flutter run from the app's directory - or run the app from within your IDE. If all goes well, you should see a HERE map covering the screen.

Screenshot: Showing the app on an iOS device.

Screenshot: Showing the app on an Android device.

HERE Logo Watermark

When using the HERE SDK, it is required that the HERE logo is always visible on the map view. By default, the HERE logo is located at the bottom right corner of the map. However, you can easily customize its location to meet your app design by calling setWatermarkPosition() on your map view instance. It is recommended to change the default placement, only when it is required due to overlapping UI elements.

Need Help?

If you need help with this or any other HERE product, select one of the options below.

  • If you have a HERE representative, contact them when you have questions/issues.
  • If you manage your applications and accounts through developer.here.com, log into your account and check the pages on the SLA report or API Health.
  • If you have more questions, please check stackoverflow.com/questions/tagged/here-api.
  • If you have questions about billing or your account, Contact Us.
  • If you have purchased your plan/product from a HERE reseller, contact your reseller.

results matching ""

    No results matching ""