Vector Maps for Flutter

Advanced User Setup

Using MapLibre GL SDK for Flutter apps

MapLibre GL SDK for Flutter

MapLibre is an open source project that was forked from Mapbox GL SDK. It is our preferred mapping program for interactive maps due to its modern design and ease of use.

Link	Description
Homepage	The Projects home
Flutter MapLibre Github	Information, examples, and plugins
License	Liscense file

Flutter Dependencies

Add the MapLibre Dependency to your project by running the command below.

flutter pub add maplibre_gl

See the Github page for the latest versions and changes.

Creating a Map

Here is an example main.dart.
Note The example code below was created using the Flutter Application template, and may require modification depending on how you created your project.
Be sure to update the apiKey value with your own API Key.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
	return MaterialApp(
	  title: 'Slpy+MapLibre Flutter Example',
	  theme: ThemeData(
		primarySwatch: Colors.blue,
	  ),
	  home: MyHomePage(title: 'Slpy+MapLibre Flutter Example'),
	);
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const apiKey = "your_api_key"; //Change to your Slpy API Key. 
  //Note: Specifying a domain whitelist in your API Key can cause issues when testing.
  static const mapLanguage = "en";
  static const startZoom = 3.0;
  static const center = LatLng(0, -0);

  @override
  Widget build(BuildContext context) {
	return Scaffold(
	  appBar: AppBar(
		title: Text(widget.title),
	  ),
	  body: MapLibreMap(
		styleString:
			"https://api.slpy.com/style/slpy-mgl-style.json?key=$apiKey&lang=$mapLanguage",
		myLocationEnabled: true, //requires ios and android permissions outlined in Platform Requirements section.
		initialCameraPosition:
			const CameraPosition(target: center, zoom: startZoom),
		trackCameraPosition: true,
	  ),
	);
  }
}

Platform Requirements

iOS

You must enable location features in your iOS application, or the app will crash. Add the key below to your ios/Runner/Info.plist under <dict> to explain why you need access to their location data:

xml ...
	<key>NSLocationWhenInUseUsageDescription</key>
	<string>[Your explanation here]</string>

A possible explanation could be: "Shows your location on the map".

Android

Add the ACCESS_COARSE_LOCATION or ACCESS_FINE_LOCATION permission in the application manifest android/app/src/main/AndroidManifest.xml to enable location features in an Android application:

<manifest ...
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

Starting from Android API level 23 you also need to request it at runtime. This plugin does not handle this for you. The example app uses the flutter location plugin for this.

Avoid Android UnsatisfiedLinkError

Update buildTypes in android\app\build.gradle

buildTypes {
    release {
        // other configs
        ndk {
            abiFilters 'armeabi-v7a','arm64-v8a','x86_64', 'x86'
        }
    }
}

Web

Include the following JavaScript and CSS files in the <head> of the web/index.html file.

<script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />

Build and Run

Build and Run for your preferred platforms.

Troubleshoot

If your apps launch with a blank screen, be sure to check you've updated the apiKey variable in your code. Also, try starting with a blank domain whitelist and check "Allow Empty Origin Domain" in your API Key settings.
If you're still having trouble, post your problem in the Forums.

Explore

Visit the Flutter MapLibre Plugin Github for help building features, or visit the links in the Next Steps section for Slpy API specific visual tweaks and resources.

Next Steps

Customize and add features to your new map

Settings & Features

Common settings and Language Support.
Content Filtering
Satellite, Street Level, and other features.
Compatibility for older browsers.

Map Design

Customize your maps look
Night Mode, Greyscale.
Get the Slpy Style source code.

Search & Geocoding

Add a search bar to your map.
Translate addresses to coordinates
Search for points of interest.

Documentation