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.