ReadMe

A federated Flutter plugin for integrating with the native MapsIndoors SDK.

Platform	Android	iOS
Supports	SDK 21+	13.0+

Features

Use this plugin to:

• Show indoor mapping and navigation.
• Perform real-time wayfinding.
• See location live updates.

This plugin is based on the MapsIndoors-Mapbox V4 SDK for Android and iOS.

Getting Started

Add MapsIndoors to your pubspec.yaml.

mapsindoors_mapbox: ^2.1.6

Android

Setup

To get the underlying Mapbox map to function, you need to perform the following steps:

1. Navigate to android/app/src/main/res/value
2. Create a file in this folder called mapbox_api_key.xml
3. Copy and paste the below code snippet and replace YOUR_KEY_HERE with your Mapbox API key

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="mapbox_api_key" translatable="false">YOUR_KEY_HERE</string>
    <string name="mapbox_access_token" translatable="false">YOUR_KEY_HERE</string>
</resources>

MapsIndoors Gradle Setup

To ensure the plugin is able to resolve its MapsIndoors Gradle dependency, do the following:

1. Navigate to the app's project level build.gradle
2. add the following to allprojects/repositories after mavenCentral()

maven { url 'https://maven.mapsindoors.com/' }
maven {
    url 'https://api.mapbox.com/downloads/v2/releases/maven'
    authentication {
        basic(BasicAuthentication)
    }
    credentials {
        // Do not change the username below.
        // This should always be `mapbox` (not your username).
        username = "mapbox"
        // Use the secret token you stored in gradle.properties as the password
        password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
    }
}

3. put your Mapbox download token in your top-level gradle.properties file
   • MAPBOX_DOWNLOADS_TOKEN=YOUR_KEY_HERE replace YOUR_KEY_HERE with your token

iOS

The MapsIndoors SDK requires iOS 14 so make sure that your podfile is configured for iOS 14. Add use_frameworks! inside your app target as well.

platform :ios, '14.0'

target 'MyApp' do
  use_frameworks!

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  ...
end
...

Providing API key

Navigate to your application settings and add your Mapbox public access token to info with the key MBXAccessToken Setup your secret access token for downloading the sdk. Read how to do this here: Configure credentials

Usage

This section has examples of code for the following tasks:

• Showing your Map
• Showing a Route
• Searching Locations
• Changing the look with DisplayRules

Showing your Map

This snippet shows how to set up MapsIndoors in a Flutter application. First, the MapsIndoorsWidget is added to the application's build tree.

Optionally we can add a MPFloorSelector to the map. Here we use MPDefaultFloorSelector as it is provided with the MapsIndoors package. The selector must be added both to the build tree as well as to MapControl in order to function correctly.

Once initState() has been called, MapsIndoors begins initialization, and once that is done successfully, MapControl begins initialization.

Once MapControl is initialized we can invoke the goTo method to move the camera to the default venue.

import 'package:mapsindoors/mapsindoors.dart' as MapsIndoors;
import 'package:mapsindoors/mapsindoors_library.dart';

void main() {
    runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    const MyApp({super.key});

    @override
    Widget build(BuildContext context) {
        return const MaterialApp(
            // replace the string with your own api key
            home: MapWidget("demo"),
        );
    }
}

class MapWidget extends StatefulWidget {
    final String apiKey;

    const MapWidget({Key? key, required this.apiKey}) : super(key: key);

    @override
    MapWidgetState createState() => MapWidgetState();
}

class MapWidgetState extends State<MapWidget> {
    // Let's build a floor selector widget here, we need to add this to MapControl later.
    final _floorSelectorWidget = MPDefaultFloorSelector();
    // MapControl will be initialized after MapsIndoors.
    late final MapsIndoorsWidget _mapController;
​
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Container(
                // Add the MapsIndoors Widget to your Widget, it will automatically fill the container it is placed in.
                child: _mapController = MapsIndoorsWidget(
                    // build with the default floor selector, this is optional.
                    floorSelector: _floorSelectorWidget,
                    readyListener: _mapControlReadyListener,
                ),
            ),
        );
    }
​
    @override
    void initState() {
        super.initState();
        // Start initializing mapsindoors.
        loadMapsIndoors(widget.apiKey);
    }
​
    void _mapControlReadyListener(MPError? error) async {
        if (error == null) {
            // if no errors occured during MapControl load, then we can start using the map
            // Here we move the camera to the default venue.
            _mapController.goTo(await getDefaultVenue());

        } else {
            print("Creating mapcontrol faced an issue: $err");
        }
    }
}

Showing a Route

This code snippet initializes the MPDirectionsService and MPDirectionsRenderer classes, and uses _mapControl which has been initialized elsewhere.

The showRouteToLocation function is used to query a route from the user's current position to a specified location using directionsService.getRoute().

If successful, the route is displayed on the map using directionsRenderer.setRoute(route).

// We assume MapControl has already been initialized
late final _mapControl;
​
// The user is positioned somewhere in the world
var _userLocation = MPPoint.withCoordinates(longitude: -98.44, latitude: 35.16);
/// Query a route to a location from the user's position
void showRouteToLocation(MPLocation location) async {
    // initialize services
    final directionsService = MPDirectionsService();
    final directionsRenderer = MPDirectionsRenderer();
​
    // get the route from userlocation to the location
    directionsService.getRoute(origin: _userPosition, destination: location.point).then((route) {
        // When we have the route, we can show it on the map
        directionsRenderer.setRoute(route);
    }).catchError((err) => print("An error occured: $err")); // otherwise handle the error
}

Searching Locations

This code snippet shows a function called searchForParking that takes a single argument of type MPPoint. The function uses MapsIndoors to search for locations matching the query string "parking" near the point specified.

It mathces in the locations' descriptions, names, and external IDs to the query string. Once the search is complete, it is possible to update/get information from the locations (not specified in the code snippet).

/// This method searches for locations 
void searchForParking(MPPoint point) {
    final mpq = MPQuery.builder()
    // Set the search string
    ..setQuery("parking")
    // Set the point where we would like to search around
    ..setNear(point)
    // We are searcing in the locations description, name and external id.
    ..setQueryProperties([MPLocationPropertyNames.description.name, MPLocationPropertyNames.name.name, MPLocationPropertyNames.externalId.name]);
    // Apply the query on MapsIndoors.
    getLocationsByQuery(query: mpq.build()).then((locations) {
        print("number of paring near the point: ${locations?.length}");
        // do something with the locations
    });
}

Changing the look with DisplayRules

This code snippet shows three ways to manipulate display rules in the MapsIndoors SDK.

The hideLocationsByDefault() method hides all markers that are not explicitly visible by setting the main display rule to not visible.

The showLocationsByDefault() method ensures all markers are shown by setting the main display rule to visible.

The changeTypePolygonColor(String type, String color) method changes the fill color for all polygons belonging to a specific type. It gets the display rule for the specified type using getDisplayRuleByName, and sets the fill color using setPolygonFillColor.

These methods can all be used to customize the display of markers and polygons on the map.

/// This method changes the main display rule to hide all markers,
/// This will cause all locations that are not explicitly visible to be hidden.
void hideLocationsByDefault() async {
    final MPDisplayRule? main = await getMainDisplayRule();
    main?.setVisible(false);
}
​
/// This method changes the main display rule to show all markers,
/// This will cause all locations that are not explicitly visible to be shown.
void showLocationsByDefault() async {
    final MPDisplayRule? main = await getMainDisplayRule();
    main?.setVisible(true);
}
​
/// This method changes the fill color for all polygons belonging to a specific [type]
/// the [color] MUST be a valid hex color string.
void changeTypePolygonColor(String type, String color) async {
    final MPDisplayRule? rule = await getDisplayRuleByName(type);
    rule?.setPolygonFillColor(color);
}