example: add custom marker icon

example/lib/annotation_order_maps.dart

@@ -3,6 +3,7 @@ import 'package:flutter/rendering.dart'; // ignore: unnecessary_import
 import 'package:maplibre_gl/mapbox_gl.dart';
 
 import 'page.dart';
+import 'util.dart';
 
 class AnnotationOrderPage extends ExamplePage {
   AnnotationOrderPage()
@@ -109,14 +110,16 @@ class _AnnotationOrderBodyState extends State<AnnotationOrderBody> {
     this.controllerTwo = controller;
   }
 
-  void onStyleLoaded(MaplibreMapController controller) {
+  void onStyleLoaded(MaplibreMapController controller) async {
+    await addImageFromAsset(
+        controller, "custom-marker", "assets/symbols/custom-marker.png");
     controller.addSymbol(
       SymbolOptions(
         geometry: LatLng(
           center.latitude,
           center.longitude,
         ),
-        iconImage: "airport-15",
+        iconImage: "custom-marker", // "airport-15",
       ),
     );
     controller.addLine(

example/lib/click_annotations.dart

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:maplibre_gl/mapbox_gl.dart';
 
 import 'page.dart';
+import 'util.dart';
 
 class ClickAnnotationPage extends ExamplePage {
   ClickAnnotationPage()
@@ -72,7 +73,9 @@ class ClickAnnotationBodyState extends State<ClickAnnotationBody> {
     _showSnackBar('symbol', symbol.id);
   }
 
-  void _onStyleLoaded() {
+  void _onStyleLoaded() async {
+    await addImageFromAsset(
+        controller!, "custom-marker", "assets/symbols/custom-marker.png");
     controller!.addCircle(
       CircleOptions(
         geometry: LatLng(-33.881979408447314, 151.171361438502117),
@@ -92,7 +95,7 @@ class ClickAnnotationBodyState extends State<ClickAnnotationBody> {
     controller!.addSymbol(
       SymbolOptions(
           geometry: LatLng(-33.894372606072309, 151.17576679759523),
-          iconImage: "fast-food-15",
+          iconImage: "custom-marker", //"fast-food-15",
           iconSize: 2),
     );
     controller!.addLine(

example/lib/layer.dart

@@ -5,6 +5,8 @@ import 'package:flutter/material.dart';
 import 'package:maplibre_gl/mapbox_gl.dart';
 import 'package:maplibre_gl_example/page.dart';
 
+import 'util.dart';
+
 class LayerPage extends ExamplePage {
   LayerPage() : super(const Icon(Icons.share), 'Layer');
 
@@ -57,6 +59,8 @@ class LayerState extends State {
   }
 
   void _onStyleLoadedCallback() async {
+    await addImageFromAsset(
+        controller, "custom-marker", "assets/symbols/custom-marker.png");
     await controller.addGeoJsonSource("points", _points);
     await controller.addGeoJsonSource("moving", _movingFeature(0));
 
@@ -107,7 +111,7 @@ class LayerState extends State {
       "points",
       "symbols",
       SymbolLayerProperties(
-        iconImage: "{type}-15",
+        iconImage: "custom-marker", //  "{type}-15",
         iconSize: 2,
         iconAllowOverlap: true,
       ),
@@ -125,7 +129,7 @@ class LayerState extends State {
             Expressions.literal,
             [0, 2]
           ],
-          iconImage: "bicycle-15",
+          iconImage: "custom-marker", // "bicycle-15",
           iconSize: 2,
           iconAllowOverlap: true,
           textAllowOverlap: true,

example/lib/place_batch.dart

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:maplibre_gl/mapbox_gl.dart';
 
 import 'page.dart';
+import 'util.dart';
 
 const fillOptions = [
   FillOptions(
@@ -106,7 +107,7 @@ class BatchAddBodyState extends State<BatchAddBody> {
       if (option.geometry!.length > 1)
         for (final latLng in option.geometry!.last) {
           symbolOptions
-              .add(SymbolOptions(iconImage: 'hospital-11', geometry: latLng));
+              .add(SymbolOptions(iconImage: 'custom-marker', geometry: latLng));
         }
     }
     return symbolOptions;
@@ -146,6 +147,8 @@ class BatchAddBodyState extends State<BatchAddBody> {
             height: 200.0,
             child: MaplibreMap(
               onMapCreated: _onMapCreated,
+              onStyleLoadedCallback: () => addImageFromAsset(controller,
+                  "custom-marker", "assets/symbols/custom-marker.png"),
               initialCameraPosition: const CameraPosition(
                 target: LatLng(-33.8, 151.511),
                 zoom: 8.2,

example/lib/place_symbol.dart

@@ -46,6 +46,7 @@ class PlaceSymbolBodyState extends State<PlaceSymbolBody> {
   }
 
   void _onStyleLoaded() {
+    addImageFromAsset("custom-marker", "assets/symbols/custom-marker.png");
     addImageFromAsset("assetImage", "assets/symbols/custom-icon.png");
     addImageFromUrl(
         "networkImage", Uri.parse("https://via.placeholder.com/50"));
@@ -112,7 +113,7 @@ class PlaceSymbolBodyState extends State<PlaceSymbolBody> {
     return iconImage == 'customFont'
         ? SymbolOptions(
             geometry: geometry,
-            iconImage: 'airport-15',
+            iconImage: 'custom-marker', //'airport-15',
             fontNames: ['DIN Offc Pro Bold', 'Arial Unicode MS Regular'],
             textField: 'Airport',
             textSize: 12.5,
@@ -306,14 +307,15 @@ class PlaceSymbolBodyState extends State<PlaceSymbolBody> {
                       children: <Widget>[
                         TextButton(
                           child: const Text('add'),
-                          onPressed: () =>
-                              (_symbolCount == 12) ? null : _add("airport-15"),
+                          onPressed: () => (_symbolCount == 12)
+                              ? null
+                              : _add("custom-marker"),
                         ),
                         TextButton(
                           child: const Text('add all'),
                           onPressed: () => (_symbolCount == 12)
                               ? null
-                              : _addAll("airport-15"),
+                              : _addAll("custom-marker"),
                         ),
                         TextButton(
                           child: const Text('add (custom icon)'),

example/lib/scrolling_map.dart

@@ -7,6 +7,7 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart'; // ignore: unnecessary_import
 import 'package:maplibre_gl/mapbox_gl.dart';
+import 'package:maplibre_gl_example/util.dart';
 
 import 'page.dart';
 
@@ -116,13 +117,15 @@ class _ScrollingMapBodyState extends State<ScrollingMapBody> {
     this.controllerTwo = controller;
   }
 
-  void onStyleLoaded(MaplibreMapController controller) {
+  void onStyleLoaded(MaplibreMapController controller) async {
+    await addImageFromAsset(
+        controller, "custom-marker", "assets/symbols/custom-marker.png");
     controller.addSymbol(SymbolOptions(
         geometry: LatLng(
           center.latitude,
           center.longitude,
         ),
-        iconImage: "airport-15"));
+        iconImage: "custom-marker"));
     controller.addLine(
       LineOptions(
         geometry: [

example/lib/util.dart

@@ -0,0 +1,12 @@
+import 'dart:typed_data';
+
+import 'package:flutter/services.dart';
+import 'package:maplibre_gl/mapbox_gl.dart';
+
+/// Adds an asset image to the currently displayed style
+Future<void> addImageFromAsset(
+    MaplibreMapController controller, String name, String assetName) async {
+  final ByteData bytes = await rootBundle.load(assetName);
+  final Uint8List list = bytes.buffer.asUint8List();
+  return controller.addImage(name, list);
+}

example/pubspec.yaml

@@ -57,6 +57,7 @@ flutter:
     - assets/symbols/custom-icon.png
     - assets/symbols/2.0x/custom-icon.png
     - assets/symbols/3.0x/custom-icon.png
+    - assets/symbols/custom-marker.png
     - assets/style.json
     - assets/sydney.png