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 Plugin	Information, examples, and plugins
License	Liscense file

Using in your Project

This project is not yet available on pub.dev. You can use it by referencing it in your pubspec.yaml like this:

dependencies:
	...
	maplibre_gl:
	  git:
		url: https://github.com/maplibre/flutter-maplibre-gl.git
		ref: main

This will get you the very latest changes from the main branch. You can replace main with the name of the latest release to get a more stable version.
Run flutter pub get to bring in the new dependencies.

Creating a Map

Here is an example main.dart

Github Project Example

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 {
  final String title;
  const MyHomePage({super.key, required this.title});

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

class _MyHomePageState extends State {
  static const apiKey = "your_api_key";
  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,
		initialCameraPosition:
			const CameraPosition(target: center, zoom: startZoom),
		trackCameraPosition: true,
	  ),
	);
  }
}

Platform Notes

iOS

To enable location features in an iOS application: If you access your users' location, you should also add the following key to ios/Runner/Info.plist 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' />

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