feat: maplibre gl js v5 (#190)

maplibre gl js 5 got released few minutes ago, let's add it to the 0.2.0
release...

https://github.com/maplibre/maplibre-gl-js/releases/tag/v5.0.0

CHANGELOG.md

@@ -27,9 +27,11 @@ A big thanks to @gabbopalma for his contributions in this release.
 
 ### New Features
 
+- Bump MapLibre Native on Android to 11.7.+.
+- Bump MapLibre GL JS on Web to version 5.
+- Add `style.setProjection()` to switch to globe projection programmatically.
 - Add a user location button to the `ControlButtons`.
 - Bump ktlint to 0.4.19 and gradle to 8.6.1.
-- Bump MapLibre Native on Android to 11.7.+.
 - Bump jni and jnigen to 0.13.0 and migrate bindings.
 - Widen the gradle dependency constraints to allow patch updates.
 - Add logo as pub.dev screenshot.

README.md

@@ -24,37 +24,37 @@ functionality.
 <table>
   <tbody>
     <tr>
+      <td style="text-align: center;">
+        <strong>View the planet as a globe</strong>
+        <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/2244278ecb87117286a8c3fbad89717bc1231a1d/globe%20view.jpg" alt="Tilted and rotated map" />
+      </td>
       <td style="text-align: center;">
         <strong>Use custom vector styles</strong>
         <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/d8e2c7daf15221f716a2ebbd63e57a317cb089ab/docs/static/img/showcase-map.jpg" alt="Custom styled map" />
       </td>
       <td style="text-align: center;">
         <strong>Pitch or rotate the map</strong>
-        <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/d8e2c7daf15221f716a2ebbd63e57a317cb089ab/docs/static/img/showcase-tilt.jpg" alt="Tilted and rotated map" />
-      </td>
-      <td style="text-align: center;">
-        <strong>Use raster tiles</strong>
-        <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/raster_layer.jpg" alt="Fill Layer" />
+        <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/2244278ecb87117286a8c3fbad89717bc1231a1d/tilt%20map.jpg" alt="Tilted and rotated map" />
       </td>
     </tr>
     <tr>
       <td style="text-align: center;">
-        <strong>Add circles</strong>
-        <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/fe660b8d1c055d32e74cbc2ee0809281331a130b/docs/static/img/layers/circle_layer.jpg" alt="Circle Layer" />
+        <strong>Use raster tiles</strong>
+        <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/raster_layer.jpg" alt="Fill Layer" />
       </td>
       <td style="text-align: center;">
         <strong>Add 3D building outlines</strong>
         <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/fill_extrusion_layer.jpg" alt="Fill Extrusion Layer" />
       </td>
       <td style="text-align: center;">
-        <strong>Add polygons</strong>
-        <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/fill_layer.jpg" alt="Fill Layer" />
+        <strong>Add heatmaps</strong>
+        <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/heatmap_layer.jpg" alt="Fill Layer" />
       </td>
     </tr>
     <tr>
       <td style="text-align: center;">
-        <strong>Add heatmaps</strong>
-        <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/heatmap_layer.jpg" alt="Fill Layer" />
+        <strong>Add polygons</strong>
+        <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/fill_layer.jpg" alt="Fill Layer" />
       </td>
       <td style="text-align: center;">
         <strong>Render elevation</strong>
@@ -66,6 +66,10 @@ functionality.
       </td>
     </tr>
     <tr>
+      <td style="text-align: center;">
+        <strong>Add circles</strong>
+        <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/fe660b8d1c055d32e74cbc2ee0809281331a130b/docs/static/img/layers/circle_layer.jpg" alt="Circle Layer" />
+      </td>
       <td style="text-align: center;">
         <strong>Add markers</strong>
         <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/symbol_layer.jpg" alt="Symbol Layer" />

docs/docs/getting-started/setup-web.md

@@ -13,21 +13,21 @@ your `web/index.html` file:
 <head>
     <!-- other html -->
     <!-- highlight-start -->
-    <script src='https://unpkg.com/maplibre-gl@^4.3/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@^4.3/dist/maplibre-gl.css'
+    <script src='https://unpkg.com/maplibre-gl@^5.0/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@^5.0/dist/maplibre-gl.css'
           rel='stylesheet'/>
     <!-- highlight-end -->
 </head>
 </html>
 ```
 
-`^4.3` ensures that your app will always use the latest version of
-[maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) version 4 but not
+`^5.0` ensures that your app will always use the latest version of
+[maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) version 5 but not
 suddenly
 use an incompatible version.
 
 If you want to always use the latest version use `latest` or use the full
-version number like `4.3.0` if you want to use a specific version.
+version number like `5.0.0` if you want to use a specific version.
 
 You can read about changes in maplibre-gl-js in
 the [changelog file](https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md).

docs/docs/style-layers/paint-and-layout.md

@@ -7,7 +7,7 @@ description: 'Paint and Layout properties can be used to style your layers and c
 # Paint & Layout Properties
 
 While the annotation [Layers](../category/layers) can use simple values for
-styling, [Layers](../category/layers) can use the powerful paint and layout
+styling, [Style Layers](../category/style-layers) can use the powerful paint and layout
 properties. See
 the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/layers)
 for all available properties for the different layers.

docs/docs/upgrade.md

@@ -57,4 +57,24 @@ For an easy migration, you can access it using the
 nullable `mapController.style` getter.
 
 The `onStyleLoaded` callback now returns the `StyleController` of the loaded
-style: `onStyleLoaded: (style) { ... }`
+style: `onStyleLoaded: (style) { ... }`
+
+### 4. Update your web integration
+
+maplibre 0.2.0
+uses [MapLibre GL JS version 5.0.0](https://github.com/maplibre/maplibre-gl-js/releases/tag/v5.0.0)
+onwards. Open your `web/index.html` file and update the used library version.
+
+```html title="web/index.html"
+<!DOCTYPE html>
+<html>
+<head>
+    <!-- other html -->
+    <!-- highlight-start -->
+    <script src='https://unpkg.com/maplibre-gl@^5.0/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@^5.0/dist/maplibre-gl.css'
+          rel='stylesheet'/>
+    <!-- highlight-end -->
+</head>
+</html>
+```

docs/versioned_docs/version-0.2.0/getting-started/setup-web.md → docs/versioned_docs/version-0.2.x/getting-started/setup-web.md

@@ -13,21 +13,21 @@ your `web/index.html` file:
 <head>
     <!-- other html -->
     <!-- highlight-start -->
-    <script src='https://unpkg.com/maplibre-gl@^4.3/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@^4.3/dist/maplibre-gl.css'
+    <script src='https://unpkg.com/maplibre-gl@^5.0/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@^5.0/dist/maplibre-gl.css'
           rel='stylesheet'/>
     <!-- highlight-end -->
 </head>
 </html>
 ```
 
-`^4.3` ensures that your app will always use the latest version of
-[maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) version 4 but not
+`^5.0` ensures that your app will always use the latest version of
+[maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) version 5 but not
 suddenly
 use an incompatible version.
 
 If you want to always use the latest version use `latest` or use the full
-version number like `4.3.0` if you want to use a specific version.
+version number like `5.0.0` if you want to use a specific version.
 
 You can read about changes in maplibre-gl-js in
 the [changelog file](https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md).

docs/versioned_docs/version-0.2.0/style-layers/paint-and-layout.md → docs/versioned_docs/version-0.2.x/style-layers/paint-and-layout.md

@@ -7,7 +7,7 @@ description: 'Paint and Layout properties can be used to style your layers and c
 # Paint & Layout Properties
 
 While the annotation [Layers](../category/layers) can use simple values for
-styling, [Layers](../category/layers) can use the powerful paint and layout
+styling, [Style Layers](../category/style-layers) can use the powerful paint and layout
 properties. See
 the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/layers)
 for all available properties for the different layers.

docs/versioned_docs/version-0.2.0/upgrade.md → docs/versioned_docs/version-0.2.x/upgrade.md

@@ -57,4 +57,24 @@ For an easy migration, you can access it using the
 nullable `mapController.style` getter.
 
 The `onStyleLoaded` callback now returns the `StyleController` of the loaded
-style: `onStyleLoaded: (style) { ... }`
+style: `onStyleLoaded: (style) { ... }`
+
+### 4. Update your web integration
+
+maplibre 0.2.0
+uses [MapLibre GL JS version 5.0.0](https://github.com/maplibre/maplibre-gl-js/releases/tag/v5.0.0)
+onwards. Open your `web/index.html` file and update the used library version.
+
+```html title="web/index.html"
+<!DOCTYPE html>
+<html>
+<head>
+    <!-- other html -->
+    <!-- highlight-start -->
+    <script src='https://unpkg.com/maplibre-gl@^5.0/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@^5.0/dist/maplibre-gl.css'
+          rel='stylesheet'/>
+    <!-- highlight-end -->
+</head>
+</html>
+```

docs/versioned_sidebars/version-0.2.x-sidebars.json

@@ -0,0 +1,8 @@
+{
+  "docsSidebar": [
+    {
+      "type": "autogenerated",
+      "dirName": "."
+    }
+  ]
+}

docs/versions.json

@@ -1,5 +1,5 @@
 [
-  "0.2.0",
+  "0.2.x",
   "0.1.x",
   "0.0.x"
 ]

example/integration_test/controller_test.dart

@@ -6,7 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:maplibre/maplibre.dart';
-import 'package:maplibre_example/styled_map_page.dart';
+import 'package:maplibre_example/map_styles.dart';
 
 import 'app.dart';
 
@@ -225,7 +225,7 @@ void main() {
         options: MapOptions(
           initCenter: Position(0, 0),
           initZoom: 10,
-          initStyle: StyledMapPage.styleUrl,
+          initStyle: MapStyles.protomapsLight,
         ),
       );
       await tester.pumpWidget(app);

example/integration_test/map_camera_test.dart

@@ -3,7 +3,7 @@ import 'dart:async';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:maplibre/maplibre.dart';
-import 'package:maplibre_example/styled_map_page.dart';
+import 'package:maplibre_example/map_styles.dart';
 
 import 'app.dart';
 
@@ -16,7 +16,7 @@ void main() {
         maxZoom: 2,
         initZoom: 1,
         initCenter: Position(1, 2),
-        initStyle: StyledMapPage.styleUrlDark,
+        initStyle: MapStyles.protomapsLight,
       );
       final completer = Completer<MapController>();
       await tester.pumpWidget(

example/integration_test/map_options_test.dart

@@ -3,7 +3,7 @@ import 'dart:async';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:maplibre/maplibre.dart';
-import 'package:maplibre_example/styled_map_page.dart';
+import 'package:maplibre_example/map_styles.dart';
 
 import 'app.dart';
 
@@ -16,7 +16,7 @@ void main() {
         maxZoom: 2,
         initZoom: 1,
         initCenter: Position(1, 2),
-        initStyle: StyledMapPage.styleUrlDark,
+        initStyle: MapStyles.protomapsLight,
       );
       final completer = Completer<MapController>();
       await tester.pumpWidget(

example/lib/map_styles.dart

@@ -0,0 +1,14 @@
+/// **Use your own key for your project!**
+///
+/// This key will be rotated occasionally.
+abstract class MapStyles {
+  static const protomapsLight =
+      'https://api.protomaps.com/styles/v2/light.json?key=$_protomapsKey';
+  static const protomapsDark =
+      'https://api.protomaps.com/styles/v2/dark.json?key=$_protomapsKey';
+  static const maptilerStreets =
+      'https://api.maptiler.com/maps/streets-v2/style.json?key=$_maptilerKey';
+
+  static const _maptilerKey = 'OPCgnZ51sHETbEQ4wnkd';
+  static const _protomapsKey = 'a6f9aebb3965458c';
+}

example/lib/offline_page.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:maplibre/maplibre.dart';
-import 'package:maplibre_example/styled_map_page.dart';
+import 'package:maplibre_example/map_styles.dart';
 
 @immutable
 class OfflinePage extends StatefulWidget {
@@ -51,7 +51,7 @@ class _OfflinePageState extends State<OfflinePage> {
                                   minZoom: 0,
                                   maxZoom: 2,
                                   bounds: _boundsWorld,
-                                  mapStyleUrl: StyledMapPage.styleUrl,
+                                  mapStyleUrl: MapStyles.protomapsLight,
                                   pixelDensity: 1,
                                 );
                                 try {
@@ -113,7 +113,7 @@ class _OfflinePageState extends State<OfflinePage> {
                                   minZoom: 10,
                                   maxZoom: 14,
                                   bounds: _boundsBregenz,
-                                  mapStyleUrl: StyledMapPage.styleUrl,
+                                  mapStyleUrl: MapStyles.protomapsLight,
                                   pixelDensity: 1,
                                 );
                                 try {
@@ -334,7 +334,7 @@ class _OfflineMapPage extends StatelessWidget {
       appBar: AppBar(title: Text('Offline Map "$title"')),
       body: MapLibreMap(
         options: MapOptions(
-          initStyle: StyledMapPage.styleUrl,
+          initStyle: MapStyles.protomapsLight,
           maxBounds: bounds,
           initCenter: center,
           initZoom: zoom,

example/lib/style_layers_fill_extrusion_page.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:maplibre/maplibre.dart';
-import 'package:maplibre_example/styled_map_page.dart';
+import 'package:maplibre_example/map_styles.dart';
 
 @immutable
 class StyleLayersFillExtrusionPage extends StatefulWidget {
@@ -27,7 +27,7 @@ class _StyleLayersFillExtrusionPageState
           initZoom: 15.99,
           initPitch: 40,
           initBearing: 20,
-          initStyle: StyledMapPage.styleUrl,
+          initStyle: MapStyles.protomapsLight,
         ),
         onStyleLoaded: _onStyleLoaded,
       ),

example/lib/styled_map_page.dart

@@ -1,22 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:maplibre/maplibre.dart';
+import 'package:maplibre_example/map_styles.dart';
 
 @immutable
 class StyledMapPage extends StatefulWidget {
   const StyledMapPage({super.key});
 
   static const location = '/styled-map';
 
-  /// **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. Alternatively, you can host a tile
-  /// server yourself. https://protomaps.com/
-  static const styleUrl =
-      'https://api.protomaps.com/styles/v2/light.json?key=a6f9aebb3965458c';
-  static const styleUrlDark =
-      'https://api.protomaps.com/styles/v2/dark.json?key=a6f9aebb3965458c';
-
   @override
   State<StyledMapPage> createState() => _StyledMapPageState();
 }
@@ -29,12 +20,13 @@ class _StyledMapPageState extends State<StyledMapPage> {
       body: MapLibreMap(
         options: MapOptions(
           initCenter: Position(9.17, 47.68),
-          initZoom: 8,
-          initStyle: Theme.of(context).brightness == Brightness.light
-              ? StyledMapPage.styleUrl
-              : StyledMapPage.styleUrlDark,
+          initZoom: 2,
+          initStyle: MapStyles.maptilerStreets,
         ),
         children: const [SourceAttribution()],
+        onStyleLoaded: (style) {
+          style.setProjection(MapProjection.globe);
+        },
       ),
     );
   }