From 670cb36529784fa81aad9ecc061a058022401373 Mon Sep 17 00:00:00 2001
From: Joscha <34318751+josxha@users.noreply.github.com>
Date: Fri, 24 Nov 2023 13:18:54 +0100
Subject: [PATCH] chore: refactor example app (#1734)

Co-authored-by: JaffaKetchup <github@jaffaketchup.dev>
---
 analysis_options.yaml                         |   1 -
 example/.metadata                             |  14 +-
 example/analysis_options.yaml                 |  32 +-
 example/android/.gitignore                    |   2 +
 example/android/app/build.gradle              |  38 +--
 .../android/app/src/debug/AndroidManifest.xml |   3 +-
 .../android/app/src/main/AndroidManifest.xml  |  12 +-
 .../flutter_map}/example/MainActivity.kt      |   2 +-
 .../flutter_map_example/MainActivity.kt       |   6 -
 .../app/src/main/res/values-night/styles.xml  |   4 +-
 .../app/src/main/res/values/styles.xml        |   4 +-
 .../app/src/profile/AndroidManifest.xml       |   3 +-
 example/android/build.gradle                  |   6 +-
 example/android/gradle.properties             |   2 +-
 .../gradle/wrapper/gradle-wrapper.properties  |   1 -
 example/android/settings.gradle               |  30 +-
 example/lib/main.dart                         |  17 +-
 example/lib/misc/tile_providers.dart          |  10 +
 .../lib/pages/animated_map_controller.dart    |  36 +--
 example/lib/pages/bundled_offline_map.dart    |  37 +++
 .../lib/pages/cancellable_tile_provider.dart  |  42 ++-
 example/lib/pages/circle.dart                 |  79 ++---
 example/lib/pages/custom_crs/custom_crs.dart  |  10 +-
 example/lib/pages/epsg3413_crs.dart           |  28 +-
 example/lib/pages/epsg4326_crs.dart           |  51 ++--
 example/lib/pages/fallback_url.dart           |  56 ----
 .../lib/pages/fallback_url_network_page.dart  |  27 --
 example/lib/pages/fallback_url_page.dart      |  55 ++++
 example/lib/pages/home.dart                   | 140 ++-------
 example/lib/pages/interactive_test_page.dart  |  29 +-
 example/lib/pages/latlng_to_screen_point.dart |  12 +-
 example/lib/pages/many_circles.dart           |  16 +-
 example/lib/pages/many_markers.dart           |  16 +-
 example/lib/pages/map_controller.dart         |  23 +-
 example/lib/pages/map_inside_listview.dart    |  15 +-
 example/lib/pages/markers.dart                |  12 +-
 example/lib/pages/moving_markers.dart         |  48 +--
 example/lib/pages/offline_map.dart            |  51 ----
 example/lib/pages/overlay_image.dart          | 110 +++----
 example/lib/pages/plugin_scalebar.dart        |  49 ---
 example/lib/pages/plugin_zoombuttons.dart     |  47 ---
 example/lib/pages/polygon.dart                | 178 +++++------
 example/lib/pages/polyline.dart               | 176 +++++------
 example/lib/pages/reset_tile_layer.dart       | 107 +++----
 example/lib/pages/retina.dart                 |  12 +-
 .../lib/pages/scale_layer_plugin_option.dart  |  35 ++-
 example/lib/pages/scalebar_utils.dart         |  29 +-
 example/lib/pages/screen_point_to_latlng.dart |  16 +-
 example/lib/pages/secondary_tap.dart          |  52 ++--
 example/lib/pages/sliding_map.dart            |  59 ++--
 example/lib/pages/stateful_markers.dart       |  48 +--
 example/lib/pages/tile_builder.dart           |  14 +-
 .../lib/pages/tile_loading_error_handle.dart  | 104 ++++---
 example/lib/pages/wms_tile_layer.dart         |  78 ++---
 example/lib/plugins/plugin_scalebar.dart      |  38 +++
 example/lib/plugins/plugin_zoombuttons.dart   |  35 +++
 .../zoombuttons_plugin_option.dart            |  21 +-
 example/lib/widgets/attribution.dart          |  15 -
 example/lib/widgets/drawer.dart               | 284 ------------------
 .../widgets/drawer/floating_menu_button.dart  |  33 ++
 example/lib/widgets/drawer/menu_drawer.dart   | 235 +++++++++++++++
 example/lib/widgets/drawer/menu_item.dart     |  33 ++
 example/lib/widgets/first_start_dialog.dart   |  64 ++++
 example/lib/widgets/notice_banner.dart        |  69 +++++
 example/pubspec.yaml                          |   2 +-
 .../gestures/positioned_tap_detector_2.dart   |  10 +-
 .../layer/general/translucent_pointer.dart    |  11 +-
 pubspec.yaml                                  |   2 +-
 68 files changed, 1389 insertions(+), 1547 deletions(-)
 rename example/android/app/src/main/kotlin/{me/jpryan => dev/fleaflet/flutter_map}/example/MainActivity.kt (70%)
 delete mode 100644 example/android/app/src/main/kotlin/me/jpryan/flutter_map_example/MainActivity.kt
 create mode 100644 example/lib/misc/tile_providers.dart
 create mode 100644 example/lib/pages/bundled_offline_map.dart
 delete mode 100644 example/lib/pages/fallback_url.dart
 delete mode 100644 example/lib/pages/fallback_url_network_page.dart
 create mode 100644 example/lib/pages/fallback_url_page.dart
 delete mode 100644 example/lib/pages/offline_map.dart
 delete mode 100644 example/lib/pages/plugin_scalebar.dart
 delete mode 100644 example/lib/pages/plugin_zoombuttons.dart
 create mode 100644 example/lib/plugins/plugin_scalebar.dart
 create mode 100644 example/lib/plugins/plugin_zoombuttons.dart
 rename example/lib/{pages => plugins}/zoombuttons_plugin_option.dart (78%)
 delete mode 100644 example/lib/widgets/attribution.dart
 delete mode 100644 example/lib/widgets/drawer.dart
 create mode 100644 example/lib/widgets/drawer/floating_menu_button.dart
 create mode 100644 example/lib/widgets/drawer/menu_drawer.dart
 create mode 100644 example/lib/widgets/drawer/menu_item.dart
 create mode 100644 example/lib/widgets/first_start_dialog.dart
 create mode 100644 example/lib/widgets/notice_banner.dart

diff --git a/analysis_options.yaml b/analysis_options.yaml
index 544432675..285cf1fb5 100644
--- a/analysis_options.yaml
+++ b/analysis_options.yaml
@@ -27,7 +27,6 @@ linter:
     type_annotate_public_apis: true
     unnecessary_statements: true
     use_named_constants: true
-    use_super_parameters: true
     cast_nullable_to_non_nullable: true
     only_throw_errors: true
     sort_unnamed_constructors_first: true
diff --git a/example/.metadata b/example/.metadata
index bead5eefe..7b8b9e04e 100644
--- a/example/.metadata
+++ b/example/.metadata
@@ -4,8 +4,8 @@
 # This file should be version controlled and should not be manually edited.
 
 version:
-  revision: "2524052335ec76bb03e04ede244b071f1b86d190"
-  channel: "stable"
+  revision: "0b591f2c82e9f59276ed68c7d4cbd63196f7c865"
+  channel: "beta"
 
 project_type: app
 
@@ -13,11 +13,11 @@ project_type: app
 migration:
   platforms:
     - platform: root
-      create_revision: 2524052335ec76bb03e04ede244b071f1b86d190
-      base_revision: 2524052335ec76bb03e04ede244b071f1b86d190
-    - platform: windows
-      create_revision: 2524052335ec76bb03e04ede244b071f1b86d190
-      base_revision: 2524052335ec76bb03e04ede244b071f1b86d190
+      create_revision: 0b591f2c82e9f59276ed68c7d4cbd63196f7c865
+      base_revision: 0b591f2c82e9f59276ed68c7d4cbd63196f7c865
+    - platform: android
+      create_revision: 0b591f2c82e9f59276ed68c7d4cbd63196f7c865
+      base_revision: 0b591f2c82e9f59276ed68c7d4cbd63196f7c865
 
   # User provided section
 
diff --git a/example/analysis_options.yaml b/example/analysis_options.yaml
index 71b37b60c..c659fe36c 100644
--- a/example/analysis_options.yaml
+++ b/example/analysis_options.yaml
@@ -1,30 +1,8 @@
-include: package:flutter_lints/flutter.yaml
-
-analyzer:
-  language:
-    strict-casts: true
-    strict-inference: true
-    strict-raw-types: true
-  errors:
-    missing_required_param: error
-    missing_return: error
+# match the lint rules from flutter_map
+include: ./../analysis_options.yaml
 
+# only specify things that should be different from the package
 linter:
   rules:
-    library_private_types_in_public_api: false # Not relevant to the example
-    
-    always_declare_return_types: true
-    always_use_package_imports: true
-    avoid_dynamic_calls: true
-    cancel_subscriptions: true
-    close_sinks: false 
-    package_api_docs: true
-    prefer_constructors_over_static_methods: true
-    prefer_final_in_for_each: true
-    prefer_final_locals: true
-    prefer_int_literals: true
-    test_types_in_equals: true
-    throw_in_finally: true
-    type_annotate_public_apis: true
-    unnecessary_statements: true
-    use_named_constants: true
\ No newline at end of file
+    # using the default parameter values are used as explanation and for showcase
+    avoid_redundant_argument_values: false
diff --git a/example/android/.gitignore b/example/android/.gitignore
index 0a741cb43..6f568019d 100644
--- a/example/android/.gitignore
+++ b/example/android/.gitignore
@@ -9,3 +9,5 @@ GeneratedPluginRegistrant.java
 # Remember to never publicly share your keystore.
 # See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app
 key.properties
+**/*.keystore
+**/*.jks
diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle
index a654ab681..de1ae64a5 100644
--- a/example/android/app/build.gradle
+++ b/example/android/app/build.gradle
@@ -1,3 +1,9 @@
+plugins {
+    id "com.android.application"
+    id "kotlin-android"
+    id "dev.flutter.flutter-gradle-plugin"
+}
+
 def localProperties = new Properties()
 def localPropertiesFile = rootProject.file('local.properties')
 if (localPropertiesFile.exists()) {
@@ -6,11 +12,6 @@ if (localPropertiesFile.exists()) {
     }
 }
 
-def flutterRoot = localProperties.getProperty('flutter.sdk')
-if (flutterRoot == null) {
-    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
-}
-
 def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
 if (flutterVersionCode == null) {
     flutterVersionCode = '6'
@@ -21,21 +22,27 @@ if (flutterVersionName == null) {
     flutterVersionName = '6.0.1'
 }
 
-apply plugin: 'com.android.application'
-apply plugin: 'kotlin-android'
-apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
-
 android {
-    compileSdkVersion 33
+    namespace "dev.fleaflet.flutter_map.example"
+    compileSdk flutter.compileSdkVersion
+    ndkVersion flutter.ndkVersion
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
 
     sourceSets {
         main.java.srcDirs += 'src/main/kotlin'
     }
 
     defaultConfig {
-        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
-        applicationId "me.jpryan.flutter_map_example"
-        minSdkVersion 16
+        applicationId "dev.fleaflet.flutter_map.example"
+        minSdkVersion flutter.minSdkVersion
         targetSdkVersion 31
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
@@ -48,13 +55,10 @@ android {
             signingConfig signingConfigs.debug
         }
     }
-    namespace 'me.jpryan.flutter_map_example'
 }
 
 flutter {
     source '../..'
 }
 
-dependencies {
-    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
-}
+dependencies {}
diff --git a/example/android/app/src/debug/AndroidManifest.xml b/example/android/app/src/debug/AndroidManifest.xml
index f880684a6..399f6981d 100644
--- a/example/android/app/src/debug/AndroidManifest.xml
+++ b/example/android/app/src/debug/AndroidManifest.xml
@@ -1,5 +1,6 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
-    <!-- Flutter needs it to communicate with the running application
+    <!-- The INTERNET permission is required for development. Specifically,
+         the Flutter tool needs it to communicate with the running application
          to allow setting breakpoints, to provide hot reload, etc.
     -->
     <uses-permission android:name="android.permission.INTERNET"/>
diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
index d8b2374c9..5222e963c 100644
--- a/example/android/app/src/main/AndroidManifest.xml
+++ b/example/android/app/src/main/AndroidManifest.xml
@@ -1,22 +1,16 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <!-- Requried for fetching tiles -->
     <uses-permission android:name="android.permission.INTERNET"/>
-    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
-    <queries>
-        <intent>
-            <action android:name="android.intent.action.VIEW" />
-            <data android:scheme="https" />
-        </intent>
-    </queries>
-   <application
+    <application
         android:label="flutter_map Demo"
+        android:name="${applicationName}"
         android:icon="@mipmap/ic_launcher">
         <activity
             android:name=".MainActivity"
+            android:exported="true"
             android:launchMode="singleTop"
             android:theme="@style/LaunchTheme"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
-            android:exported="true"
             android:hardwareAccelerated="true"
             android:windowSoftInputMode="adjustResize">
             <!-- Specifies an Android theme to apply to this Activity as soon as
diff --git a/example/android/app/src/main/kotlin/me/jpryan/example/MainActivity.kt b/example/android/app/src/main/kotlin/dev/fleaflet/flutter_map/example/MainActivity.kt
similarity index 70%
rename from example/android/app/src/main/kotlin/me/jpryan/example/MainActivity.kt
rename to example/android/app/src/main/kotlin/dev/fleaflet/flutter_map/example/MainActivity.kt
index 8b1e10df0..c90a560eb 100644
--- a/example/android/app/src/main/kotlin/me/jpryan/example/MainActivity.kt
+++ b/example/android/app/src/main/kotlin/dev/fleaflet/flutter_map/example/MainActivity.kt
@@ -1,4 +1,4 @@
-package me.jpryan.example
+package dev.fleaflet.flutter_map.example
 
 import io.flutter.embedding.android.FlutterActivity
 
diff --git a/example/android/app/src/main/kotlin/me/jpryan/flutter_map_example/MainActivity.kt b/example/android/app/src/main/kotlin/me/jpryan/flutter_map_example/MainActivity.kt
deleted file mode 100644
index 9dabc351a..000000000
--- a/example/android/app/src/main/kotlin/me/jpryan/flutter_map_example/MainActivity.kt
+++ /dev/null
@@ -1,6 +0,0 @@
-package me.jpryan.flutter_map_example
-
-import io.flutter.embedding.android.FlutterActivity
-
-class MainActivity: FlutterActivity() {
-}
diff --git a/example/android/app/src/main/res/values-night/styles.xml b/example/android/app/src/main/res/values-night/styles.xml
index 449a9f930..06952be74 100644
--- a/example/android/app/src/main/res/values-night/styles.xml
+++ b/example/android/app/src/main/res/values-night/styles.xml
@@ -3,14 +3,14 @@
     <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
     <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
         <!-- Show a splash screen on the activity. Automatically removed when
-             Flutter draws its first frame -->
+             the Flutter engine draws its first frame -->
         <item name="android:windowBackground">@drawable/launch_background</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your
          Flutter UI initializes, as well as behind your Flutter UI while its
          running.
-         
+
          This Theme is only used starting with V2 of Flutter's Android embedding. -->
     <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
         <item name="android:windowBackground">?android:colorBackground</item>
diff --git a/example/android/app/src/main/res/values/styles.xml b/example/android/app/src/main/res/values/styles.xml
index d74aa35c2..cb1ef8805 100644
--- a/example/android/app/src/main/res/values/styles.xml
+++ b/example/android/app/src/main/res/values/styles.xml
@@ -3,14 +3,14 @@
     <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
     <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
         <!-- Show a splash screen on the activity. Automatically removed when
-             Flutter draws its first frame -->
+             the Flutter engine draws its first frame -->
         <item name="android:windowBackground">@drawable/launch_background</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your
          Flutter UI initializes, as well as behind your Flutter UI while its
          running.
-         
+
          This Theme is only used starting with V2 of Flutter's Android embedding. -->
     <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
         <item name="android:windowBackground">?android:colorBackground</item>
diff --git a/example/android/app/src/profile/AndroidManifest.xml b/example/android/app/src/profile/AndroidManifest.xml
index f880684a6..399f6981d 100644
--- a/example/android/app/src/profile/AndroidManifest.xml
+++ b/example/android/app/src/profile/AndroidManifest.xml
@@ -1,5 +1,6 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
-    <!-- Flutter needs it to communicate with the running application
+    <!-- The INTERNET permission is required for development. Specifically,
+         the Flutter tool needs it to communicate with the running application
          to allow setting breakpoints, to provide hot reload, etc.
     -->
     <uses-permission android:name="android.permission.INTERNET"/>
diff --git a/example/android/build.gradle b/example/android/build.gradle
index 881e7e558..896d80618 100644
--- a/example/android/build.gradle
+++ b/example/android/build.gradle
@@ -2,11 +2,11 @@ buildscript {
     ext.kotlin_version = '1.8.21'
     repositories {
         google()
-        jcenter()
+        mavenCentral()
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.4.2'
+        // AGP version is set in settings.gradle.
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }
@@ -14,7 +14,7 @@ buildscript {
 allprojects {
     repositories {
         google()
-        jcenter()
+        mavenCentral()
     }
 }
 
diff --git a/example/android/gradle.properties b/example/android/gradle.properties
index 94adc3a3f..598d13fee 100644
--- a/example/android/gradle.properties
+++ b/example/android/gradle.properties
@@ -1,3 +1,3 @@
-org.gradle.jvmargs=-Xmx1536M
+org.gradle.jvmargs=-Xmx4G
 android.useAndroidX=true
 android.enableJetifier=true
diff --git a/example/android/gradle/wrapper/gradle-wrapper.properties b/example/android/gradle/wrapper/gradle-wrapper.properties
index 02e5f5817..dcf0f19c5 100644
--- a/example/android/gradle/wrapper/gradle-wrapper.properties
+++ b/example/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,4 +1,3 @@
-#Fri Jun 23 08:50:38 CEST 2017
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
diff --git a/example/android/settings.gradle b/example/android/settings.gradle
index 44e62bcf0..0d47ff5e2 100644
--- a/example/android/settings.gradle
+++ b/example/android/settings.gradle
@@ -1,11 +1,25 @@
-include ':app'
+pluginManagement {
+    def flutterSdkPath = {
+        def properties = new Properties()
+        file("local.properties").withInputStream { properties.load(it) }
+        def flutterSdkPath = properties.getProperty("flutter.sdk")
+        assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
+        return flutterSdkPath
+    }
+    settings.ext.flutterSdkPath = flutterSdkPath()
 
-def localPropertiesFile = new File(rootProject.projectDir, "local.properties")
-def properties = new Properties()
+    includeBuild("${settings.ext.flutterSdkPath}/packages/flutter_tools/gradle")
 
-assert localPropertiesFile.exists()
-localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }
+    repositories {
+        google()
+        mavenCentral()
+        gradlePluginPortal()
+    }
+}
 
-def flutterSdkPath = properties.getProperty("flutter.sdk")
-assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
-apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle"
+plugins {
+    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
+    id "com.android.application" version "7.3.0" apply false
+}
+
+include ":app"
diff --git a/example/lib/main.dart b/example/lib/main.dart
index 6a9389732..993a0da6d 100644
--- a/example/lib/main.dart
+++ b/example/lib/main.dart
@@ -1,11 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map_example/pages/animated_map_controller.dart';
+import 'package:flutter_map_example/pages/bundled_offline_map.dart';
 import 'package:flutter_map_example/pages/cancellable_tile_provider.dart';
 import 'package:flutter_map_example/pages/circle.dart';
 import 'package:flutter_map_example/pages/custom_crs/custom_crs.dart';
 import 'package:flutter_map_example/pages/epsg3413_crs.dart';
 import 'package:flutter_map_example/pages/epsg4326_crs.dart';
-import 'package:flutter_map_example/pages/fallback_url_network_page.dart';
+import 'package:flutter_map_example/pages/fallback_url_page.dart';
 import 'package:flutter_map_example/pages/home.dart';
 import 'package:flutter_map_example/pages/interactive_test_page.dart';
 import 'package:flutter_map_example/pages/latlng_to_screen_point.dart';
@@ -15,21 +16,20 @@ import 'package:flutter_map_example/pages/map_controller.dart';
 import 'package:flutter_map_example/pages/map_inside_listview.dart';
 import 'package:flutter_map_example/pages/markers.dart';
 import 'package:flutter_map_example/pages/moving_markers.dart';
-import 'package:flutter_map_example/pages/offline_map.dart';
 import 'package:flutter_map_example/pages/overlay_image.dart';
-import 'package:flutter_map_example/pages/plugin_scalebar.dart';
-import 'package:flutter_map_example/pages/plugin_zoombuttons.dart';
-import 'package:flutter_map_example/pages/screen_point_to_latlng.dart';
 import 'package:flutter_map_example/pages/polygon.dart';
 import 'package:flutter_map_example/pages/polyline.dart';
 import 'package:flutter_map_example/pages/reset_tile_layer.dart';
 import 'package:flutter_map_example/pages/retina.dart';
+import 'package:flutter_map_example/pages/screen_point_to_latlng.dart';
 import 'package:flutter_map_example/pages/secondary_tap.dart';
 import 'package:flutter_map_example/pages/sliding_map.dart';
 import 'package:flutter_map_example/pages/stateful_markers.dart';
 import 'package:flutter_map_example/pages/tile_builder.dart';
 import 'package:flutter_map_example/pages/tile_loading_error_handle.dart';
 import 'package:flutter_map_example/pages/wms_tile_layer.dart';
+import 'package:flutter_map_example/plugins/plugin_scalebar.dart';
+import 'package:flutter_map_example/plugins/plugin_zoombuttons.dart';
 import 'package:url_strategy/url_strategy.dart';
 
 void main() {
@@ -38,7 +38,7 @@ void main() {
 }
 
 class MyApp extends StatelessWidget {
-  const MyApp({Key? key}) : super(key: key);
+  const MyApp({super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -59,7 +59,7 @@ class MyApp extends StatelessWidget {
         MarkerPage.route: (context) => const MarkerPage(),
         PluginScaleBar.route: (context) => const PluginScaleBar(),
         PluginZoomButtons.route: (context) => const PluginZoomButtons(),
-        OfflineMapPage.route: (context) => const OfflineMapPage(),
+        BundledOfflineMapPage.route: (context) => const BundledOfflineMapPage(),
         MovingMarkersPage.route: (context) => const MovingMarkersPage(),
         ManyCirclesPage.route: (context) => const ManyCirclesPage(),
         CirclePage.route: (context) => const CirclePage(),
@@ -82,8 +82,7 @@ class MyApp extends StatelessWidget {
             const ScreenPointToLatLngPage(),
         LatLngToScreenPointPage.route: (context) =>
             const LatLngToScreenPointPage(),
-        FallbackUrlNetworkPage.route: (context) =>
-            const FallbackUrlNetworkPage(),
+        FallbackUrlPage.route: (context) => const FallbackUrlPage(),
         SecondaryTapPage.route: (context) => const SecondaryTapPage(),
         RetinaPage.route: (context) => const RetinaPage(),
       },
diff --git a/example/lib/misc/tile_providers.dart b/example/lib/misc/tile_providers.dart
new file mode 100644
index 000000000..8c6db0b27
--- /dev/null
+++ b/example/lib/misc/tile_providers.dart
@@ -0,0 +1,10 @@
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
+
+TileLayer get openStreetMapTileLayer => TileLayer(
+      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+      userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+      // Use the recommended flutter_map_cancellable_tile_provider package to
+      // support the cancellation of loading tiles.
+      tileProvider: CancellableNetworkTileProvider(),
+    );
diff --git a/example/lib/pages/animated_map_controller.dart b/example/lib/pages/animated_map_controller.dart
index 87941572b..313a3fbad 100644
--- a/example/lib/pages/animated_map_controller.dart
+++ b/example/lib/pages/animated_map_controller.dart
@@ -1,16 +1,16 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class AnimatedMapControllerPage extends StatefulWidget {
   static const String route = '/map_controller_animated';
 
-  const AnimatedMapControllerPage({Key? key}) : super(key: key);
+  const AnimatedMapControllerPage({super.key});
 
   @override
-  AnimatedMapControllerPageState createState() {
-    return AnimatedMapControllerPageState();
-  }
+  AnimatedMapControllerPageState createState() =>
+      AnimatedMapControllerPageState();
 }
 
 class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
@@ -44,13 +44,7 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
     ),
   ];
 
-  late final MapController mapController;
-
-  @override
-  void initState() {
-    super.initState();
-    mapController = MapController();
-  }
+  final mapController = MapController();
 
   void _animatedMapMove(LatLng destLocation, double destZoom) {
     // Create some tweens. These serve to split up the transition from one location to another.
@@ -110,13 +104,13 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Animated MapController')),
-      drawer: buildDrawer(context, AnimatedMapControllerPage.route),
+      drawer: const MenuDrawer(AnimatedMapControllerPage.route),
       body: Padding(
         padding: const EdgeInsets.all(8),
         child: Column(
           children: [
             Padding(
-              padding: const EdgeInsets.only(top: 8, bottom: 8),
+              padding: const EdgeInsets.symmetric(vertical: 8),
               child: Row(
                 children: <Widget>[
                   MaterialButton(
@@ -135,7 +129,7 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
               ),
             ),
             Padding(
-              padding: const EdgeInsets.only(top: 8, bottom: 8),
+              padding: const EdgeInsets.symmetric(vertical: 8),
               child: Row(
                 children: <Widget>[
                   MaterialButton(
@@ -177,15 +171,17 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
               child: FlutterMap(
                 mapController: mapController,
                 options: const MapOptions(
-                    initialCenter: LatLng(51.5, -0.09),
-                    initialZoom: 5,
-                    maxZoom: 10,
-                    minZoom: 3),
+                  initialCenter: LatLng(51.5, -0.09),
+                  initialZoom: 5,
+                  maxZoom: 10,
+                  minZoom: 3,
+                ),
                 children: [
                   TileLayer(
                     urlTemplate:
                         'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                     userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+                    tileProvider: CancellableNetworkTileProvider(),
                     tileUpdateTransformer: _animatedMoveTileUpdateTransformer,
                   ),
                   const MarkerLayer(markers: _markers),
@@ -208,7 +204,7 @@ final _animatedMoveTileUpdateTransformer =
   final mapEvent = updateEvent.mapEvent;
 
   final id = mapEvent is MapEventMove ? mapEvent.id : null;
-  if (id?.startsWith(AnimatedMapControllerPageState._startedId) == true) {
+  if (id?.startsWith(AnimatedMapControllerPageState._startedId) ?? false) {
     final parts = id!.split('#')[2].split(',');
     final lat = double.parse(parts[0]);
     final lon = double.parse(parts[1]);
diff --git a/example/lib/pages/bundled_offline_map.dart b/example/lib/pages/bundled_offline_map.dart
new file mode 100644
index 000000000..e64ca9da1
--- /dev/null
+++ b/example/lib/pages/bundled_offline_map.dart
@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
+
+class BundledOfflineMapPage extends StatelessWidget {
+  static const String route = '/bundled_offline_map';
+
+  const BundledOfflineMapPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Bundled Offline Map')),
+      drawer: const MenuDrawer(route),
+      body: FlutterMap(
+        options: MapOptions(
+          initialCenter: const LatLng(56.704173, 11.543808),
+          minZoom: 12,
+          maxZoom: 14,
+          cameraConstraint: CameraConstraint.containCenter(
+            bounds: LatLngBounds(
+              const LatLng(56.7378, 11.6644),
+              const LatLng(56.6877, 11.5089),
+            ),
+          ),
+        ),
+        children: [
+          TileLayer(
+            tileProvider: AssetTileProvider(),
+            maxZoom: 14,
+            urlTemplate: 'assets/map/anholt_osmbright/{z}/{x}/{y}.png',
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/example/lib/pages/cancellable_tile_provider.dart b/example/lib/pages/cancellable_tile_provider.dart
index 2f5cabcd7..ec3de2fe8 100644
--- a/example/lib/pages/cancellable_tile_provider.dart
+++ b/example/lib/pages/cancellable_tile_provider.dart
@@ -1,26 +1,48 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
 import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
+import 'package:flutter_map_example/widgets/notice_banner.dart';
 
-class CancellableTileProviderPage extends StatelessWidget {
+class CancellableTileProviderPage extends StatefulWidget {
   static const String route = '/cancellable_tile_provider_page';
 
-  const CancellableTileProviderPage({Key? key}) : super(key: key);
+  const CancellableTileProviderPage({super.key});
+
+  @override
+  State<CancellableTileProviderPage> createState() =>
+      _CancellableTileProviderPageState();
+}
+
+class _CancellableTileProviderPageState
+    extends State<CancellableTileProviderPage> {
+  bool _providerEnabled = false;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Cancellable Tile Provider')),
-      drawer: buildDrawer(context, CancellableTileProviderPage.route),
+      drawer: const MenuDrawer(CancellableTileProviderPage.route),
       body: Column(
         children: [
-          const Padding(
-            padding: EdgeInsets.all(12),
-            child: Text(
-              'This map uses a custom `TileProvider` that cancels HTTP requests for unnecessary tiles. This should help speed up tile loading and reduce unneccessary costly tile requests, mainly on the web!',
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8),
+            child: ConstrainedBox(
+              constraints: const BoxConstraints(maxWidth: 420),
+              child: SwitchListTile.adaptive(
+                title: const Text('Use CancellableNetworkTileProvider'),
+                value: _providerEnabled,
+                onChanged: (value) => setState(() => _providerEnabled = value),
+              ),
             ),
           ),
+          const NoticeBanner.recommendation(
+            text:
+                'This tile provider cancels unnecessary HTTP requests, which can help performance (especially on the web)',
+            url:
+                'https://docs.fleaflet.dev/layers/tile-layer/tile-providers#cancellablenetworktileprovider',
+            sizeTransition: 905,
+          ),
           Expanded(
             child: FlutterMap(
               options: MapOptions(
@@ -37,7 +59,9 @@ class CancellableTileProviderPage extends StatelessWidget {
                 TileLayer(
                   urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                   userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  tileProvider: CancellableNetworkTileProvider(),
+                  tileProvider: _providerEnabled
+                      ? CancellableNetworkTileProvider()
+                      : null,
                 ),
               ],
             ),
diff --git a/example/lib/pages/circle.dart b/example/lib/pages/circle.dart
index 827a878d5..4d98a03ee 100644
--- a/example/lib/pages/circle.dart
+++ b/example/lib/pages/circle.dart
@@ -1,62 +1,47 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class CirclePage extends StatelessWidget {
   static const String route = '/circle';
 
-  const CirclePage({Key? key}) : super(key: key);
+  const CirclePage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    final circleMarkers = <CircleMarker>[
-      CircleMarker(
-        point: const LatLng(51.5, -0.09),
-        color: Colors.blue.withOpacity(0.7),
-        borderColor: Colors.black,
-        borderStrokeWidth: 2,
-        useRadiusInMeter: true,
-        radius: 2000, // 2000 meters
-      ),
-      CircleMarker(
-        point: const LatLng(51.4937, -0.6638), // Dorney Lake is ~2km long
-        color: Colors.green.withOpacity(0.9),
-        borderColor: Colors.black,
-        borderStrokeWidth: 2,
-        useRadiusInMeter: true,
-        radius: 1000, // 1000 meters
-      ),
-    ];
-
     return Scaffold(
       appBar: AppBar(title: const Text('Circle')),
-      drawer: buildDrawer(context, route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text('This is a map that is showing (51.5, -0.9).'),
-            ),
-            Flexible(
-              child: FlutterMap(
-                options: const MapOptions(
-                  initialCenter: LatLng(51.5, -0.09),
-                  initialZoom: 11,
-                ),
-                children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                  CircleLayer(circles: circleMarkers),
-                ],
-              ),
-            ),
-          ],
+      drawer: const MenuDrawer(route),
+      body: FlutterMap(
+        options: const MapOptions(
+          initialCenter: LatLng(51.5, -0.09),
+          initialZoom: 11,
         ),
+        children: [
+          openStreetMapTileLayer,
+          CircleLayer(
+            circles: [
+              CircleMarker(
+                point: const LatLng(51.5, -0.09),
+                color: Colors.blue.withOpacity(0.7),
+                borderColor: Colors.black,
+                borderStrokeWidth: 2,
+                useRadiusInMeter: true,
+                radius: 2000, // 2000 meters
+              ),
+              CircleMarker(
+                point: const LatLng(51.4937, -0.6638),
+                // Dorney Lake is ~2km long
+                color: Colors.green.withOpacity(0.9),
+                borderColor: Colors.black,
+                borderStrokeWidth: 2,
+                useRadiusInMeter: true,
+                radius: 1000, // 1000 meters
+              ),
+            ],
+          ),
+        ],
       ),
     );
   }
diff --git a/example/lib/pages/custom_crs/custom_crs.dart b/example/lib/pages/custom_crs/custom_crs.dart
index 96ce33200..aba6f6bb1 100644
--- a/example/lib/pages/custom_crs/custom_crs.dart
+++ b/example/lib/pages/custom_crs/custom_crs.dart
@@ -2,20 +2,20 @@ import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 import 'package:proj4dart/proj4dart.dart' as proj4;
 import 'package:url_launcher/url_launcher.dart';
 
 class CustomCrsPage extends StatefulWidget {
   static const String route = '/crs_custom';
 
-  const CustomCrsPage({Key? key}) : super(key: key);
+  const CustomCrsPage({super.key});
 
   @override
-  _CustomCrsPageState createState() => _CustomCrsPageState();
+  CustomCrsPageState createState() => CustomCrsPageState();
 }
 
-class _CustomCrsPageState extends State<CustomCrsPage> {
+class CustomCrsPageState extends State<CustomCrsPage> {
   late final Proj4Crs epsg3413CRS;
 
   double? maxZoom;
@@ -92,7 +92,7 @@ class _CustomCrsPageState extends State<CustomCrsPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Custom CRS')),
-      drawer: buildDrawer(context, CustomCrsPage.route),
+      drawer: const MenuDrawer(CustomCrsPage.route),
       body: Padding(
         padding: const EdgeInsets.all(8),
         child: Column(
diff --git a/example/lib/pages/epsg3413_crs.dart b/example/lib/pages/epsg3413_crs.dart
index 648999b8d..dd266f3c6 100644
--- a/example/lib/pages/epsg3413_crs.dart
+++ b/example/lib/pages/epsg3413_crs.dart
@@ -2,22 +2,25 @@ import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 import 'package:proj4dart/proj4dart.dart' as proj4;
 import 'package:url_launcher/url_launcher.dart';
 
 class EPSG3413Page extends StatefulWidget {
   static const String route = '/crs_epsg3413';
 
-  const EPSG3413Page({Key? key}) : super(key: key);
+  const EPSG3413Page({super.key});
 
   @override
-  _EPSG3413PageState createState() => _EPSG3413PageState();
+  EPSG3413PageState createState() => EPSG3413PageState();
 }
 
-class _EPSG3413PageState extends State<EPSG3413Page> {
+class EPSG3413PageState extends State<EPSG3413Page> {
   late final Proj4Crs epsg3413CRS;
 
+  final distancePoleToLat80 =
+      const Distance().distance(const LatLng(90, 0), const LatLng(80, 0));
+
   double? maxZoom;
 
   @override
@@ -42,14 +45,17 @@ class _EPSG3413PageState extends State<EPSG3413Page> {
       const Point<double>(4510883, 4510996),
     );
 
-    maxZoom = (resolutions.length - 1).toDouble();
+    maxZoom = resolutions.length - 1;
 
     // EPSG:3413 is a user-defined projection from a valid Proj4 definition string
     // From: http://epsg.io/3413, proj definition: http://epsg.io/3413.proj4
     // Find Projection by name or define it if not exists
     final proj4.Projection epsg3413 = proj4.Projection.get('EPSG:3413') ??
-        proj4.Projection.add('EPSG:3413',
-            '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+        proj4.Projection.add(
+          'EPSG:3413',
+          '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 '
+              '+datum=WGS84 +units=m +no_defs',
+        );
 
     epsg3413CRS = Proj4Crs.fromFactory(
       code: 'EPSG:3413',
@@ -83,8 +89,6 @@ class _EPSG3413PageState extends State<EPSG3413Page> {
     }
 
     // Add latitude line at 80 degrees
-    final distancePoleToLat80 =
-        const Distance().distance(const LatLng(90, 0), const LatLng(80, 0));
     circles.add(CircleMarker(
       point: const LatLng(90, 0),
       radius: distancePoleToLat80,
@@ -96,7 +100,7 @@ class _EPSG3413PageState extends State<EPSG3413Page> {
 
     return Scaffold(
       appBar: AppBar(title: const Text('EPSG:3413 CRS')),
-      drawer: buildDrawer(context, EPSG3413Page.route),
+      drawer: const MenuDrawer(EPSG3413Page.route),
       body: Padding(
         padding: const EdgeInsets.all(8),
         child: Column(
@@ -164,7 +168,9 @@ class _EPSG3413PageState extends State<EPSG3413Page> {
                     popupInitialDisplayDuration: const Duration(seconds: 5),
                     attributions: [
                       TextSourceAttribution(
-                        'Imagery reproduced from the GEBCO_2022 Grid, GEBCO Compilation Group (2022) GEBCO 2022 Grid (doi:10.5285/e0f0bb80-ab44-2739-e053-6c86abc0289c)',
+                        'Imagery reproduced from the GEBCO_2022 Grid, GEBCO '
+                        'Compilation Group (2022) GEBCO 2022 Grid '
+                        '(doi:10.5285/e0f0bb80-ab44-2739-e053-6c86abc0289c)',
                         onTap: () => launchUrl(
                           Uri.parse(
                             'https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/#polar',
diff --git a/example/lib/pages/epsg4326_crs.dart b/example/lib/pages/epsg4326_crs.dart
index 30eb12695..5b46d34db 100644
--- a/example/lib/pages/epsg4326_crs.dart
+++ b/example/lib/pages/epsg4326_crs.dart
@@ -1,47 +1,34 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class EPSG4326Page extends StatelessWidget {
   static const String route = '/crs_epsg4326';
 
-  const EPSG4326Page({Key? key}) : super(key: key);
+  const EPSG4326Page({super.key});
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('EPSG4326')),
-      drawer: buildDrawer(context, route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text('This is a map that is showing (42.58, 12.43).'),
-            ),
-            Flexible(
-              child: FlutterMap(
-                options: const MapOptions(
-                  minZoom: 0,
-                  crs: Epsg4326(),
-                  initialCenter: LatLng(0, 0),
-                  initialZoom: 0,
-                ),
-                children: [
-                  TileLayer(
-                    wmsOptions: WMSTileLayerOptions(
-                      crs: const Epsg4326(),
-                      baseUrl: 'https://ows.mundialis.de/services/service?',
-                      layers: const ['TOPO-OSM-WMS'],
-                    ),
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                ],
-              ),
-            ),
-          ],
+      drawer: const MenuDrawer(route),
+      body: FlutterMap(
+        options: const MapOptions(
+          minZoom: 0,
+          crs: Epsg4326(),
+          initialCenter: LatLng(0, 0),
+          initialZoom: 0,
         ),
+        children: [
+          TileLayer(
+            wmsOptions: WMSTileLayerOptions(
+              crs: const Epsg4326(),
+              baseUrl: 'https://ows.mundialis.de/services/service?',
+              layers: const ['TOPO-OSM-WMS'],
+            ),
+            userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+          ),
+        ],
       ),
     );
   }
diff --git a/example/lib/pages/fallback_url.dart b/example/lib/pages/fallback_url.dart
deleted file mode 100644
index 5831e4382..000000000
--- a/example/lib/pages/fallback_url.dart
+++ /dev/null
@@ -1,56 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
-
-class FallbackUrlPage extends StatelessWidget {
-  final String route;
-  final TileLayer tileLayer;
-  final String title;
-  final String description;
-  final double zoom;
-  final double? maxZoom;
-  final double? minZoom;
-  final LatLng center;
-
-  const FallbackUrlPage({
-    Key? key,
-    required this.route,
-    required this.tileLayer,
-    required this.title,
-    required this.description,
-    required this.center,
-    this.zoom = 13,
-    this.maxZoom,
-    this.minZoom,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: Text(title)),
-      drawer: buildDrawer(context, route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            Padding(
-              padding: const EdgeInsets.only(top: 8, bottom: 8),
-              child: Text(description),
-            ),
-            Flexible(
-              child: FlutterMap(
-                options: MapOptions(
-                  initialCenter: center,
-                  initialZoom: zoom,
-                  maxZoom: maxZoom,
-                  minZoom: minZoom,
-                ),
-                children: [tileLayer],
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
diff --git a/example/lib/pages/fallback_url_network_page.dart b/example/lib/pages/fallback_url_network_page.dart
deleted file mode 100644
index 0461694a5..000000000
--- a/example/lib/pages/fallback_url_network_page.dart
+++ /dev/null
@@ -1,27 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/pages/fallback_url.dart';
-
-class FallbackUrlNetworkPage extends StatelessWidget {
-  static const String route = '/fallback_url_network';
-
-  const FallbackUrlNetworkPage({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return FallbackUrlPage(
-      route: route,
-      tileLayer: TileLayer(
-        urlTemplate: 'https://fake-tile-provider.org/{z}/{x}/{y}.png',
-        fallbackUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-        subdomains: const ['a', 'b', 'c'],
-        userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-      ),
-      title: 'Fallback URL NetworkTileProvider',
-      description:
-          'Map with a fake url should use the fallback, showing (51.5, -0.9).',
-      zoom: 5,
-      center: const LatLng(51.5, -0.09),
-    );
-  }
-}
diff --git a/example/lib/pages/fallback_url_page.dart b/example/lib/pages/fallback_url_page.dart
new file mode 100644
index 000000000..893b34f54
--- /dev/null
+++ b/example/lib/pages/fallback_url_page.dart
@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
+import 'package:flutter_map_example/widgets/notice_banner.dart';
+
+class FallbackUrlPage extends StatelessWidget {
+  static const String route = '/fallback_url';
+
+  const FallbackUrlPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Fallback URL')),
+      drawer: const MenuDrawer(route),
+      body: Column(
+        children: [
+          const Padding(
+            padding: EdgeInsets.all(8),
+            child: Text(
+              'Map with a fake (innaccessible) URL should use the fallback URL',
+              textAlign: TextAlign.center,
+            ),
+          ),
+          const NoticeBanner.warning(
+            text: 'Relying on a fallback URL may have a negative performance '
+                'impact',
+            url: 'https://docs.fleaflet.dev/layers/tile-layer/tile-providers',
+            sizeTransition: 650,
+          ),
+          Flexible(
+            child: FlutterMap(
+              options: const MapOptions(
+                initialCenter: LatLng(51.5, -0.09),
+                initialZoom: 5,
+              ),
+              children: [
+                TileLayer(
+                  // use an invalid domain as example as an provider that
+                  // is not reachable
+                  urlTemplate:
+                      'https://not-a-real-provider-url.local/{z}/{x}/{y}.png',
+                  fallbackUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+                  tileProvider: CancellableNetworkTileProvider(),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/example/lib/pages/home.dart b/example/lib/pages/home.dart
index bb72cf7e0..ba3e1fbe7 100644
--- a/example/lib/pages/home.dart
+++ b/example/lib/pages/home.dart
@@ -2,14 +2,17 @@ import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/floating_menu_button.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
+import 'package:flutter_map_example/widgets/first_start_dialog.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class HomePage extends StatefulWidget {
   static const String route = '/';
 
-  const HomePage({Key? key}) : super(key: key);
+  const HomePage({super.key});
 
   @override
   State<HomePage> createState() => _HomePageState();
@@ -19,86 +22,13 @@ class _HomePageState extends State<HomePage> {
   @override
   void initState() {
     super.initState();
-
-    const seenIntroBoxKey = 'seenIntroBox(a)';
-    if (kIsWeb && Uri.base.host.trim() == 'demo.fleaflet.dev') {
-      SchedulerBinding.instance.addPostFrameCallback(
-        (_) async {
-          final prefs = await SharedPreferences.getInstance();
-          if (prefs.getBool(seenIntroBoxKey) ?? false) return;
-
-          if (!mounted) return;
-
-          final width = MediaQuery.of(context).size.width;
-          await showDialog<void>(
-            context: context,
-            builder: (context) => AlertDialog(
-              icon: UnconstrainedBox(
-                child: SizedBox.square(
-                  dimension: 64,
-                  child:
-                      Image.asset('assets/ProjectIcon.png', fit: BoxFit.fill),
-                ),
-              ),
-              title: const Text('flutter_map Live Web Demo'),
-              content: ConstrainedBox(
-                constraints: BoxConstraints(
-                  maxWidth: width < 750
-                      ? double.infinity
-                      : (width / (width < 1100 ? 1.5 : 2.5)),
-                ),
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    const Text(
-                      "This is built automatically off of the latest commits to 'master', so may not reflect the latest release available on pub.dev.\nThis is hosted on Firebase Hosting, meaning there's limited bandwidth to share between all users, so please keep loads to a minimum.",
-                      textAlign: TextAlign.center,
-                    ),
-                    Padding(
-                      padding:
-                          const EdgeInsets.only(right: 8, top: 16, bottom: 4),
-                      child: Align(
-                        alignment: Alignment.centerRight,
-                        child: Text(
-                          "This won't be shown again",
-                          style: TextStyle(
-                            color: Theme.of(context)
-                                .colorScheme
-                                .inverseSurface
-                                .withOpacity(0.5),
-                          ),
-                          textAlign: TextAlign.right,
-                        ),
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-              actions: [
-                TextButton.icon(
-                  onPressed: () => Navigator.of(context).pop(),
-                  label: const Text('OK'),
-                  icon: const Icon(Icons.done),
-                ),
-              ],
-              contentPadding: const EdgeInsets.only(
-                left: 24,
-                top: 16,
-                bottom: 0,
-                right: 24,
-              ),
-            ),
-          );
-          await prefs.setBool(seenIntroBoxKey, true);
-        },
-      );
-    }
+    showIntroDialogIfNeeded();
   }
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      drawer: buildDrawer(context, HomePage.route),
+      drawer: const MenuDrawer(HomePage.route),
       body: Stack(
         children: [
           FlutterMap(
@@ -113,10 +43,7 @@ class _HomePageState extends State<HomePage> {
               ),
             ),
             children: [
-              TileLayer(
-                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-              ),
+              openStreetMapTileLayer,
               RichAttributionWidget(
                 popupInitialDisplayDuration: const Duration(seconds: 5),
                 animationConfig: const ScaleRAWA(),
@@ -129,42 +56,37 @@ class _HomePageState extends State<HomePage> {
                     ),
                   ),
                   const TextSourceAttribution(
-                    'This attribution is the same throughout this app, except where otherwise specified',
+                    'This attribution is the same throughout this app, except '
+                    'where otherwise specified',
                     prependCopyright: false,
                   ),
                 ],
               ),
             ],
           ),
-          PositionedDirectional(
-            start: 16,
-            top: 16,
-            child: SafeArea(
-              child: Container(
-                decoration: BoxDecoration(
-                  color: Theme.of(context).colorScheme.background,
-                  borderRadius: BorderRadius.circular(999),
-                ),
-                padding: const EdgeInsets.all(8),
-                child: Row(
-                  children: [
-                    Builder(
-                      builder: (context) => IconButton(
-                        onPressed: () => Scaffold.of(context).openDrawer(),
-                        icon: const Icon(Icons.menu),
-                      ),
-                    ),
-                    const SizedBox(width: 8),
-                    Image.asset('assets/ProjectIcon.png',
-                        height: 32, width: 32),
-                    const SizedBox(width: 8),
-                  ],
-                ),
-              ),
-            ),
-          )
+          const FloatingMenuButton()
         ],
       ),
     );
   }
+
+  void showIntroDialogIfNeeded() {
+    const seenIntroBoxKey = 'seenIntroBox(a)';
+    if (kIsWeb && Uri.base.host.trim() == 'demo.fleaflet.dev') {
+      SchedulerBinding.instance.addPostFrameCallback(
+        (_) async {
+          final prefs = await SharedPreferences.getInstance();
+          if (prefs.getBool(seenIntroBoxKey) ?? false) return;
+
+          if (!mounted) return;
+
+          await showDialog<void>(
+            context: context,
+            builder: (context) => const FirstStartDialog(),
+          );
+          await prefs.setBool(seenIntroBoxKey, true);
+        },
+      );
+    }
+  }
 }
diff --git a/example/lib/pages/interactive_test_page.dart b/example/lib/pages/interactive_test_page.dart
index a15c2103a..69db1cb79 100644
--- a/example/lib/pages/interactive_test_page.dart
+++ b/example/lib/pages/interactive_test_page.dart
@@ -1,11 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class InteractiveFlagsPage extends StatefulWidget {
   static const String route = '/interactive_flags_page';
 
-  const InteractiveFlagsPage({Key? key}) : super(key: key);
+  const InteractiveFlagsPage({super.key});
 
   @override
   State createState() => _InteractiveFlagsPageState();
@@ -36,17 +37,16 @@ class _InteractiveFlagsPageState extends State<InteractiveFlagsPage> {
 
   @override
   Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.sizeOf(context).width;
     return Scaffold(
       appBar: AppBar(title: const Text('Interactive Flags')),
-      drawer: buildDrawer(context, InteractiveFlagsPage.route),
+      drawer: const MenuDrawer(InteractiveFlagsPage.route),
       body: Padding(
         padding: const EdgeInsets.all(8),
         child: Column(
           children: [
             Flex(
-              direction: MediaQuery.of(context).size.width >= 600
-                  ? Axis.horizontal
-                  : Axis.vertical,
+              direction: screenWidth >= 600 ? Axis.horizontal : Axis.vertical,
               mainAxisSize: MainAxisSize.max,
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: availableFlags.entries
@@ -97,19 +97,18 @@ class _InteractiveFlagsPageState extends State<InteractiveFlagsPage> {
                     ),
                   )
                   .interleave(
-                    MediaQuery.of(context).size.width >= 600
-                        ? null
-                        : const SizedBox(height: 12),
+                    screenWidth >= 600 ? null : const SizedBox(height: 12),
                   )
                   .whereType<Widget>()
                   .toList(),
             ),
             const Divider(),
             Padding(
-              padding: const EdgeInsets.only(top: 8, bottom: 8),
+              padding: const EdgeInsets.symmetric(vertical: 8),
               child: Center(
                 child: Text(
-                  'Current event: ${_eventName(_latestEvent)}\nSource: ${_latestEvent?.source.name ?? "none"}',
+                  'Current event: ${_eventName(_latestEvent)}\n'
+                  'Source: ${_latestEvent?.source.name ?? "none"}',
                   textAlign: TextAlign.center,
                 ),
               ),
@@ -131,13 +130,7 @@ class _InteractiveFlagsPageState extends State<InteractiveFlagsPage> {
                     ),
                   ),
                 ),
-                children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                ],
+                children: [openStreetMapTileLayer],
               ),
             ),
           ],
diff --git a/example/lib/pages/latlng_to_screen_point.dart b/example/lib/pages/latlng_to_screen_point.dart
index 6d91d985d..eacdd994c 100644
--- a/example/lib/pages/latlng_to_screen_point.dart
+++ b/example/lib/pages/latlng_to_screen_point.dart
@@ -3,12 +3,13 @@ import 'dart:math';
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class LatLngToScreenPointPage extends StatefulWidget {
   static const String route = '/latlng_to_screen_point';
 
-  const LatLngToScreenPointPage({Key? key}) : super(key: key);
+  const LatLngToScreenPointPage({super.key});
 
   @override
   State<LatLngToScreenPointPage> createState() =>
@@ -37,7 +38,7 @@ class _LatLngToScreenPointPageState extends State<LatLngToScreenPointPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Lat/Lng 🡒 Screen Point')),
-      drawer: buildDrawer(context, LatLngToScreenPointPage.route),
+      drawer: const MenuDrawer(LatLngToScreenPointPage.route),
       body: Stack(
         children: [
           FlutterMap(
@@ -55,10 +56,7 @@ class _LatLngToScreenPointPageState extends State<LatLngToScreenPointPage> {
               },
             ),
             children: [
-              TileLayer(
-                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-              ),
+              openStreetMapTileLayer,
               if (tappedCoords != null)
                 MarkerLayer(
                   markers: [
diff --git a/example/lib/pages/many_circles.dart b/example/lib/pages/many_circles.dart
index b0ab6789a..93f48bb44 100644
--- a/example/lib/pages/many_circles.dart
+++ b/example/lib/pages/many_circles.dart
@@ -2,7 +2,8 @@ import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 const maxCirclesCount = 20000;
 
@@ -13,13 +14,13 @@ const maxCirclesCount = 20000;
 class ManyCirclesPage extends StatefulWidget {
   static const String route = '/many_circles';
 
-  const ManyCirclesPage({Key? key}) : super(key: key);
+  const ManyCirclesPage({super.key});
 
   @override
-  _ManyCirclesPageState createState() => _ManyCirclesPageState();
+  ManyCirclesPageState createState() => ManyCirclesPageState();
 }
 
-class _ManyCirclesPageState extends State<ManyCirclesPage> {
+class ManyCirclesPageState extends State<ManyCirclesPage> {
   double doubleInRange(Random source, num start, num end) =>
       source.nextDouble() * (end - start) + start;
   List<CircleMarker> allCircles = [];
@@ -51,7 +52,7 @@ class _ManyCirclesPageState extends State<ManyCirclesPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('A lot of circles')),
-      drawer: buildDrawer(context, ManyCirclesPage.route),
+      drawer: const MenuDrawer(ManyCirclesPage.route),
       body: Column(
         children: [
           Slider(
@@ -76,10 +77,7 @@ class _ManyCirclesPageState extends State<ManyCirclesPage> {
                 ),
               ),
               children: [
-                TileLayer(
-                  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                ),
+                openStreetMapTileLayer,
                 CircleLayer(
                     circles: allCircles.sublist(
                         0, min(allCircles.length, _sliderVal))),
diff --git a/example/lib/pages/many_markers.dart b/example/lib/pages/many_markers.dart
index 4ffc8495e..4c7aa6e08 100644
--- a/example/lib/pages/many_markers.dart
+++ b/example/lib/pages/many_markers.dart
@@ -2,7 +2,8 @@ import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 const maxMarkersCount = 20000;
 
@@ -13,13 +14,13 @@ const maxMarkersCount = 20000;
 class ManyMarkersPage extends StatefulWidget {
   static const String route = '/many_markers';
 
-  const ManyMarkersPage({Key? key}) : super(key: key);
+  const ManyMarkersPage({super.key});
 
   @override
-  _ManyMarkersPageState createState() => _ManyMarkersPageState();
+  ManyMarkersPageState createState() => ManyMarkersPageState();
 }
 
-class _ManyMarkersPageState extends State<ManyMarkersPage> {
+class ManyMarkersPageState extends State<ManyMarkersPage> {
   double doubleInRange(Random source, num start, num end) =>
       source.nextDouble() * (end - start) + start;
   List<Marker> allMarkers = [];
@@ -49,7 +50,7 @@ class _ManyMarkersPageState extends State<ManyMarkersPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('A lot of markers')),
-      drawer: buildDrawer(context, ManyMarkersPage.route),
+      drawer: const MenuDrawer(ManyMarkersPage.route),
       body: Column(
         children: [
           Slider(
@@ -74,10 +75,7 @@ class _ManyMarkersPageState extends State<ManyMarkersPage> {
                 ),
               ),
               children: [
-                TileLayer(
-                  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                ),
+                openStreetMapTileLayer,
                 MarkerLayer(
                   markers: allMarkers.sublist(
                     0,
diff --git a/example/lib/pages/map_controller.dart b/example/lib/pages/map_controller.dart
index 3380c45a0..7f930b0a6 100644
--- a/example/lib/pages/map_controller.dart
+++ b/example/lib/pages/map_controller.dart
@@ -1,16 +1,15 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class MapControllerPage extends StatefulWidget {
   static const String route = 'map_controller';
 
-  const MapControllerPage({Key? key}) : super(key: key);
+  const MapControllerPage({super.key});
 
   @override
-  MapControllerPageState createState() {
-    return MapControllerPageState();
-  }
+  MapControllerPageState createState() => MapControllerPageState();
 }
 
 class MapControllerPageState extends State<MapControllerPage> {
@@ -52,13 +51,13 @@ class MapControllerPageState extends State<MapControllerPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('MapController')),
-      drawer: buildDrawer(context, MapControllerPage.route),
+      drawer: const MenuDrawer(MapControllerPage.route),
       body: Padding(
         padding: const EdgeInsets.all(8),
         child: Column(
           children: [
             Padding(
-              padding: const EdgeInsets.only(top: 8, bottom: 8),
+              padding: const EdgeInsets.symmetric(vertical: 8),
               child: Row(
                 children: <Widget>[
                   MaterialButton(
@@ -77,7 +76,7 @@ class MapControllerPageState extends State<MapControllerPage> {
               ),
             ),
             Padding(
-              padding: const EdgeInsets.only(top: 8, bottom: 8),
+              padding: const EdgeInsets.symmetric(vertical: 8),
               child: Row(
                 children: <Widget>[
                   MaterialButton(
@@ -97,7 +96,7 @@ class MapControllerPageState extends State<MapControllerPage> {
                     },
                     child: const Text('Fit Bounds'),
                   ),
-                  Builder(builder: (BuildContext context) {
+                  Builder(builder: (context) {
                     return MaterialButton(
                       onPressed: () {
                         final bounds = _mapController.camera.visibleBounds;
@@ -142,11 +141,7 @@ class MapControllerPageState extends State<MapControllerPage> {
                   minZoom: 3,
                 ),
                 children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
+                  openStreetMapTileLayer,
                   const MarkerLayer(markers: _markers),
                 ],
               ),
diff --git a/example/lib/pages/map_inside_listview.dart b/example/lib/pages/map_inside_listview.dart
index 2915115f0..d57d10094 100644
--- a/example/lib/pages/map_inside_listview.dart
+++ b/example/lib/pages/map_inside_listview.dart
@@ -1,18 +1,19 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/pages/zoombuttons_plugin_option.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/plugins/zoombuttons_plugin_option.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class MapInsideListViewPage extends StatelessWidget {
   static const String route = '/map_inside_listview';
 
-  const MapInsideListViewPage({Key? key}) : super(key: key);
+  const MapInsideListViewPage({super.key});
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Map inside ListView')),
-      drawer: buildDrawer(context, MapInsideListViewPage.route),
+      drawer: const MenuDrawer(MapInsideListViewPage.route),
       body: Padding(
         padding: const EdgeInsets.all(8),
         child: ListView(
@@ -26,11 +27,7 @@ class MapInsideListViewPage extends StatelessWidget {
                   initialZoom: 5,
                 ),
                 children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
+                  openStreetMapTileLayer,
                   const FlutterMapZoomButtons(
                     minZoom: 4,
                     maxZoom: 19,
diff --git a/example/lib/pages/markers.dart b/example/lib/pages/markers.dart
index a19df6d71..d62caa16d 100644
--- a/example/lib/pages/markers.dart
+++ b/example/lib/pages/markers.dart
@@ -1,11 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class MarkerPage extends StatefulWidget {
   static const String route = '/markers';
 
-  const MarkerPage({Key? key}) : super(key: key);
+  const MarkerPage({super.key});
 
   @override
   State<MarkerPage> createState() => _MarkerPageState();
@@ -43,7 +44,7 @@ class _MarkerPageState extends State<MarkerPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Markers')),
-      drawer: buildDrawer(context, MarkerPage.route),
+      drawer: const MenuDrawer(MarkerPage.route),
       body: Column(
         children: [
           Padding(
@@ -114,10 +115,7 @@ class _MarkerPageState extends State<MarkerPage> {
                 ),
               ),
               children: [
-                TileLayer(
-                  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                ),
+                openStreetMapTileLayer,
                 MarkerLayer(
                   rotate: counterRotate,
                   markers: const [
diff --git a/example/lib/pages/moving_markers.dart b/example/lib/pages/moving_markers.dart
index edb7eeeac..5d80dedeb 100644
--- a/example/lib/pages/moving_markers.dart
+++ b/example/lib/pages/moving_markers.dart
@@ -2,20 +2,19 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class MovingMarkersPage extends StatefulWidget {
   static const String route = '/moving_markers';
 
-  const MovingMarkersPage({Key? key}) : super(key: key);
+  const MovingMarkersPage({super.key});
 
   @override
-  _MovingMarkersPageState createState() {
-    return _MovingMarkersPageState();
-  }
+  MovingMarkersPageState createState() => MovingMarkersPageState();
 }
 
-class _MovingMarkersPageState extends State<MovingMarkersPage> {
+class MovingMarkersPageState extends State<MovingMarkersPage> {
   Marker? _marker;
   late final Timer _timer;
   int _markerIndex = 0;
@@ -62,34 +61,17 @@ class _MovingMarkersPageState extends State<MovingMarkersPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('Home')),
-      drawer: buildDrawer(context, MovingMarkersPage.route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text('This is a map that is showing (51.5, -0.9).'),
-            ),
-            Flexible(
-              child: FlutterMap(
-                options: const MapOptions(
-                  initialCenter: LatLng(51.5, -0.09),
-                  initialZoom: 5,
-                ),
-                children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                  MarkerLayer(markers: [_marker!]),
-                ],
-              ),
-            ),
-          ],
+      appBar: AppBar(title: const Text('Moving Markers')),
+      drawer: const MenuDrawer(MovingMarkersPage.route),
+      body: FlutterMap(
+        options: const MapOptions(
+          initialCenter: LatLng(51.5, -0.09),
+          initialZoom: 5,
         ),
+        children: [
+          openStreetMapTileLayer,
+          MarkerLayer(markers: [_marker!]),
+        ],
       ),
     );
   }
diff --git a/example/lib/pages/offline_map.dart b/example/lib/pages/offline_map.dart
deleted file mode 100644
index 07691c247..000000000
--- a/example/lib/pages/offline_map.dart
+++ /dev/null
@@ -1,51 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
-
-class OfflineMapPage extends StatelessWidget {
-  static const String route = '/offline_map';
-
-  const OfflineMapPage({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: const Text('Offline Map')),
-      drawer: buildDrawer(context, route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text(
-                  'This is an offline map that is showing Anholt Island, Denmark.'),
-            ),
-            Flexible(
-              child: FlutterMap(
-                options: MapOptions(
-                  initialCenter: const LatLng(56.704173, 11.543808),
-                  minZoom: 12,
-                  maxZoom: 14,
-                  cameraConstraint: CameraConstraint.containCenter(
-                    bounds: LatLngBounds(
-                      const LatLng(56.7378, 11.6644),
-                      const LatLng(56.6877, 11.5089),
-                    ),
-                  ),
-                ),
-                children: [
-                  TileLayer(
-                    tileProvider: AssetTileProvider(),
-                    maxZoom: 14,
-                    urlTemplate: 'assets/map/anholt_osmbright/{z}/{x}/{y}.png',
-                  ),
-                ],
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
diff --git a/example/lib/pages/overlay_image.dart b/example/lib/pages/overlay_image.dart
index 65f3912e2..e79b3457a 100644
--- a/example/lib/pages/overlay_image.dart
+++ b/example/lib/pages/overlay_image.dart
@@ -1,79 +1,63 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class OverlayImagePage extends StatelessWidget {
   static const String route = '/overlay_image';
 
-  const OverlayImagePage({Key? key}) : super(key: key);
-
-  static final _overlayImages = [
-    OverlayImage(
-      bounds: LatLngBounds(
-        const LatLng(51.5, -0.09),
-        const LatLng(48.8566, 2.3522),
-      ),
-      opacity: 0.8,
-      imageProvider: const NetworkImage(
-          'https://images.pexels.com/photos/231009/pexels-photo-231009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=600'),
-    ),
-    const RotatedOverlayImage(
-      topLeftCorner: LatLng(53.377, -2.999),
-      bottomLeftCorner: LatLng(52.503, -1.868),
-      bottomRightCorner: LatLng(53.475, 0.275),
-      opacity: 0.8,
-      imageProvider: NetworkImage(
-          'https://images.pexels.com/photos/231009/pexels-photo-231009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=600'),
-    ),
-  ];
+  const OverlayImagePage({super.key});
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Overlay Image')),
-      drawer: buildDrawer(context, route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text('This is a map that is showing (51.5, -0.9).'),
-            ),
-            Flexible(
-              child: FlutterMap(
-                options: const MapOptions(
-                  initialCenter: LatLng(51.5, -0.09),
-                  initialZoom: 6,
+      drawer: const MenuDrawer(route),
+      body: FlutterMap(
+        options: const MapOptions(
+          initialCenter: LatLng(51.5, -0.09),
+          initialZoom: 6,
+        ),
+        children: [
+          openStreetMapTileLayer,
+          OverlayImageLayer(
+            overlayImages: [
+              OverlayImage(
+                bounds: LatLngBounds(
+                  const LatLng(51.5, -0.09),
+                  const LatLng(48.8566, 2.3522),
                 ),
-                children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                  OverlayImageLayer(overlayImages: _overlayImages),
-                  const MarkerLayer(
-                    markers: [
-                      Marker(
-                        point: LatLng(53.377, -2.999),
-                        child: _Circle(color: Colors.redAccent, label: "TL"),
-                      ),
-                      Marker(
-                        point: LatLng(52.503, -1.868),
-                        child: _Circle(color: Colors.redAccent, label: "BL"),
-                      ),
-                      Marker(
-                        point: LatLng(53.475, 0.275),
-                        child: _Circle(color: Colors.redAccent, label: "BR"),
-                      ),
-                    ],
-                  ),
-                ],
+                opacity: 0.8,
+                imageProvider: const NetworkImage(
+                    'https://images.pexels.com/photos/231009/pexels-photo-231009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=600'),
               ),
-            ),
-          ],
-        ),
+              const RotatedOverlayImage(
+                topLeftCorner: LatLng(53.377, -2.999),
+                bottomLeftCorner: LatLng(52.503, -1.868),
+                bottomRightCorner: LatLng(53.475, 0.275),
+                opacity: 0.8,
+                imageProvider: NetworkImage(
+                    'https://images.pexels.com/photos/231009/pexels-photo-231009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=600'),
+              ),
+            ],
+          ),
+          const MarkerLayer(
+            markers: [
+              Marker(
+                point: LatLng(53.377, -2.999),
+                child: _Circle(color: Colors.redAccent, label: 'TL'),
+              ),
+              Marker(
+                point: LatLng(52.503, -1.868),
+                child: _Circle(color: Colors.redAccent, label: 'BL'),
+              ),
+              Marker(
+                point: LatLng(53.475, 0.275),
+                child: _Circle(color: Colors.redAccent, label: 'BR'),
+              ),
+            ],
+          ),
+        ],
       ),
     );
   }
diff --git a/example/lib/pages/plugin_scalebar.dart b/example/lib/pages/plugin_scalebar.dart
deleted file mode 100644
index d9b494879..000000000
--- a/example/lib/pages/plugin_scalebar.dart
+++ /dev/null
@@ -1,49 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/pages/scale_layer_plugin_option.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
-
-class PluginScaleBar extends StatelessWidget {
-  static const String route = '/plugin_scalebar';
-
-  const PluginScaleBar({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: const Text('ScaleBarPlugins')),
-      drawer: buildDrawer(context, PluginScaleBar.route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            Flexible(
-              child: FlutterMap(
-                options: const MapOptions(
-                  initialCenter: LatLng(51.5, -0.09),
-                  initialZoom: 5,
-                ),
-                children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                  ScaleLayerWidget(
-                    options: ScaleLayerPluginOption(
-                      lineColor: Colors.blue,
-                      lineWidth: 2,
-                      textStyle:
-                          const TextStyle(color: Colors.blue, fontSize: 12),
-                      padding: const EdgeInsets.all(10),
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
diff --git a/example/lib/pages/plugin_zoombuttons.dart b/example/lib/pages/plugin_zoombuttons.dart
deleted file mode 100644
index b2fc8c48d..000000000
--- a/example/lib/pages/plugin_zoombuttons.dart
+++ /dev/null
@@ -1,47 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/pages/zoombuttons_plugin_option.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
-
-class PluginZoomButtons extends StatelessWidget {
-  static const String route = '/plugin_zoombuttons';
-
-  const PluginZoomButtons({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: const Text('ZoomButtonsPlugins')),
-      drawer: buildDrawer(context, PluginZoomButtons.route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            Flexible(
-              child: FlutterMap(
-                options: const MapOptions(
-                  initialCenter: LatLng(51.5, -0.09),
-                  initialZoom: 5,
-                ),
-                children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                  const FlutterMapZoomButtons(
-                    minZoom: 4,
-                    maxZoom: 19,
-                    mini: true,
-                    padding: 10,
-                    alignment: Alignment.bottomRight,
-                  ),
-                ],
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
diff --git a/example/lib/pages/polygon.dart b/example/lib/pages/polygon.dart
index 03e33a40c..e16418ef4 100644
--- a/example/lib/pages/polygon.dart
+++ b/example/lib/pages/polygon.dart
@@ -1,11 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class PolygonPage extends StatelessWidget {
   static const String route = '/polygon';
 
-  const PolygonPage({Key? key}) : super(key: key);
+  const PolygonPage({super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -65,103 +66,86 @@ class PolygonPage extends StatelessWidget {
 
     return Scaffold(
       appBar: AppBar(title: const Text('Polygons')),
-      drawer: buildDrawer(context, PolygonPage.route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text('Polygons'),
+      drawer: const MenuDrawer(PolygonPage.route),
+      body: FlutterMap(
+        options: const MapOptions(
+          initialCenter: LatLng(51.5, -0.09),
+          initialZoom: 5,
+        ),
+        children: [
+          openStreetMapTileLayer,
+          PolygonLayer(polygons: [
+            Polygon(
+              points: notFilledPoints,
+              isFilled: false, // By default it's false
+              borderColor: Colors.red,
+              borderStrokeWidth: 4,
             ),
-            Flexible(
-              child: FlutterMap(
-                options: const MapOptions(
-                  initialCenter: LatLng(51.5, -0.09),
-                  initialZoom: 5,
-                ),
-                children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                  PolygonLayer(polygons: [
-                    Polygon(
-                      points: notFilledPoints,
-                      isFilled: false, // By default it's false
-                      borderColor: Colors.red,
-                      borderStrokeWidth: 4,
-                    ),
-                    Polygon(
-                      points: filledPoints,
-                      isFilled: true,
-                      color: Colors.purple,
-                      borderColor: Colors.yellow,
-                      borderStrokeWidth: 4,
-                    ),
-                    Polygon(
-                      points: notFilledDotedPoints,
-                      isFilled: false,
-                      isDotted: true,
-                      borderColor: Colors.green,
-                      borderStrokeWidth: 4,
-                      color: Colors.yellow,
-                    ),
-                    Polygon(
-                      points: filledDotedPoints,
-                      isFilled: true,
-                      isDotted: true,
-                      borderStrokeWidth: 4,
-                      borderColor: Colors.lightBlue,
-                      color: Colors.yellow,
-                    ),
-                    Polygon(
-                      points: labelPoints,
-                      borderStrokeWidth: 4,
-                      isFilled: false,
-                      color: Colors.pink,
-                      borderColor: Colors.purple,
-                      label: "Label!",
-                    ),
-                    Polygon(
-                      points: labelRotatedPoints,
-                      borderStrokeWidth: 4,
-                      borderColor: Colors.purple,
-                      label: "Rotated!",
-                      rotateLabel: true,
-                      labelPlacement: PolygonLabelPlacement.polylabel,
-                    ),
-                    Polygon(
-                      points: holeOuterPoints,
-                      isFilled: true,
-                      holePointsList: [holeInnerPoints],
-                      borderStrokeWidth: 4,
-                      borderColor: Colors.green,
-                      color: Colors.pink.withOpacity(0.5),
-                    ),
-                    Polygon(
-                      points: holeOuterPoints
-                          .map((latlng) =>
-                              LatLng(latlng.latitude, latlng.longitude + 8))
-                          .toList(),
-                      isFilled: false,
-                      isDotted: true,
-                      holePointsList: [
-                        holeInnerPoints
-                            .map((latlng) =>
-                                LatLng(latlng.latitude, latlng.longitude + 8))
-                            .toList()
-                      ],
-                      borderStrokeWidth: 4,
-                      borderColor: Colors.orange,
-                    ),
-                  ]),
-                ],
-              ),
+            Polygon(
+              points: filledPoints,
+              isFilled: true,
+              color: Colors.purple,
+              borderColor: Colors.yellow,
+              borderStrokeWidth: 4,
             ),
-          ],
-        ),
+            Polygon(
+              points: notFilledDotedPoints,
+              isFilled: false,
+              isDotted: true,
+              borderColor: Colors.green,
+              borderStrokeWidth: 4,
+              color: Colors.yellow,
+            ),
+            Polygon(
+              points: filledDotedPoints,
+              isFilled: true,
+              isDotted: true,
+              borderStrokeWidth: 4,
+              borderColor: Colors.lightBlue,
+              color: Colors.yellow,
+            ),
+            Polygon(
+              points: labelPoints,
+              borderStrokeWidth: 4,
+              isFilled: false,
+              color: Colors.pink,
+              borderColor: Colors.purple,
+              label: 'Label!',
+            ),
+            Polygon(
+              points: labelRotatedPoints,
+              borderStrokeWidth: 4,
+              borderColor: Colors.purple,
+              label: 'Rotated!',
+              rotateLabel: true,
+              labelPlacement: PolygonLabelPlacement.polylabel,
+            ),
+            Polygon(
+              points: holeOuterPoints,
+              isFilled: true,
+              holePointsList: [holeInnerPoints],
+              borderStrokeWidth: 4,
+              borderColor: Colors.green,
+              color: Colors.pink.withOpacity(0.5),
+            ),
+            Polygon(
+              points: holeOuterPoints
+                  .map(
+                      (latlng) => LatLng(latlng.latitude, latlng.longitude + 8))
+                  .toList(),
+              isFilled: false,
+              isDotted: true,
+              holePointsList: [
+                holeInnerPoints
+                    .map((latlng) =>
+                        LatLng(latlng.latitude, latlng.longitude + 8))
+                    .toList()
+              ],
+              borderStrokeWidth: 4,
+              borderColor: Colors.orange,
+            ),
+          ]),
+        ],
       ),
     );
   }
diff --git a/example/lib/pages/polyline.dart b/example/lib/pages/polyline.dart
index 299c36cb3..9cecc5fb8 100644
--- a/example/lib/pages/polyline.dart
+++ b/example/lib/pages/polyline.dart
@@ -1,11 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class PolylinePage extends StatefulWidget {
   static const String route = '/polyline';
 
-  const PolylinePage({Key? key}) : super(key: key);
+  const PolylinePage({super.key});
 
   @override
   State<PolylinePage> createState() => _PolylinePageState();
@@ -16,102 +17,85 @@ class _PolylinePageState extends State<PolylinePage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Polylines')),
-      drawer: buildDrawer(context, PolylinePage.route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text('Polylines'),
-            ),
-            Flexible(
-              child: FlutterMap(
-                options: const MapOptions(
-                  initialCenter: LatLng(51.5, -0.09),
-                  initialZoom: 5,
-                ),
-                children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                  PolylineLayer(
-                    polylines: [
-                      Polyline(
-                        points: [
-                          const LatLng(51.5, -0.09),
-                          const LatLng(53.3498, -6.2603),
-                          const LatLng(48.8566, 2.3522),
-                        ],
-                        strokeWidth: 4,
-                        color: Colors.purple,
-                      ),
-                      Polyline(
-                        points: [
-                          const LatLng(55.5, -0.09),
-                          const LatLng(54.3498, -6.2603),
-                          const LatLng(52.8566, 2.3522),
-                        ],
-                        strokeWidth: 4,
-                        gradientColors: [
-                          const Color(0xffE40203),
-                          const Color(0xffFEED00),
-                          const Color(0xff007E2D),
-                        ],
-                      ),
-                      Polyline(
-                        points: [
-                          const LatLng(50.5, -0.09),
-                          const LatLng(51.3498, 6.2603),
-                          const LatLng(53.8566, 2.3522),
-                        ],
-                        strokeWidth: 20,
-                        color: Colors.blue.withOpacity(0.6),
-                        borderStrokeWidth: 20,
-                        borderColor: Colors.red.withOpacity(0.4),
-                      ),
-                      Polyline(
-                        points: [
-                          const LatLng(50.2, -0.08),
-                          const LatLng(51.2498, -10.2603),
-                          const LatLng(54.8566, -9.3522),
-                        ],
-                        strokeWidth: 20,
-                        color: Colors.black.withOpacity(0.2),
-                        borderStrokeWidth: 20,
-                        borderColor: Colors.white30,
-                      ),
-                      Polyline(
-                        points: [
-                          const LatLng(49.1, -0.06),
-                          const LatLng(52.15, -1.4),
-                          const LatLng(55.5, 0.8),
-                        ],
-                        strokeWidth: 10,
-                        color: Colors.yellow,
-                        borderStrokeWidth: 10,
-                        borderColor: Colors.blue.withOpacity(0.5),
-                      ),
-                      Polyline(
-                        points: [
-                          const LatLng(48.1, -0.03),
-                          const LatLng(50.5, -7.8),
-                          const LatLng(56.5, 0.4),
-                        ],
-                        strokeWidth: 10,
-                        color: Colors.amber,
-                        borderStrokeWidth: 10,
-                        borderColor: Colors.blue.withOpacity(0.5),
-                      ),
-                    ],
-                  ),
+      drawer: const MenuDrawer(PolylinePage.route),
+      body: FlutterMap(
+        options: const MapOptions(
+          initialCenter: LatLng(51.5, -0.09),
+          initialZoom: 5,
+        ),
+        children: [
+          openStreetMapTileLayer,
+          PolylineLayer(
+            polylines: [
+              Polyline(
+                points: [
+                  const LatLng(51.5, -0.09),
+                  const LatLng(53.3498, -6.2603),
+                  const LatLng(48.8566, 2.3522),
                 ],
+                strokeWidth: 4,
+                color: Colors.purple,
               ),
-            ),
-          ],
-        ),
+              Polyline(
+                points: [
+                  const LatLng(55.5, -0.09),
+                  const LatLng(54.3498, -6.2603),
+                  const LatLng(52.8566, 2.3522),
+                ],
+                strokeWidth: 4,
+                gradientColors: [
+                  const Color(0xffE40203),
+                  const Color(0xffFEED00),
+                  const Color(0xff007E2D),
+                ],
+              ),
+              Polyline(
+                points: [
+                  const LatLng(50.5, -0.09),
+                  const LatLng(51.3498, 6.2603),
+                  const LatLng(53.8566, 2.3522),
+                ],
+                strokeWidth: 20,
+                color: Colors.blue.withOpacity(0.6),
+                borderStrokeWidth: 20,
+                borderColor: Colors.red.withOpacity(0.4),
+              ),
+              Polyline(
+                points: [
+                  const LatLng(50.2, -0.08),
+                  const LatLng(51.2498, -10.2603),
+                  const LatLng(54.8566, -9.3522),
+                ],
+                strokeWidth: 20,
+                color: Colors.black.withOpacity(0.2),
+                borderStrokeWidth: 20,
+                borderColor: Colors.white30,
+              ),
+              Polyline(
+                points: [
+                  const LatLng(49.1, -0.06),
+                  const LatLng(52.15, -1.4),
+                  const LatLng(55.5, 0.8),
+                ],
+                strokeWidth: 10,
+                color: Colors.yellow,
+                borderStrokeWidth: 10,
+                borderColor: Colors.blue.withOpacity(0.5),
+              ),
+              Polyline(
+                points: [
+                  const LatLng(48.1, -0.03),
+                  const LatLng(50.5, -7.8),
+                  const LatLng(56.5, 0.4),
+                ],
+                strokeWidth: 10,
+                color: Colors.amber,
+                borderStrokeWidth: 10,
+                borderColor: Colors.blue.withOpacity(0.5),
+              ),
+            ],
+          ),
+        ],
       ),
     );
   }
diff --git a/example/lib/pages/reset_tile_layer.dart b/example/lib/pages/reset_tile_layer.dart
index d558af384..3e80e5ea2 100644
--- a/example/lib/pages/reset_tile_layer.dart
+++ b/example/lib/pages/reset_tile_layer.dart
@@ -2,31 +2,25 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class ResetTileLayerPage extends StatefulWidget {
   static const String route = '/reset_tilelayer';
 
-  const ResetTileLayerPage({Key? key}) : super(key: key);
+  const ResetTileLayerPage({super.key});
 
   @override
-  ResetTileLayerPageState createState() {
-    return ResetTileLayerPageState();
-  }
+  ResetTileLayerPageState createState() => ResetTileLayerPageState();
 }
 
 class ResetTileLayerPageState extends State<ResetTileLayerPage> {
-  StreamController<void> resetController = StreamController.broadcast();
+  final StreamController<void> resetController = StreamController.broadcast();
 
-  String layer1 = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
-  String layer2 = 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
+  static const layer1 = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+  static const layer2 = 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
   bool layerToggle = true;
 
-  @override
-  void initState() {
-    super.initState();
-  }
-
   void _resetTiles() {
     setState(() {
       layerToggle = !layerToggle;
@@ -38,55 +32,52 @@ class ResetTileLayerPageState extends State<ResetTileLayerPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('TileLayer Reset')),
-      drawer: buildDrawer(context, ResetTileLayerPage.route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text(
-                  'TileLayers can be progromatically reset, disposing of cached files'),
+      drawer: const MenuDrawer(ResetTileLayerPage.route),
+      body: Column(
+        children: [
+          const Padding(
+            padding: EdgeInsets.only(left: 8, right: 8, top: 12),
+            child: Text(
+              'TileLayers can be progromatically reset, disposing of cached '
+              'tiles',
             ),
-            Padding(
-              padding: const EdgeInsets.only(top: 8, bottom: 8),
-              child: Wrap(
-                children: <Widget>[
-                  MaterialButton(
-                    onPressed: _resetTiles,
-                    child: const Text('Reset'),
-                  ),
-                ],
-              ),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8),
+            child: TextButton.icon(
+              onPressed: _resetTiles,
+              label: const Text('Reset'),
+              icon: const Icon(Icons.restart_alt),
             ),
-            Flexible(
-              child: FlutterMap(
-                options: const MapOptions(
-                  initialCenter: LatLng(51.5, -0.09),
-                  initialZoom: 5,
-                ),
-                children: [
-                  TileLayer(
-                    reset: resetController.stream,
-                    urlTemplate: layerToggle ? layer1 : layer2,
-                    subdomains: layerToggle ? const [] : const ['a', 'b', 'c'],
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                  const MarkerLayer(
-                    markers: [
-                      Marker(
-                        width: 80,
-                        height: 80,
-                        point: LatLng(51.5, -0.09),
-                        child: FlutterLogo(),
-                      ),
-                    ],
-                  ),
-                ],
+          ),
+          Flexible(
+            child: FlutterMap(
+              options: const MapOptions(
+                initialCenter: LatLng(51.5, -0.09),
+                initialZoom: 5,
               ),
+              children: [
+                TileLayer(
+                  reset: resetController.stream,
+                  urlTemplate: layerToggle ? layer1 : layer2,
+                  subdomains: layerToggle ? const [] : const ['a', 'b', 'c'],
+                  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+                  tileProvider: CancellableNetworkTileProvider(),
+                ),
+                const MarkerLayer(
+                  markers: [
+                    Marker(
+                      width: 80,
+                      height: 80,
+                      point: LatLng(51.5, -0.09),
+                      child: FlutterLogo(),
+                    ),
+                  ],
+                ),
+              ],
             ),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }
diff --git a/example/lib/pages/retina.dart b/example/lib/pages/retina.dart
index 60e6da39f..75aa02dbb 100644
--- a/example/lib/pages/retina.dart
+++ b/example/lib/pages/retina.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class RetinaPage extends StatefulWidget {
@@ -9,7 +9,7 @@ class RetinaPage extends StatefulWidget {
   static const String _defaultUrlTemplate =
       'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}{r}?access_token={accessToken}';
 
-  const RetinaPage({Key? key}) : super(key: key);
+  const RetinaPage({super.key});
 
   @override
   State<RetinaPage> createState() => _RetinaPageState();
@@ -49,7 +49,7 @@ class _RetinaPageState extends State<RetinaPage> {
 
     return Scaffold(
       appBar: AppBar(title: const Text('Retina Tiles')),
-      drawer: buildDrawer(context, RetinaPage.route),
+      drawer: const MenuDrawer(RetinaPage.route),
       body: Column(
         children: [
           Padding(
@@ -153,7 +153,7 @@ class _RetinaPageState extends State<RetinaPage> {
                   attributions: [
                     LogoSourceAttribution(
                       Image.asset(
-                        "assets/mapbox-logo-white.png",
+                        'assets/mapbox-logo-white.png',
                         color: Colors.black,
                       ),
                       height: 16,
@@ -205,13 +205,13 @@ class InputFieldColorizer extends TextEditingController {
 
     text.splitMapJoin(
       pattern,
-      onMatch: (Match match) {
+      onMatch: (match) {
         children.add(
           TextSpan(text: match[0], style: style!.merge(mapping[match[0]])),
         );
         return '';
       },
-      onNonMatch: (String text) {
+      onNonMatch: (text) {
         children.add(TextSpan(text: text, style: style));
         return '';
       },
diff --git a/example/lib/pages/scale_layer_plugin_option.dart b/example/lib/pages/scale_layer_plugin_option.dart
index b8196d1f4..40dd91c18 100644
--- a/example/lib/pages/scale_layer_plugin_option.dart
+++ b/example/lib/pages/scale_layer_plugin_option.dart
@@ -3,7 +3,7 @@ import 'dart:ui' as ui;
 
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/pages/scalebar_utils.dart' as util;
+import 'package:flutter_map_example/pages/scalebar_utils.dart';
 
 class ScaleLayerPluginOption {
   TextStyle? textStyle;
@@ -21,7 +21,7 @@ class ScaleLayerPluginOption {
 
 class ScaleLayerWidget extends StatelessWidget {
   final ScaleLayerPluginOption options;
-  final scale = [
+  static const scale = <int>[
     25000000,
     15000000,
     8000000,
@@ -47,7 +47,7 @@ class ScaleLayerWidget extends StatelessWidget {
     5
   ];
 
-  ScaleLayerWidget({super.key, required this.options});
+  const ScaleLayerWidget({super.key, required this.options});
 
   @override
   Widget build(BuildContext context) {
@@ -56,8 +56,7 @@ class ScaleLayerWidget extends StatelessWidget {
     final distance = scale[max(0, min(20, zoom.round() + 2))].toDouble();
     final center = map.center;
     final start = map.project(center);
-    final targetPoint =
-        util.calculateEndingGlobalCoordinates(center, 90, distance);
+    final targetPoint = calculateEndingGlobalCoordinates(center, 90, distance);
     final end = map.project(targetPoint);
     final displayDistance = distance > 999
         ? '${(distance / 1000).toStringAsFixed(0)} km'
@@ -65,7 +64,7 @@ class ScaleLayerWidget extends StatelessWidget {
     final width = end.x - start.x;
 
     return LayoutBuilder(
-      builder: (BuildContext context, BoxConstraints bc) {
+      builder: (context, constraints) {
         return CustomPaint(
           painter: ScalePainter(
             width,
@@ -82,22 +81,28 @@ class ScaleLayerWidget extends StatelessWidget {
 }
 
 class ScalePainter extends CustomPainter {
-  ScalePainter(this.width, this.text,
-      {this.padding, this.textStyle, this.lineWidth, this.lineColor});
+  ScalePainter(
+    this.width,
+    this.text, {
+    this.padding,
+    this.textStyle,
+    required this.lineWidth,
+    required this.lineColor,
+  });
 
   final double width;
   final EdgeInsets? padding;
   final String text;
+  final double lineWidth;
+  final Color lineColor;
   TextStyle? textStyle;
-  double? lineWidth;
-  Color? lineColor;
 
   @override
   void paint(ui.Canvas canvas, ui.Size size) {
     final paint = Paint()
-      ..color = lineColor!
+      ..color = lineColor
       ..strokeCap = StrokeCap.square
-      ..strokeWidth = lineWidth!;
+      ..strokeWidth = lineWidth;
 
     const sizeForStartEnd = 4;
     final paddingLeft =
@@ -116,7 +121,7 @@ class ScalePainter extends CustomPainter {
     canvas.drawLine(Offset(paddingLeft, paddingTop),
         Offset(paddingLeft, sizeForStartEnd + paddingTop), paint);
     // draw middle line
-    final middleX = width / 2 + paddingLeft - lineWidth! / 2;
+    final middleX = width / 2 + paddingLeft - lineWidth / 2;
     canvas.drawLine(Offset(middleX, paddingTop + sizeForStartEnd / 2),
         Offset(middleX, sizeForStartEnd + paddingTop), paint);
     // draw end line
@@ -127,7 +132,5 @@ class ScalePainter extends CustomPainter {
   }
 
   @override
-  bool shouldRepaint(CustomPainter oldDelegate) {
-    return true;
-  }
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
 }
diff --git a/example/lib/pages/scalebar_utils.dart b/example/lib/pages/scalebar_utils.dart
index d46bf11cf..97f57ef1c 100644
--- a/example/lib/pages/scalebar_utils.dart
+++ b/example/lib/pages/scalebar_utils.dart
@@ -1,8 +1,10 @@
 import 'dart:math';
+import 'dart:ui';
 
 import 'package:flutter_map/flutter_map.dart';
 
 const double piOver180 = pi / 180.0;
+
 double toDegrees(double radians) {
   return radians / piOver180;
 }
@@ -61,7 +63,7 @@ LatLng calculateEndingGlobalCoordinates(
   double cosSigmaM2;
   double cos2SigmaM2;
 
-  for (;;) {
+  while (true) {
     // eq. 5
     sigmaM2 = 2.0 * sigma1 + sigma;
     cosSigmaM2 = cos(sigmaM2);
@@ -107,14 +109,15 @@ LatLng calculateEndingGlobalCoordinates(
   // This fixes the pole crossing defect spotted by Matt Feemster. When a
   // path passes a pole and essentially crosses a line of latitude twice -
   // once in each direction - the longitude calculation got messed up.
-  // Using
-  // atan2 instead of atan fixes the defect. The change is in the next 3
-  // lines.
+  // Using atan2 instead of atan fixes the defect. The change is in the
+  // next 3 lines.
   // double tanLambda = sinSigma * sinAlpha1 / (cosU1 * cosSigma - sinU1 *
   // sinSigma * cosAlpha1);
   // double lambda = Math.atan(tanLambda);
   final lambda = atan2(
-      sinSigma * sinAlpha1, (cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1));
+    sinSigma * sinAlpha1,
+    cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1,
+  );
 
   // eq. 10
   final C = (f / 16) * cos2Alpha * (4 + f * (4 - 3 * cos2Alpha));
@@ -134,16 +137,8 @@ LatLng calculateEndingGlobalCoordinates(
   // cosSigma * cosAlpha1);
 
   // build result
-  var latitude = toDegrees(phi2);
-  var longitude = start.longitude + toDegrees(L);
-
-  // if ((endBearing != null) && (endBearing.length > 0)) {
-  // endBearing[0] = toDegrees(alpha2);
-  // }
-
-  latitude = latitude < -90 ? -90 : latitude;
-  latitude = latitude > 90 ? 90 : latitude;
-  longitude = longitude < -180 ? -180 : longitude;
-  longitude = longitude > 180 ? 180 : longitude;
-  return LatLng(latitude, longitude);
+  return LatLng(
+    clampDouble(toDegrees(phi2), -90, 90),
+    clampDouble(start.longitude + toDegrees(L), -180, 180),
+  );
 }
diff --git a/example/lib/pages/screen_point_to_latlng.dart b/example/lib/pages/screen_point_to_latlng.dart
index b960b4d8a..b7b77884a 100644
--- a/example/lib/pages/screen_point_to_latlng.dart
+++ b/example/lib/pages/screen_point_to_latlng.dart
@@ -2,17 +2,16 @@ import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class ScreenPointToLatLngPage extends StatefulWidget {
   static const String route = '/screen_point_to_latlng';
 
-  const ScreenPointToLatLngPage({Key? key}) : super(key: key);
+  const ScreenPointToLatLngPage({super.key});
 
   @override
-  PointToLatlngPage createState() {
-    return PointToLatlngPage();
-  }
+  PointToLatlngPage createState() => PointToLatlngPage();
 }
 
 class PointToLatlngPage extends State<ScreenPointToLatLngPage> {
@@ -33,7 +32,7 @@ class PointToLatlngPage extends State<ScreenPointToLatLngPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Screen Point 🡒 Lat/Lng')),
-      drawer: buildDrawer(context, ScreenPointToLatLngPage.route),
+      drawer: const MenuDrawer(ScreenPointToLatLngPage.route),
       body: Stack(
         children: [
           FlutterMap(
@@ -45,10 +44,7 @@ class PointToLatlngPage extends State<ScreenPointToLatLngPage> {
               minZoom: 3,
             ),
             children: [
-              TileLayer(
-                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-              ),
+              openStreetMapTileLayer,
               if (latLng != null)
                 MarkerLayer(
                   markers: [
diff --git a/example/lib/pages/secondary_tap.dart b/example/lib/pages/secondary_tap.dart
index 4c5be3589..220b56f60 100644
--- a/example/lib/pages/secondary_tap.dart
+++ b/example/lib/pages/secondary_tap.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class SecondaryTapPage extends StatelessWidget {
   const SecondaryTapPage({super.key});
@@ -11,37 +12,28 @@ class SecondaryTapPage extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Secondary Tap')),
-      drawer: buildDrawer(context, route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text('This is a map that supports secondary tap events.'),
-            ),
-            Flexible(
-              child: FlutterMap(
-                options: MapOptions(
-                  onSecondaryTap: (tapPos, latLng) {
-                    ScaffoldMessenger.maybeOf(context)?.showSnackBar(
-                      SnackBar(content: Text('Secondary tap at $latLng')),
-                    );
-                  },
-                  initialCenter: const LatLng(51.5, -0.09),
-                  initialZoom: 5,
-                ),
-                children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                ],
+      drawer: const MenuDrawer(route),
+      body: Column(
+        children: [
+          const Padding(
+            padding: EdgeInsets.all(8),
+            child: Text('This is a map that supports secondary tap events.'),
+          ),
+          Flexible(
+            child: FlutterMap(
+              options: MapOptions(
+                onSecondaryTap: (tapPos, latLng) {
+                  ScaffoldMessenger.maybeOf(context)?.showSnackBar(
+                    SnackBar(content: Text('Secondary tap at $latLng')),
+                  );
+                },
+                initialCenter: const LatLng(51.5, -0.09),
+                initialZoom: 5,
               ),
+              children: [openStreetMapTileLayer],
             ),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }
diff --git a/example/lib/pages/sliding_map.dart b/example/lib/pages/sliding_map.dart
index 9a53a14e2..dcf6f8a5a 100644
--- a/example/lib/pages/sliding_map.dart
+++ b/example/lib/pages/sliding_map.dart
@@ -1,50 +1,49 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class SlidingMapPage extends StatelessWidget {
   static const String route = '/sliding_map';
   static const northEast = LatLng(56.7378, 11.6644);
   static const southWest = LatLng(56.6877, 11.5089);
 
-  const SlidingMapPage({Key? key}) : super(key: key);
+  const SlidingMapPage({super.key});
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Sliding Map')),
-      drawer: buildDrawer(context, route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text(
-                  'This is a map that can be panned smoothly when the boundaries are reached.'),
+      drawer: const MenuDrawer(route),
+      body: Column(
+        children: [
+          const Padding(
+            padding: EdgeInsets.all(8),
+            child: Text(
+              'This is a map that can be panned smoothly when the '
+              'boundaries are reached.',
             ),
-            Flexible(
-              child: FlutterMap(
-                options: MapOptions(
-                  initialCenter: const LatLng(56.704173, 11.543808),
-                  minZoom: 12,
-                  maxZoom: 14,
-                  initialZoom: 13,
-                  cameraConstraint: CameraConstraint.containCenter(
-                    bounds: LatLngBounds(northEast, southWest),
-                  ),
+          ),
+          Flexible(
+            child: FlutterMap(
+              options: MapOptions(
+                initialCenter: const LatLng(56.704173, 11.543808),
+                minZoom: 12,
+                maxZoom: 14,
+                initialZoom: 13,
+                cameraConstraint: CameraConstraint.containCenter(
+                  bounds: LatLngBounds(northEast, southWest),
                 ),
-                children: [
-                  TileLayer(
-                    tileProvider: AssetTileProvider(),
-                    maxZoom: 14,
-                    urlTemplate: 'assets/map/anholt_osmbright/{z}/{x}/{y}.png',
-                  ),
-                ],
               ),
+              children: [
+                TileLayer(
+                  tileProvider: AssetTileProvider(),
+                  maxZoom: 14,
+                  urlTemplate: 'assets/map/anholt_osmbright/{z}/{x}/{y}.png',
+                ),
+              ],
             ),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }
diff --git a/example/lib/pages/stateful_markers.dart b/example/lib/pages/stateful_markers.dart
index a22b9ab83..2c44f9dc5 100644
--- a/example/lib/pages/stateful_markers.dart
+++ b/example/lib/pages/stateful_markers.dart
@@ -2,18 +2,19 @@ import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class StatefulMarkersPage extends StatefulWidget {
   static const String route = '/stateful_markers';
 
-  const StatefulMarkersPage({Key? key}) : super(key: key);
+  const StatefulMarkersPage({super.key});
 
   @override
-  _StatefulMarkersPageState createState() => _StatefulMarkersPageState();
+  StatefulMarkersPageState createState() => StatefulMarkersPageState();
 }
 
-class _StatefulMarkersPageState extends State<StatefulMarkersPage> {
+class StatefulMarkersPageState extends State<StatefulMarkersPage> {
   late List<Marker> _markers;
   final Random _random = Random();
 
@@ -40,7 +41,7 @@ class _StatefulMarkersPageState extends State<StatefulMarkersPage> {
         height: 40,
         point: LatLng(
             _random.nextDouble() * 10 + 48, _random.nextDouble() * 10 - 6),
-        child: const _ColorMarker(),
+        child: _ColorMarker(),
         key: ValueKey(key),
       ),
     );
@@ -50,41 +51,22 @@ class _StatefulMarkersPageState extends State<StatefulMarkersPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Stateful Markers')),
-      drawer: buildDrawer(context, StatefulMarkersPage.route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text('This is a map that is showing (51.5, -0.9).'),
-            ),
-            Flexible(
-              child: FlutterMap(
-                options: const MapOptions(
-                  initialCenter: LatLng(51.5, -0.09),
-                  initialZoom: 5,
-                ),
-                children: [
-                  TileLayer(
-                    urlTemplate:
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                  MarkerLayer(markers: _markers),
-                ],
-              ),
-            ),
-          ],
+      drawer: const MenuDrawer(StatefulMarkersPage.route),
+      body: FlutterMap(
+        options: const MapOptions(
+          initialCenter: LatLng(51.5, -0.09),
+          initialZoom: 5,
         ),
+        children: [
+          openStreetMapTileLayer,
+          MarkerLayer(markers: _markers),
+        ],
       ),
     );
   }
 }
 
 class _ColorMarker extends StatefulWidget {
-  const _ColorMarker({Key? key}) : super(key: key);
-
   @override
   _ColorMarkerState createState() => _ColorMarkerState();
 }
diff --git a/example/lib/pages/tile_builder.dart b/example/lib/pages/tile_builder.dart
index 12ba8d995..88ada2901 100644
--- a/example/lib/pages/tile_builder.dart
+++ b/example/lib/pages/tile_builder.dart
@@ -1,17 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class TileBuilderPage extends StatefulWidget {
   static const String route = '/tile_builder';
 
-  const TileBuilderPage({Key? key}) : super(key: key);
+  const TileBuilderPage({super.key});
 
   @override
-  _TileBuilderPageState createState() => _TileBuilderPageState();
+  TileBuilderPageState createState() => TileBuilderPageState();
 }
 
-class _TileBuilderPageState extends State<TileBuilderPage> {
+class TileBuilderPageState extends State<TileBuilderPage> {
   bool enableGrid = true;
   bool showCoordinates = true;
   bool showLoadingTime = true;
@@ -36,7 +37,7 @@ class _TileBuilderPageState extends State<TileBuilderPage> {
               children: [
                 if (showCoordinates)
                   Text(
-                    '${coords.x.floor()} : ${coords.y.floor()} : ${coords.z.floor()}',
+                    '${coords.x} : ${coords.y} : ${coords.z}',
                     style: Theme.of(context).textTheme.headlineSmall,
                   ),
                 if (showLoadingTime)
@@ -58,7 +59,7 @@ class _TileBuilderPageState extends State<TileBuilderPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Tile Builder')),
-      drawer: buildDrawer(context, TileBuilderPage.route),
+      drawer: const MenuDrawer(TileBuilderPage.route),
       body: Column(
         children: [
           Padding(
@@ -118,6 +119,7 @@ class _TileBuilderPageState extends State<TileBuilderPage> {
                     urlTemplate:
                         'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                     userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+                    tileProvider: CancellableNetworkTileProvider(),
                     tileBuilder: tileBuilder,
                   ),
                 ),
diff --git a/example/lib/pages/tile_loading_error_handle.dart b/example/lib/pages/tile_loading_error_handle.dart
index b1a2faf00..a2a53cc42 100644
--- a/example/lib/pages/tile_loading_error_handle.dart
+++ b/example/lib/pages/tile_loading_error_handle.dart
@@ -1,17 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 
 class TileLoadingErrorHandle extends StatefulWidget {
   static const String route = '/tile_loading_error_handle';
 
-  const TileLoadingErrorHandle({Key? key}) : super(key: key);
+  const TileLoadingErrorHandle({super.key});
 
   @override
-  _TileLoadingErrorHandleState createState() => _TileLoadingErrorHandleState();
+  TileLoadingErrorHandleState createState() => TileLoadingErrorHandleState();
 }
 
-class _TileLoadingErrorHandleState extends State<TileLoadingErrorHandle> {
+class TileLoadingErrorHandleState extends State<TileLoadingErrorHandle> {
   static const _showSnackBarDuration = Duration(seconds: 1);
   bool _simulateTileLoadErrors = false;
   DateTime? _lastShowedTileLoadError;
@@ -20,61 +21,58 @@ class _TileLoadingErrorHandleState extends State<TileLoadingErrorHandle> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Tile Loading Error Handle')),
-      drawer: buildDrawer(context, TileLoadingErrorHandle.route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            SwitchListTile(
+      drawer: const MenuDrawer(TileLoadingErrorHandle.route),
+      body: Column(
+        children: [
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 350),
+            child: SwitchListTile(
               title: const Text('Simulate tile loading errors'),
               value: _simulateTileLoadErrors,
               onChanged: (newValue) => setState(() {
                 _simulateTileLoadErrors = newValue;
               }),
             ),
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text(
-                  'Enable tile load error simulation or disable internet and try to move or zoom map.'),
-            ),
-            Flexible(
-              child: Builder(builder: (BuildContext context) {
-                return FlutterMap(
-                  options: const MapOptions(
-                    initialCenter: LatLng(51.5, -0.09),
-                    initialZoom: 5,
+          ),
+          Flexible(
+            child: Builder(builder: (context) {
+              return FlutterMap(
+                options: const MapOptions(
+                  initialCenter: LatLng(51.5, -0.09),
+                  initialZoom: 5,
+                ),
+                children: [
+                  TileLayer(
+                    urlTemplate:
+                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+                    evictErrorTileStrategy: EvictErrorTileStrategy.none,
+                    errorTileCallback: (tile, error, stackTrace) {
+                      if (_showErrorSnackBar) {
+                        _lastShowedTileLoadError = DateTime.now();
+                        WidgetsBinding.instance.addPostFrameCallback((_) {
+                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
+                            duration: _showSnackBarDuration,
+                            content: Text(
+                              error.toString(),
+                              style: const TextStyle(color: Colors.black),
+                            ),
+                            backgroundColor: Colors.deepOrange,
+                          ));
+                        });
+                      }
+                    },
+                    // use a mocked tile provider to simulate tile load errors
+                    // or use the recommended tile provider
+                    tileProvider: _simulateTileLoadErrors
+                        ? _SimulateErrorsTileProvider()
+                        : CancellableNetworkTileProvider(),
                   ),
-                  children: [
-                    TileLayer(
-                      urlTemplate:
-                          'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                      userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                      evictErrorTileStrategy: EvictErrorTileStrategy.none,
-                      errorTileCallback: (tile, error, stackTrace) {
-                        if (_showErrorSnackBar) {
-                          _lastShowedTileLoadError = DateTime.now();
-                          WidgetsBinding.instance.addPostFrameCallback((_) {
-                            ScaffoldMessenger.of(context).showSnackBar(SnackBar(
-                              duration: _showSnackBarDuration,
-                              content: Text(
-                                error.toString(),
-                                style: const TextStyle(color: Colors.black),
-                              ),
-                              backgroundColor: Colors.deepOrange,
-                            ));
-                          });
-                        }
-                      },
-                      tileProvider: _simulateTileLoadErrors
-                          ? _SimulateErrorsTileProvider()
-                          : null,
-                    ),
-                  ],
-                );
-              }),
-            ),
-          ],
-        ),
+                ],
+              );
+            }),
+          ),
+        ],
       ),
     );
   }
@@ -115,6 +113,6 @@ class _SimulateErrorImageProvider
 
 class _SimulateErrorImageStreamCompleter extends ImageStreamCompleter {
   _SimulateErrorImageStreamCompleter() {
-    throw 'Simulated tile loading error';
+    throw Exception('Simulated tile loading error');
   }
 }
diff --git a/example/lib/pages/wms_tile_layer.dart b/example/lib/pages/wms_tile_layer.dart
index dc70e1a56..49f1a6e7e 100644
--- a/example/lib/pages/wms_tile_layer.dart
+++ b/example/lib/pages/wms_tile_layer.dart
@@ -1,63 +1,49 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class WMSLayerPage extends StatelessWidget {
   static const String route = '/wms_layer';
 
-  const WMSLayerPage({Key? key}) : super(key: key);
+  const WMSLayerPage({super.key});
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('WMS Layer')),
-      drawer: buildDrawer(context, route),
-      body: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Column(
-          children: [
-            const Padding(
-              padding: EdgeInsets.only(top: 8, bottom: 8),
-              child: Text('This is a map that is showing (42.58, 12.43).'),
+      drawer: const MenuDrawer(route),
+      body: FlutterMap(
+        options: const MapOptions(
+          initialCenter: LatLng(42.58, 12.43),
+          initialZoom: 6,
+        ),
+        children: [
+          TileLayer(
+            wmsOptions: WMSTileLayerOptions(
+              baseUrl: 'https://{s}.s2maps-tiles.eu/wms/?',
+              layers: const ['s2cloudless-2021_3857'],
             ),
-            Flexible(
-              child: FlutterMap(
-                options: const MapOptions(
-                  initialCenter: LatLng(42.58, 12.43),
-                  initialZoom: 6,
-                ),
-                children: [
-                  TileLayer(
-                    wmsOptions: WMSTileLayerOptions(
-                      baseUrl: 'https://{s}.s2maps-tiles.eu/wms/?',
-                      layers: const ['s2cloudless-2021_3857'],
-                    ),
-                    subdomains: const ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                  RichAttributionWidget(
-                    popupInitialDisplayDuration: const Duration(seconds: 5),
-                    attributions: [
-                      TextSourceAttribution(
-                        'Sentinel-2 cloudless - https://s2maps.eu by EOX IT Services GmbH',
-                        onTap: () => launchUrl(Uri.parse('https://s2maps.eu')),
-                      ),
-                      const TextSourceAttribution(
-                        'Modified Copernicus Sentinel data 2021',
-                      ),
-                      TextSourceAttribution(
-                        'Rendering: EOX::Maps',
-                        onTap: () =>
-                            launchUrl(Uri.parse('https://maps.eox.at/')),
-                      ),
-                    ],
-                  ),
-                ],
+            subdomains: const ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
+            userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+          ),
+          RichAttributionWidget(
+            popupInitialDisplayDuration: const Duration(seconds: 5),
+            attributions: [
+              TextSourceAttribution(
+                'Sentinel-2 cloudless - https://s2maps.eu by EOX IT Services GmbH',
+                onTap: () => launchUrl(Uri.parse('https://s2maps.eu')),
               ),
-            ),
-          ],
-        ),
+              const TextSourceAttribution(
+                'Modified Copernicus Sentinel data 2021',
+              ),
+              TextSourceAttribution(
+                'Rendering: EOX::Maps',
+                onTap: () => launchUrl(Uri.parse('https://maps.eox.at/')),
+              ),
+            ],
+          ),
+        ],
       ),
     );
   }
diff --git a/example/lib/plugins/plugin_scalebar.dart b/example/lib/plugins/plugin_scalebar.dart
new file mode 100644
index 000000000..646675071
--- /dev/null
+++ b/example/lib/plugins/plugin_scalebar.dart
@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/pages/scale_layer_plugin_option.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
+
+class PluginScaleBar extends StatelessWidget {
+  static const String route = '/plugin_scalebar';
+
+  const PluginScaleBar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Scale Bar Plugin')),
+      drawer: const MenuDrawer(PluginScaleBar.route),
+      body: Flexible(
+        child: FlutterMap(
+          options: const MapOptions(
+            initialCenter: LatLng(51.5, -0.09),
+            initialZoom: 5,
+          ),
+          children: [
+            openStreetMapTileLayer,
+            ScaleLayerWidget(
+              options: ScaleLayerPluginOption(
+                lineColor: Colors.black,
+                lineWidth: 3,
+                textStyle: const TextStyle(color: Colors.black, fontSize: 14),
+                padding: const EdgeInsets.all(10),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/example/lib/plugins/plugin_zoombuttons.dart b/example/lib/plugins/plugin_zoombuttons.dart
new file mode 100644
index 000000000..12b5ff876
--- /dev/null
+++ b/example/lib/plugins/plugin_zoombuttons.dart
@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_example/misc/tile_providers.dart';
+import 'package:flutter_map_example/plugins/zoombuttons_plugin_option.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
+
+class PluginZoomButtons extends StatelessWidget {
+  static const String route = '/plugin_zoombuttons';
+
+  const PluginZoomButtons({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Zoom Buttons Plugin')),
+      drawer: const MenuDrawer(PluginZoomButtons.route),
+      body: FlutterMap(
+        options: const MapOptions(
+          initialCenter: LatLng(51.5, -0.09),
+          initialZoom: 5,
+        ),
+        children: [
+          openStreetMapTileLayer,
+          const FlutterMapZoomButtons(
+            minZoom: 4,
+            maxZoom: 19,
+            mini: true,
+            padding: 10,
+            alignment: Alignment.bottomRight,
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/example/lib/pages/zoombuttons_plugin_option.dart b/example/lib/plugins/zoombuttons_plugin_option.dart
similarity index 78%
rename from example/lib/pages/zoombuttons_plugin_option.dart
rename to example/lib/plugins/zoombuttons_plugin_option.dart
index 0f0a0cadd..e6738dc52 100644
--- a/example/lib/pages/zoombuttons_plugin_option.dart
+++ b/example/lib/plugins/zoombuttons_plugin_option.dart
@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
 
@@ -33,7 +35,9 @@ class FlutterMapZoomButtons extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final controller = MapController.of(context);
     final camera = MapCamera.of(context);
+    final theme = Theme.of(context);
 
     return Align(
       alignment: alignment,
@@ -46,20 +50,17 @@ class FlutterMapZoomButtons extends StatelessWidget {
             child: FloatingActionButton(
               heroTag: 'zoomInButton',
               mini: mini,
-              backgroundColor: zoomInColor ?? Theme.of(context).primaryColor,
+              backgroundColor: zoomInColor ?? theme.primaryColor,
               onPressed: () {
                 final paddedMapCamera = CameraFit.bounds(
                   bounds: camera.visibleBounds,
                   padding: _fitBoundsPadding,
                 ).fit(camera);
-                var zoom = paddedMapCamera.zoom + 1;
-                if (zoom > maxZoom) {
-                  zoom = maxZoom;
-                }
-                MapController.of(context).move(paddedMapCamera.center, zoom);
+                final zoom = min(paddedMapCamera.zoom + 1, maxZoom);
+                controller.move(paddedMapCamera.center, zoom);
               },
               child: Icon(zoomInIcon,
-                  color: zoomInColorIcon ?? IconTheme.of(context).color),
+                  color: zoomInColorIcon ?? theme.iconTheme.color),
             ),
           ),
           Padding(
@@ -67,7 +68,7 @@ class FlutterMapZoomButtons extends StatelessWidget {
             child: FloatingActionButton(
               heroTag: 'zoomOutButton',
               mini: mini,
-              backgroundColor: zoomOutColor ?? Theme.of(context).primaryColor,
+              backgroundColor: zoomOutColor ?? theme.primaryColor,
               onPressed: () {
                 final paddedMapCamera = CameraFit.bounds(
                   bounds: camera.visibleBounds,
@@ -77,10 +78,10 @@ class FlutterMapZoomButtons extends StatelessWidget {
                 if (zoom < minZoom) {
                   zoom = minZoom;
                 }
-                MapController.of(context).move(paddedMapCamera.center, zoom);
+                controller.move(paddedMapCamera.center, zoom);
               },
               child: Icon(zoomOutIcon,
-                  color: zoomOutColorIcon ?? IconTheme.of(context).color),
+                  color: zoomOutColorIcon ?? theme.iconTheme.color),
             ),
           ),
         ],
diff --git a/example/lib/widgets/attribution.dart b/example/lib/widgets/attribution.dart
deleted file mode 100644
index da21e5572..000000000
--- a/example/lib/widgets/attribution.dart
+++ /dev/null
@@ -1,15 +0,0 @@
-import 'package:flutter_map/flutter_map.dart';
-import 'package:url_launcher/url_launcher.dart';
-
-final standardSingleAttributionLayer = [
-  RichAttributionWidget(
-    attributions: [
-      TextSourceAttribution(
-        'OpenStreetMap contributors',
-        onTap: () => launchUrl(
-          Uri.parse('https://openstreetmap.org/copyright'),
-        ),
-      ),
-    ],
-  ),
-];
diff --git a/example/lib/widgets/drawer.dart b/example/lib/widgets/drawer.dart
deleted file mode 100644
index a74a58c36..000000000
--- a/example/lib/widgets/drawer.dart
+++ /dev/null
@@ -1,284 +0,0 @@
-import 'package:flutter/material.dart';
-
-import 'package:flutter_map_example/pages/animated_map_controller.dart';
-import 'package:flutter_map_example/pages/cancellable_tile_provider.dart';
-import 'package:flutter_map_example/pages/circle.dart';
-import 'package:flutter_map_example/pages/custom_crs/custom_crs.dart';
-import 'package:flutter_map_example/pages/epsg3413_crs.dart';
-import 'package:flutter_map_example/pages/epsg4326_crs.dart';
-import 'package:flutter_map_example/pages/fallback_url_network_page.dart';
-import 'package:flutter_map_example/pages/home.dart';
-import 'package:flutter_map_example/pages/interactive_test_page.dart';
-import 'package:flutter_map_example/pages/latlng_to_screen_point.dart';
-import 'package:flutter_map_example/pages/many_circles.dart';
-import 'package:flutter_map_example/pages/many_markers.dart';
-import 'package:flutter_map_example/pages/map_controller.dart';
-import 'package:flutter_map_example/pages/map_inside_listview.dart';
-import 'package:flutter_map_example/pages/markers.dart';
-import 'package:flutter_map_example/pages/moving_markers.dart';
-import 'package:flutter_map_example/pages/offline_map.dart';
-import 'package:flutter_map_example/pages/overlay_image.dart';
-import 'package:flutter_map_example/pages/plugin_scalebar.dart';
-import 'package:flutter_map_example/pages/plugin_zoombuttons.dart';
-import 'package:flutter_map_example/pages/screen_point_to_latlng.dart';
-import 'package:flutter_map_example/pages/polygon.dart';
-import 'package:flutter_map_example/pages/polyline.dart';
-import 'package:flutter_map_example/pages/reset_tile_layer.dart';
-import 'package:flutter_map_example/pages/retina.dart';
-import 'package:flutter_map_example/pages/secondary_tap.dart';
-import 'package:flutter_map_example/pages/sliding_map.dart';
-import 'package:flutter_map_example/pages/stateful_markers.dart';
-import 'package:flutter_map_example/pages/tile_builder.dart';
-import 'package:flutter_map_example/pages/tile_loading_error_handle.dart';
-import 'package:flutter_map_example/pages/wms_tile_layer.dart';
-
-Widget _buildMenuItem(
-  BuildContext context,
-  Widget title,
-  String routeName,
-  String currentRoute, {
-  Widget? icon,
-}) {
-  final isSelected = routeName == currentRoute;
-
-  return ListTile(
-    title: title,
-    leading: icon,
-    selected: isSelected,
-    onTap: () {
-      if (isSelected) {
-        Navigator.pop(context);
-      } else {
-        Navigator.pushReplacementNamed(context, routeName);
-      }
-    },
-  );
-}
-
-Drawer buildDrawer(BuildContext context, String currentRoute) {
-  return Drawer(
-    child: ListView(
-      children: <Widget>[
-        DrawerHeader(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Image.asset(
-                'assets/ProjectIcon.png',
-                height: 48,
-              ),
-              const SizedBox(height: 16),
-              const Text(
-                'flutter_map Demo',
-                style: TextStyle(fontWeight: FontWeight.bold),
-              ),
-              const Text(
-                '© flutter_map Authors & Contributors',
-                textAlign: TextAlign.center,
-                style: TextStyle(fontSize: 14),
-              ),
-            ],
-          ),
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Home'),
-          HomePage.route,
-          currentRoute,
-          icon: const Icon(Icons.home),
-        ),
-        const Divider(),
-        _buildMenuItem(
-          context,
-          const Text('Marker Layer'),
-          MarkerPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Polygon Layer'),
-          PolygonPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Polyline Layer'),
-          PolylinePage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Circle Layer'),
-          CirclePage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Overlay Image Layer'),
-          OverlayImagePage.route,
-          currentRoute,
-        ),
-        const Divider(),
-        _buildMenuItem(
-          context,
-          const Text('Map Controller'),
-          MapControllerPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Animated Map Controller'),
-          AnimatedMapControllerPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Interactive Flags'),
-          InteractiveFlagsPage.route,
-          currentRoute,
-        ),
-        const Divider(),
-        _buildMenuItem(
-          context,
-          const Text('WMS Sourced Map'),
-          WMSLayerPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Asset Sourced Map'),
-          OfflineMapPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Fallback URL'),
-          FallbackUrlNetworkPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Cancellable Tile Provider'),
-          CancellableTileProviderPage.route,
-          currentRoute,
-        ),
-        const Divider(),
-        _buildMenuItem(
-          context,
-          const Text('Stateful Markers'),
-          StatefulMarkersPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Many Markers'),
-          ManyMarkersPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Many Circles'),
-          ManyCirclesPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Moving Marker'),
-          MovingMarkersPage.route,
-          currentRoute,
-        ),
-        const Divider(),
-        _buildMenuItem(
-          context,
-          const Text('ScaleBar Plugins'),
-          PluginScaleBar.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('ZoomButtons Plugins'),
-          PluginZoomButtons.route,
-          currentRoute,
-        ),
-        const Divider(),
-        _buildMenuItem(
-          context,
-          const Text('Custom CRS'),
-          CustomCrsPage.route,
-          currentRoute,
-        ),
-        ListTile(
-          title: const Text('EPSG4326 CRS'),
-          selected: currentRoute == EPSG4326Page.route,
-          onTap: () {
-            Navigator.pushReplacementNamed(context, EPSG4326Page.route);
-          },
-        ),
-        ListTile(
-          title: const Text('EPSG3413 CRS'),
-          selected: currentRoute == EPSG3413Page.route,
-          onTap: () {
-            Navigator.pushReplacementNamed(context, EPSG3413Page.route);
-          },
-        ),
-        const Divider(),
-        _buildMenuItem(
-          context,
-          const Text('Sliding Map'),
-          SlidingMapPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Map Inside Scrollable'),
-          MapInsideListViewPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Secondary Tap'),
-          SecondaryTapPage.route,
-          currentRoute,
-        ),
-        const Divider(),
-        _buildMenuItem(
-          context,
-          const Text('Custom Tile Error Handling'),
-          TileLoadingErrorHandle.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Custom Tile Builder'),
-          TileBuilderPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Retina Tile Layer'),
-          RetinaPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('Reset Tile Layer'),
-          ResetTileLayerPage.route,
-          currentRoute,
-        ),
-        const Divider(),
-        _buildMenuItem(
-          context,
-          const Text('Screen Point 🡒 LatLng'),
-          ScreenPointToLatLngPage.route,
-          currentRoute,
-        ),
-        _buildMenuItem(
-          context,
-          const Text('LatLng 🡒 Screen Point'),
-          LatLngToScreenPointPage.route,
-          currentRoute,
-        ),
-      ],
-    ),
-  );
-}
diff --git a/example/lib/widgets/drawer/floating_menu_button.dart b/example/lib/widgets/drawer/floating_menu_button.dart
new file mode 100644
index 000000000..4549440dc
--- /dev/null
+++ b/example/lib/widgets/drawer/floating_menu_button.dart
@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+class FloatingMenuButton extends StatelessWidget {
+  const FloatingMenuButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PositionedDirectional(
+      start: 16,
+      top: 16,
+      child: SafeArea(
+        child: Container(
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.background,
+            borderRadius: BorderRadius.circular(999),
+          ),
+          padding: const EdgeInsets.all(8),
+          child: Row(
+            children: [
+              IconButton(
+                onPressed: () => Scaffold.of(context).openDrawer(),
+                icon: const Icon(Icons.menu),
+              ),
+              const SizedBox(width: 8),
+              Image.asset('assets/ProjectIcon.png', height: 32, width: 32),
+              const SizedBox(width: 8),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/example/lib/widgets/drawer/menu_drawer.dart b/example/lib/widgets/drawer/menu_drawer.dart
new file mode 100644
index 000000000..4d0d8e6cf
--- /dev/null
+++ b/example/lib/widgets/drawer/menu_drawer.dart
@@ -0,0 +1,235 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map_example/pages/animated_map_controller.dart';
+import 'package:flutter_map_example/pages/bundled_offline_map.dart';
+import 'package:flutter_map_example/pages/cancellable_tile_provider.dart';
+import 'package:flutter_map_example/pages/circle.dart';
+import 'package:flutter_map_example/pages/custom_crs/custom_crs.dart';
+import 'package:flutter_map_example/pages/epsg3413_crs.dart';
+import 'package:flutter_map_example/pages/epsg4326_crs.dart';
+import 'package:flutter_map_example/pages/fallback_url_page.dart';
+import 'package:flutter_map_example/pages/home.dart';
+import 'package:flutter_map_example/pages/interactive_test_page.dart';
+import 'package:flutter_map_example/pages/latlng_to_screen_point.dart';
+import 'package:flutter_map_example/pages/many_circles.dart';
+import 'package:flutter_map_example/pages/many_markers.dart';
+import 'package:flutter_map_example/pages/map_controller.dart';
+import 'package:flutter_map_example/pages/map_inside_listview.dart';
+import 'package:flutter_map_example/pages/markers.dart';
+import 'package:flutter_map_example/pages/moving_markers.dart';
+import 'package:flutter_map_example/pages/overlay_image.dart';
+import 'package:flutter_map_example/pages/polygon.dart';
+import 'package:flutter_map_example/pages/polyline.dart';
+import 'package:flutter_map_example/pages/reset_tile_layer.dart';
+import 'package:flutter_map_example/pages/retina.dart';
+import 'package:flutter_map_example/pages/screen_point_to_latlng.dart';
+import 'package:flutter_map_example/pages/secondary_tap.dart';
+import 'package:flutter_map_example/pages/sliding_map.dart';
+import 'package:flutter_map_example/pages/stateful_markers.dart';
+import 'package:flutter_map_example/pages/tile_builder.dart';
+import 'package:flutter_map_example/pages/tile_loading_error_handle.dart';
+import 'package:flutter_map_example/pages/wms_tile_layer.dart';
+import 'package:flutter_map_example/plugins/plugin_scalebar.dart';
+import 'package:flutter_map_example/plugins/plugin_zoombuttons.dart';
+import 'package:flutter_map_example/widgets/drawer/menu_item.dart';
+
+class MenuDrawer extends StatelessWidget {
+  final String currentRoute;
+
+  const MenuDrawer(this.currentRoute, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Drawer(
+      child: ListView(
+        children: <Widget>[
+          DrawerHeader(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Image.asset(
+                  'assets/ProjectIcon.png',
+                  height: 48,
+                ),
+                const SizedBox(height: 16),
+                const Text(
+                  'flutter_map Demo',
+                  style: TextStyle(fontWeight: FontWeight.bold),
+                ),
+                const Text(
+                  '© flutter_map Authors & Contributors',
+                  textAlign: TextAlign.center,
+                  style: TextStyle(fontSize: 14),
+                ),
+              ],
+            ),
+          ),
+          MenuItemWidget(
+            caption: 'Home',
+            routeName: HomePage.route,
+            currentRoute: currentRoute,
+            icon: const Icon(Icons.home),
+          ),
+          const Divider(),
+          MenuItemWidget(
+            caption: 'Marker Layer',
+            routeName: MarkerPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Polygon Layer',
+            routeName: PolygonPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Polyline Layer',
+            routeName: PolylinePage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Circle Layer',
+            routeName: CirclePage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Overlay Image Layer',
+            routeName: OverlayImagePage.route,
+            currentRoute: currentRoute,
+          ),
+          const Divider(),
+          MenuItemWidget(
+            caption: 'Map Controller',
+            routeName: MapControllerPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Animated Map Controller',
+            routeName: AnimatedMapControllerPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Interactive Flags',
+            routeName: InteractiveFlagsPage.route,
+            currentRoute: currentRoute,
+          ),
+          const Divider(),
+          MenuItemWidget(
+            caption: 'WMS Sourced Map',
+            routeName: WMSLayerPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Bundled Offline Map',
+            routeName: BundledOfflineMapPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Fallback URL',
+            routeName: FallbackUrlPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Cancellable Tile Provider',
+            routeName: CancellableTileProviderPage.route,
+            currentRoute: currentRoute,
+          ),
+          const Divider(),
+          MenuItemWidget(
+            caption: 'Stateful Markers',
+            routeName: StatefulMarkersPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Many Markers',
+            routeName: ManyMarkersPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Many Circles',
+            routeName: ManyCirclesPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Moving Marker',
+            routeName: MovingMarkersPage.route,
+            currentRoute: currentRoute,
+          ),
+          const Divider(),
+          MenuItemWidget(
+            caption: 'Scale Bar Plugin',
+            routeName: PluginScaleBar.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Zoom Buttons Plugin',
+            routeName: PluginZoomButtons.route,
+            currentRoute: currentRoute,
+          ),
+          const Divider(),
+          MenuItemWidget(
+            caption: 'Custom CRS',
+            routeName: CustomCrsPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'EPSG4326 CRS',
+            currentRoute: currentRoute,
+            routeName: EPSG4326Page.route,
+          ),
+          MenuItemWidget(
+            caption: 'EPSG3413 CRS',
+            currentRoute: currentRoute,
+            routeName: EPSG3413Page.route,
+          ),
+          const Divider(),
+          MenuItemWidget(
+            caption: 'Sliding Map',
+            routeName: SlidingMapPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Map Inside Scrollable',
+            routeName: MapInsideListViewPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Secondary Tap',
+            routeName: SecondaryTapPage.route,
+            currentRoute: currentRoute,
+          ),
+          const Divider(),
+          MenuItemWidget(
+            caption: 'Custom Tile Error Handling',
+            routeName: TileLoadingErrorHandle.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Custom Tile Builder',
+            routeName: TileBuilderPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Retina Tile Layer',
+            routeName: RetinaPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'Reset Tile Layer',
+            routeName: ResetTileLayerPage.route,
+            currentRoute: currentRoute,
+          ),
+          const Divider(),
+          MenuItemWidget(
+            caption: 'Screen Point 🡒 LatLng',
+            routeName: ScreenPointToLatLngPage.route,
+            currentRoute: currentRoute,
+          ),
+          MenuItemWidget(
+            caption: 'LatLng 🡒 Screen Point',
+            routeName: LatLngToScreenPointPage.route,
+            currentRoute: currentRoute,
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/example/lib/widgets/drawer/menu_item.dart b/example/lib/widgets/drawer/menu_item.dart
new file mode 100644
index 000000000..0ec100d35
--- /dev/null
+++ b/example/lib/widgets/drawer/menu_item.dart
@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+class MenuItemWidget extends StatelessWidget {
+  final String caption;
+  final String routeName;
+  final bool isSelected;
+  final Widget? icon;
+
+  const MenuItemWidget({
+    required this.caption,
+    required this.routeName,
+    required String currentRoute,
+    this.icon,
+    super.key,
+  }) : isSelected = currentRoute == routeName;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      title: Text(caption),
+      leading: icon,
+      selected: isSelected,
+      onTap: () {
+        if (isSelected) {
+          // close drawer
+          Navigator.pop(context);
+          return;
+        }
+        Navigator.pushReplacementNamed(context, routeName);
+      },
+    );
+  }
+}
diff --git a/example/lib/widgets/first_start_dialog.dart b/example/lib/widgets/first_start_dialog.dart
new file mode 100644
index 000000000..7031bb4f2
--- /dev/null
+++ b/example/lib/widgets/first_start_dialog.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+class FirstStartDialog extends StatelessWidget {
+  const FirstStartDialog({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final width = MediaQuery.sizeOf(context).width;
+    return AlertDialog(
+      icon: UnconstrainedBox(
+        child: SizedBox.square(
+          dimension: 64,
+          child: Image.asset('assets/ProjectIcon.png', fit: BoxFit.fill),
+        ),
+      ),
+      title: const Text('flutter_map Live Web Demo'),
+      content: ConstrainedBox(
+        constraints: BoxConstraints(
+          maxWidth: width < 750
+              ? double.infinity
+              : (width / (width < 1100 ? 1.5 : 2.5)),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const Text(
+              'This is built automatically off of the latest commits to '
+              "'master', so may not reflect the latest release available "
+              'on pub.dev.\n'
+              "This is hosted on Firebase Hosting, meaning there's limited "
+              'bandwidth to share between all users, so please keep loads to a '
+              'minimum.',
+              textAlign: TextAlign.center,
+            ),
+            Padding(
+              padding: const EdgeInsets.only(right: 8, top: 16, bottom: 4),
+              child: Align(
+                alignment: Alignment.centerRight,
+                child: Text(
+                  "This won't be shown again",
+                  style: TextStyle(
+                    color: Theme.of(context)
+                        .colorScheme
+                        .inverseSurface
+                        .withOpacity(0.5),
+                  ),
+                  textAlign: TextAlign.right,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+      actions: [
+        TextButton.icon(
+          onPressed: () => Navigator.of(context).pop(),
+          label: const Text('OK'),
+          icon: const Icon(Icons.done),
+        ),
+      ],
+      contentPadding: const EdgeInsets.only(left: 24, top: 16, right: 24),
+    );
+  }
+}
diff --git a/example/lib/widgets/notice_banner.dart b/example/lib/widgets/notice_banner.dart
new file mode 100644
index 000000000..3285be85b
--- /dev/null
+++ b/example/lib/widgets/notice_banner.dart
@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class NoticeBanner extends StatelessWidget {
+  const NoticeBanner.warning({
+    super.key,
+    required this.text,
+    required this.url,
+    required this.sizeTransition,
+  })  : icon = Icons.warning_rounded,
+        foregroundColor = const Color(0xFF410002),
+        backgroundColor = const Color(0xFFFFDAD6);
+
+  const NoticeBanner.recommendation({
+    super.key,
+    required this.text,
+    required this.url,
+    required this.sizeTransition,
+  })  : icon = Icons.task_alt,
+        foregroundColor = const Color(0xFF072100),
+        backgroundColor = const Color(0xFFB8F397);
+
+  final String text;
+  final String? url;
+  final double sizeTransition;
+
+  final IconData icon;
+  final Color foregroundColor;
+  final Color backgroundColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return Container(
+          padding: EdgeInsets.symmetric(
+            horizontal: 8,
+            vertical: constraints.maxWidth <= sizeTransition ? 8 : 0,
+          ),
+          width: double.infinity,
+          color: backgroundColor,
+          child: Flex(
+            direction: constraints.maxWidth <= sizeTransition
+                ? Axis.vertical
+                : Axis.horizontal,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(icon, color: foregroundColor, size: 32),
+              const SizedBox(height: 12, width: 16),
+              Text(
+                text,
+                style: TextStyle(color: foregroundColor),
+                textAlign: TextAlign.center,
+              ),
+              if (url != null) ...[
+                const SizedBox(height: 0, width: 16),
+                TextButton.icon(
+                  icon: const Icon(Icons.open_in_new),
+                  label: const Text('Learn more'),
+                  onPressed: () => launchUrl(Uri.parse(url!)),
+                ),
+              ],
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
diff --git a/example/pubspec.yaml b/example/pubspec.yaml
index e13c6355c..312a4bdab 100644
--- a/example/pubspec.yaml
+++ b/example/pubspec.yaml
@@ -24,7 +24,7 @@ dependency_overrides:
     path: ../
 
 dev_dependencies:
-  flutter_lints: ^2.0.3
+  flutter_lints: ^3.0.0
   flutter_test:
     sdk: flutter
 
diff --git a/lib/src/gestures/positioned_tap_detector_2.dart b/lib/src/gestures/positioned_tap_detector_2.dart
index c65e454c7..ab1a85d84 100644
--- a/lib/src/gestures/positioned_tap_detector_2.dart
+++ b/lib/src/gestures/positioned_tap_detector_2.dart
@@ -1,8 +1,8 @@
-//////////////////////////////////////////////////////////////////
-///              Based on the work by Ali Raghebi              ///
-///           Now maintained here due to abandonment           ///
-/// https://github.com/arsamme/flutter-positioned-tap-detector ///
-//////////////////////////////////////////////////////////////////
+// //////////////////////////////////////////////////////////////////
+// ///              Based on the work by Ali Raghebi              ///
+// ///           Now maintained here due to abandonment           ///
+// /// https://github.com/arsamme/flutter-positioned-tap-detector ///
+// //////////////////////////////////////////////////////////////////
 
 import 'dart:async';
 import 'dart:math';
diff --git a/lib/src/layer/general/translucent_pointer.dart b/lib/src/layer/general/translucent_pointer.dart
index d8cbaf370..b23b28555 100644
--- a/lib/src/layer/general/translucent_pointer.dart
+++ b/lib/src/layer/general/translucent_pointer.dart
@@ -1,8 +1,8 @@
-////////////////////////////////////////////////////////////////
-///           Based on the work by Sander Kersten            ///
-///    Migrated, and now maintained here for flexibility     ///
-/// https://github.com/spkersten/flutter_transparent_pointer ///
-////////////////////////////////////////////////////////////////
+// ////////////////////////////////////////////////////////////////
+// ///           Based on the work by Sander Kersten            ///
+// ///    Migrated, and now maintained here for flexibility     ///
+// /// https://github.com/spkersten/flutter_transparent_pointer ///
+// ////////////////////////////////////////////////////////////////
 
 import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
@@ -79,6 +79,7 @@ class RenderTranslucentPointer extends RenderProxyBox {
   /// during painting.
   bool get translucent => _translucent;
   bool _translucent;
+
   set translucent(bool value) {
     if (value == _translucent) return;
     _translucent = value;
diff --git a/pubspec.yaml b/pubspec.yaml
index 901baf203..83a24aeb2 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -39,7 +39,7 @@ dependencies:
   vector_math: ^2.1.2
 
 dev_dependencies:
-  flutter_lints: ^2.0.3
+  flutter_lints: ^3.0.0
   flutter_test:
     sdk: flutter
   mocktail: ^1.0.1