Maps for Native and Multi-platform Apps¶
Numerous frameworks will help you integrate Stadia Maps in your mobile, desktop, or multi-platform application. The variety of choices can be overwhelming at first, so we've written a high-level overview of some popular options. This should help you decide what's best for your use case.
API Key Security
All mobile and desktop applications involve making requests using an API key. You must take care to secure this, especially if your app reaches end user outside your organization. See our authentication docs for more details.
MapLibre Native¶
MapLibre Native is the premier open-source vector map rendering library. Ongoing development is sponsored by a number of industry leaders, and Stadia Maps was instrumental in creating the organization. The core is mostly written in C++, has wrappers that provide a more native interface for iOS, Android, and other platforms, and supports native rendering APIs per-platform (ex: Metal on iOS).
Tip
If you are developing a native iOS, Android, or desktop app with the first-party stack (ex: Xcode + Swift for iOS), MapLibre Native is probably the best fit.
Strengths¶
- Native code makes it a great fit for your native application, and generally provides best-in-class performance.
- The network effect of an older, battle tested codebase and the backing of the MapLibre organization make this one of the most actively developed native map rendering libraries.
Weaknesses¶
- If you want to support multiple platforms (ex: iOS and Android), you will need to maintain two separate app codebases.
- When compared with popular web platforms like Leaflet, some tasks are not very intuitive (for example, marker clustering and popup views).
Get Started with MapLibre Native
Flutter MapLibre GL¶
Flutter MapLibre GL is a Flutter wrapper around MapLibre Native (iOS and Android) and MapLibre GL JS (web).
Tip
This package should probably be your first choice if you need to use vector tiles in a Flutter application. The fact that it is currently pre-1.0 means that the API may have breaking changes between releases, but under the hood is the battle-tested MapLibre Native.
Strengths¶
- Both mobile and web are supported out of the box.
- Flutter MapLibre GL is built on top of MapLibre Native. This provides a lot of performance benefits for mobile applications. It is also the most accurate vector tile renderer at the moment.
- Anyone who has used the underlying native or JS APIs will find the interfaces somewhat familiar.
- The library introduces some useful abstractions that simplify common use cases like adding annotations to the map in a cross-platform way.
Weaknesses¶
- Some native APIs are not exposed (mostly as a consequence of the package wrapping several platform-specific libraries).
- There are no built-in popup views for annotations.
- Desktop platforms like macOS are not currently supported.
- There are relatively few examples, so familiarity with the underlying MapLibre Native helps. You should expect to read library code every once in a while to figure out what the wrapper is doing with native code.
Get Started with Flutter MapLibre GL
flutter_map¶
flutter_map is a Flutter-first map library with over 100
contributors. It is built from the ground up (not a wrapper for an existing native library), and boasts
broad cross-platform compatibility due to its design. It is loosely inspired by Leaflet, a JavaScript
raster map library, and features a wide range of plugins.
Tip
flutter_map excels at interactive raster maps. Of the available multi-platform libraries, it
has the simplest API and has compatibility with the greatest number of platforms.
Strengths¶
- Everything (in the base package) is written in Dart using standard Flutter widgets and a few third-party dependencies, so it should work an any platform that Flutter supports, now or in the future!
- Any improvements to Flutter will also improve
flutter_map. - The plugin architecture allows for extensions such as vector tile rendering, marker clustering, caching, etc. to be developed independently of the core.
- It is very easy to build the most common map experiences, particularly ones requiring markers and popups, in a way that looks good everywhere (a win over Flutter MapLibre GL).
- The project has a sizable community of developers active on Discord and GitHub.
Weaknesses¶
- Some gestures and behaviors will feel slightly off compared to MapLibre Native or its Flutter wrapper.
- It's a newer project, which means it comes with some rough edges.
- Vector support has a number of issues including poor performance and rendering glitches.
MapLibre React Native¶
MapLibre React Native is a React Native wrapper around MapLibre Native.
Tip
This is the best option for integrating Stadia Maps with your React Native app. Previously we recommended rnmapbox, but they are dropping support for the MapLibre backend in the next release and will only support the proprietary Mapbox SDK.
Strengths¶
- MapLibre React Native is built on top of MapLibre Native, so you get all the performance of native and any improvements in the core library for free.
- It is essentially drop-in compatible with
rnmapbox(just a few changes to names that were Mapbox-specific). - Most tasks such as adding markers have intuitive APIs for React Native developers.
- Extensive examples and documentation are included in the project's GitHub repository.
Weaknesses¶
- Some APIs are not directly exposed yet, but the list is small and shrinking.