Flutter MapLibre GL¶
Free
Starter
Standard
Professional
Flutter MapLibre GL is a Flutter wrapper around MapLibre GL Native and MapLibre GL JS which we recommend for most Flutter users building an iOS/Android app with vector maps. This quickstart guide shows you the quickest way to get a map in your app.
Quickstart¶
First, add the library to your pubspec under dependencies
.
dependencies:
...
maplibre_gl:
git:
url: https://github.com/maplibre/flutter-maplibre-gl.git
ref: main
Tip
You can pin to a release branch rather than main
for stability. Note that the library
is still under fairly active development and has not yet hit a v1.0 release.
Second, add the necessary dependencies to your Podfile
.
source 'https://github.com/m0nac0/flutter-maplibre-podspecs.git'
pod 'MapLibre'
pod 'MapLibreAnnotationExtension'
Finally, you're ready to instantiate a MaplibreMap
widget and add it to your app!
Here is an example of how to use it with a Stadia Maps vector style.
const styleUrl = "https://tiles.stadiamaps.com/styles/alidade_smooth_dark.json";
const apiKey = "YOUR-API-KEY";
MaplibreMap(
styleString: "$styleUrl?api_key=$apiKey",
myLocationEnabled: true,
initialCameraPosition: const CameraPosition(target: LatLng(0.0, 0.0)),
trackCameraPosition: true,
)
Tip
You can browse our map style library for additional map styles, or create your own.
Sign up for a Stadia Maps API key¶
Before you can run this, you'll need a Stadia Maps API key. You can sign up for free, and no credit card is required! After signing up, create a property and an API key (there's a button at the bottom of the property detail page in the dashboard).
Get Started With a Free Account
Gotchas¶
Warning
Make sure to test your application thoroughly on all platforms that you target. In our experience, even trivial applications can exhibit differing behavior and/or subtle bugs on one or more platforms.
If you are targeting web, you should additionally make sure to add the MapLibre GL JS
script reference in the head
section of your index.html
.
<head>
<!-- MapLibre GL JS -->
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
</head>
Next Steps¶
We have published a full example repository on GitHub which visualizes a set of earthquake data. This is analogous to the cluster example for MapLibre GL JS.
The Flutter MapLibre GL GitHub repo is the authoritative source for documentation and further information. You can find browsable API documentation hosted here.