feat: add maplibre plugin (#52)

- [x] `FlutterMapAdapter`
- [x] `MapLibreLayer`
- [x] update example app
- [x] add documentation

.github/ISSUE_TEMPLATE/1-bug.yml

@@ -12,6 +12,7 @@ body:
         - "other"
         - "flutter_map_cache"
         - "flutter_map_compass"
+        - "flutter_map_maplibre"
         - "flutter_map_mbtiles"
         - "flutter_map_pmtiles"
         - "vector_map_tiles_mbtiles"

.github/ISSUE_TEMPLATE/2-feature.yml

@@ -12,6 +12,7 @@ body:
         - "other"
         - "flutter_map_cache"
         - "flutter_map_compass"
+        - "flutter_map_maplibre"
         - "flutter_map_mbtiles"
         - "flutter_map_pmtiles"
         - "vector_map_tiles_mbtiles"

example/android/app/build.gradle

@@ -45,7 +45,7 @@ android {
         applicationId "com.example.example"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
-        minSdkVersion flutter.minSdkVersion
+        minSdkVersion 23 // flutter.minSdkVersion
         targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

example/android/build.gradle

@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.7.10'
+    ext.kotlin_version = '1.9.0'
     repositories {
         google()
         mavenCentral()

example/devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

example/lib/flutter_map_maplibre/config.dart

@@ -0,0 +1,8 @@
+/// **Use your own key for your project!**
+/// This key will be rotated occasionally.
+/// Protomaps offers free usage for non commercial projects and affordable
+/// pricing for commercial projects.
+///
+/// A list with a lot of compatible tile providers can be found here:
+/// https://github.com/maplibre/awesome-maplibre?tab=readme-ov-file#maptile-providers
+const protomapsKey = '48c711a2fc69c6f0';

example/lib/flutter_map_maplibre/page.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_maplibre/flutter_map_maplibre.dart';
+import 'package:flutter_map_plugins_example/common/attribution_widget.dart';
+import 'package:flutter_map_plugins_example/flutter_map_maplibre/config.dart';
+import 'package:latlong2/latlong.dart';
+
+class MapLibreFlutterMapPage extends StatefulWidget {
+  const MapLibreFlutterMapPage({super.key});
+
+  @override
+  State<MapLibreFlutterMapPage> createState() => _MapLibreFlutterMapPageState();
+}
+
+class _MapLibreFlutterMapPageState extends State<MapLibreFlutterMapPage> {
+  final _mapController = MapController();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.white,
+        title: const Text('MapLibre in FlutterMap'),
+      ),
+      body: FlutterMap(
+        mapController: _mapController,
+        options: MapOptions(
+          initialZoom: 4,
+          initialCenter: const LatLng(0, 0),
+          maxZoom: 20,
+          // maplibre does not support an unbound latitude
+          cameraConstraint: CameraConstraint.contain(
+            bounds: LatLngBounds(
+              const LatLng(-90, -180),
+              const LatLng(90, 180),
+            ),
+          ),
+        ),
+        children: [
+          const MapLibreLayer(
+            initStyle:
+                'https://api.protomaps.com/styles/v2/light.json?key=$protomapsKey',
+          ),
+          const CircleLayer(
+            circles: [
+              CircleMarker(
+                point: LatLng(10, 20),
+                radius: 15,
+                color: Colors.blue,
+                borderColor: Colors.black,
+                borderStrokeWidth: 2,
+              ),
+            ],
+          ),
+          const MarkerLayer(
+            markers: [
+              Marker(
+                point: LatLng(15, 5),
+                width: 40,
+                height: 40,
+                child: Icon(Icons.location_on, color: Colors.red, size: 40),
+                alignment: Alignment.topCenter,
+              ),
+            ],
+          ),
+          PolylineLayer(
+            polylines: [
+              Polyline(
+                points: const [
+                  LatLng(-20, -10),
+                  LatLng(-15, -15),
+                  LatLng(-20, -25),
+                ],
+                color: Colors.purple,
+                strokeWidth: 3,
+              ),
+            ],
+          ),
+          PolygonLayer(
+            polygons: [
+              Polygon(
+                points: const [
+                  LatLng(8, -25),
+                  LatLng(-5, -23),
+                  LatLng(5, -10),
+                  LatLng(10, -15),
+                ],
+                color: Colors.pink.withOpacity(0.8),
+              ),
+            ],
+          ),
+          const OsmAttributionWidget(),
+        ],
+      ),
+    );
+  }
+}

example/lib/flutter_map_maplibre/page2.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart' as fm;
+import 'package:flutter_map_maplibre/flutter_map_maplibre.dart';
+import 'package:flutter_map_plugins_example/flutter_map_maplibre/config.dart';
+import 'package:latlong2/latlong.dart';
+import 'package:maplibre/maplibre.dart';
+
+class FlutterMapMapLibrePage extends StatefulWidget {
+  const FlutterMapMapLibrePage({super.key});
+
+  @override
+  State<FlutterMapMapLibrePage> createState() => _FlutterMapMapLibrePageState();
+}
+
+class _FlutterMapMapLibrePageState extends State<FlutterMapMapLibrePage> {
+  /// The MapLibreMap controller
+  // ignore: unused_field, use_late_for_private_fields_and_variables
+  MapController? _controller;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.white,
+        title: const Text('FlutterMap in MapLibre'),
+      ),
+      body: MapLibreMap(
+        onMapCreated: (controller) => _controller = controller,
+        options: MapOptions(
+          initCenter: Position(0, 0),
+          initZoom: 3,
+          maxPitch: 0, // flutter_map doesn't support pitch, disable it here
+          initStyle:
+              'https://api.protomaps.com/styles/v2/light.json?key=$protomapsKey',
+        ),
+        children: [
+          const FlutterMapAdapter(
+            child: fm.CircleLayer(
+              circles: [
+                fm.CircleMarker(
+                  point: LatLng(10, 20),
+                  radius: 15,
+                  color: Colors.blue,
+                  borderColor: Colors.black,
+                  borderStrokeWidth: 2,
+                ),
+              ],
+            ),
+          ),
+          const FlutterMapAdapter(
+            child: fm.MarkerLayer(
+              markers: [
+                fm.Marker(
+                  point: LatLng(15, 5),
+                  width: 40,
+                  height: 40,
+                  child: Icon(Icons.location_on, color: Colors.red, size: 40),
+                  alignment: Alignment.topCenter,
+                ),
+              ],
+            ),
+          ),
+          FlutterMapAdapter(
+            child: fm.PolylineLayer(
+              polylines: [
+                fm.Polyline(
+                  points: const [
+                    LatLng(-20, -10),
+                    LatLng(-15, -15),
+                    LatLng(-20, -25),
+                  ],
+                  color: Colors.purple,
+                  strokeWidth: 3,
+                ),
+              ],
+            ),
+          ),
+          FlutterMapAdapter(
+            child: fm.PolygonLayer(
+              polygons: [
+                fm.Polygon(
+                  points: const [
+                    LatLng(8, -25),
+                    LatLng(-5, -23),
+                    LatLng(5, -10),
+                    LatLng(10, -15),
+                  ],
+                  color: Colors.pink.withOpacity(0.8),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

example/lib/main.dart

@@ -4,6 +4,8 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_map_plugins_example/flutter_map_cache/page.dart';
 import 'package:flutter_map_plugins_example/flutter_map_compass/page.dart';
+import 'package:flutter_map_plugins_example/flutter_map_maplibre/page.dart';
+import 'package:flutter_map_plugins_example/flutter_map_maplibre/page2.dart';
 import 'package:flutter_map_plugins_example/flutter_map_mbtiles/page.dart';
 import 'package:flutter_map_plugins_example/flutter_map_pmtiles/page.dart';
 import 'package:flutter_map_plugins_example/vector_map_tiles_mbtiles/page.dart';
@@ -29,13 +31,15 @@ class MyApp extends StatelessWidget {
       initialRoute: '/',
       routes: <String, WidgetBuilder>{
         '/': (context) => const SelectionPage(),
-        'flutter_map_cache': (context) => const FlutterMapCachePage(),
-        'flutter_map_pmtiles': (context) => const FlutterMapPmTilesPage(),
-        'vector_map_tiles_pmtiles': (context) => VectorMapTilesPmTilesPage(),
-        'flutter_map_mbtiles': (context) => const FlutterMapMbTilesPage(),
-        'vector_map_tiles_mbtiles': (context) =>
+        '/flutter_map_cache': (context) => const FlutterMapCachePage(),
+        '/flutter_map_pmtiles': (context) => const FlutterMapPmTilesPage(),
+        '/flutter_map_maplibre': (context) => const MapLibreFlutterMapPage(),
+        '/flutter_map_maplibre2': (context) => const FlutterMapMapLibrePage(),
+        '/vector_map_tiles_pmtiles': (context) => VectorMapTilesPmTilesPage(),
+        '/flutter_map_mbtiles': (context) => const FlutterMapMbTilesPage(),
+        '/vector_map_tiles_mbtiles': (context) =>
             const VectorMapTilesMbTilesPage(),
-        'flutter_map_compass': (context) => const FlutterMapCompassPage(),
+        '/flutter_map_compass': (context) => const FlutterMapCompassPage(),
       },
     );
   }
@@ -51,33 +55,43 @@ class SelectionPage extends StatelessWidget {
         title: 'flutter_map_cache',
         desc: 'A slim yet powerful caching plugin for flutter_map '
             'tile layers.',
-        routeName: 'flutter_map_cache',
+        routeName: '/flutter_map_cache',
       ),
       SelectionItemWidget(
         title: 'flutter_map_compass',
         desc: 'A simple compass layer to indicate the map rotation and '
             'reset the rotation on click',
-        routeName: 'flutter_map_compass',
+        routeName: '/flutter_map_compass',
+      ),
+      SelectionItemWidget(
+        title: 'flutter_map_maplibre',
+        desc: 'Performant vector tiles for flutter_map',
+        routeName: '/flutter_map_maplibre',
+      ),
+      SelectionItemWidget(
+        title: 'flutter_map_maplibre 2',
+        desc: 'Use flutter_map layers in maplibre',
+        routeName: '/flutter_map_maplibre2',
       ),
       SelectionItemWidget.disabledOnWeb(
         title: 'flutter_map_mbtiles',
         desc: 'MBTiles for flutter_map',
-        routeName: 'flutter_map_mbtiles',
+        routeName: '/flutter_map_mbtiles',
       ),
       SelectionItemWidget(
         title: 'flutter_map_pmtiles',
         desc: 'PMTiles for flutter_map',
-        routeName: 'flutter_map_pmtiles',
+        routeName: '/flutter_map_pmtiles',
       ),
       SelectionItemWidget.disabledOnWeb(
         title: 'vector_map_tiles_mbtiles',
         desc: 'MBTiles for vector_map_files / flutter_map',
-        routeName: 'vector_map_tiles_mbtiles',
+        routeName: '/vector_map_tiles_mbtiles',
       ),
       SelectionItemWidget.disabledOnWeb(
         title: 'vector_map_tiles_pmtiles',
         desc: 'PMTiles for vector_map_files / flutter_map',
-        routeName: 'vector_map_tiles_pmtiles',
+        routeName: '/vector_map_tiles_pmtiles',
       ),
     ];
 
@@ -161,7 +175,7 @@ class SelectionItemWidget extends StatelessWidget {
     );
 
     return Card(
-      color: disabled ? Colors.white54 : Colors.white,
+      color: disabled ? Colors.white70 : Colors.white,
       child: InkWell(
         onTap:
             disabled ? null : () => Navigator.of(context).pushNamed(routeName),

example/linux/flutter/generated_plugin_registrant.cc

@@ -6,10 +6,14 @@
 
 #include "generated_plugin_registrant.h"
 
+#include <maplibre/maplibre_plugin.h>
 #include <sqlite3_flutter_libs/sqlite3_flutter_libs_plugin.h>
 #include <url_launcher_linux/url_launcher_plugin.h>
 
 void fl_register_plugins(FlPluginRegistry* registry) {
+  g_autoptr(FlPluginRegistrar) maplibre_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "MaplibrePlugin");
+  maplibre_plugin_register_with_registrar(maplibre_registrar);
   g_autoptr(FlPluginRegistrar) sqlite3_flutter_libs_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "Sqlite3FlutterLibsPlugin");
   sqlite3_flutter_libs_plugin_register_with_registrar(sqlite3_flutter_libs_registrar);

example/linux/flutter/generated_plugins.cmake

@@ -3,11 +3,13 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
+  maplibre
   sqlite3_flutter_libs
   url_launcher_linux
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST
+  jni
 )
 
 set(PLUGIN_BUNDLED_LIBRARIES)

example/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -6,12 +6,14 @@ import FlutterMacOS
 import Foundation
 
 import connectivity_plus
+import maplibre
 import path_provider_foundation
 import sqlite3_flutter_libs
 import url_launcher_macos
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   ConnectivityPlusPlugin.register(with: registry.registrar(forPlugin: "ConnectivityPlusPlugin"))
+  MaplibrePlugin.register(with: registry.registrar(forPlugin: "MaplibrePlugin"))
   PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
   Sqlite3FlutterLibsPlugin.register(with: registry.registrar(forPlugin: "Sqlite3FlutterLibsPlugin"))
   UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin"))

example/pubspec.yaml

@@ -24,11 +24,14 @@ dependencies:
   vector_map_tiles: ^8.0.0
   vector_tile_renderer: ^5.2.0
   mbtiles: ^0.4.0
+  maplibre: ^0.1.0
 
   flutter_map_cache:
     path: ../flutter_map_cache
   flutter_map_compass:
     path: ../flutter_map_compass
+  flutter_map_maplibre:
+    path: ../flutter_map_maplibre
   flutter_map_mbtiles:
     path: ../flutter_map_mbtiles
   flutter_map_pmtiles: