From e16f2e658c6ddb490bd32a963d52f7f310345ba6 Mon Sep 17 00:00:00 2001 From: m0nac0 <58807793+m0nac0@users.noreply.github.com> Date: Sat, 21 May 2022 09:57:15 +0200 Subject: [PATCH 1/4] example: add custom marker --- example/assets/symbols/custom-marker.png | Bin 0 -> 1179 bytes example/lib/annotation_order_maps.dart | 2 +- example/lib/layer.dart | 14 ++++++++++++-- example/pubspec.yaml | 1 + 4 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 example/assets/symbols/custom-marker.png diff --git a/example/assets/symbols/custom-marker.png b/example/assets/symbols/custom-marker.png new file mode 100644 index 0000000000000000000000000000000000000000..47691f0cf838809cba47f0f69564b3d98718e5bc GIT binary patch literal 1179 zcmV;M1Z4Y(P)S%egkiIi~`ap6x`JjYx)TGZzt@aBy(P{k~7nb9QZL=RME&drHsW&+~j<&*ypG zpC69~3WvuRqVIkf#FhSW{66G`*B8MolMatqO(^&mG-$ON@QsLoNR$u^Md9{_@Isjtts5U#WFt-}wRpfeMXNq?z-Z9IWJrTX zlXy8XT3;{c_P&pBJ(z?7?Ff2I-TpuVXe-tlBX-6~?yp3$c3f!@`hB zCvN?sm+Zf|kj}!1+7V#kr?S|L-R~ABwJYqw*BUR;$V3p@G~qoHo`c88ylexGHkS); zmUQCs&35*DNY(p`6W`tk=-9I)sa;_YuK2)C{N(ov%A!}#0r^dwX<3{)z;z#ACayl2 z;G77U2krbkBMvu|rVg}{m;*6y?wS%X<6{Qw5))uA?u+k$Na34vBPRMD!%67F+a|>$X7JNr+K--L8I;<^g8*B5(-C=Gh2^i zJ1d0kNqLY@K5ieRonQ4MD^p%96Rf)4_Qs>Ak;uW)fPBGYZ+8$cSY?7X56-v7gXlR> zCG9<7k;G5K3x^9mqf#-^ABbRSNgj5+Q*{3Uum3SgYnr-|$Gj*yM%)2>(^!haf~@-w z$f1~;DavxQNb2LMEsbfavsJt}xbxuBr#g7*CbhNS5GwyYtU#@=nUC7)0%<#nL=syx!i1b5r#BAR01#j)>MRd9;0m@oY7=x=o7 z+yF9-cXxYUe;Dhk=Hb0p7R(%=+Y_Y9jpt#_nVwl<;us6y;@+jKhBV9^Aon6~2mT!K zO)DUHVUV9|#J5dls^L^!F<*STdziNGzc#Jf=2i2KxVYOu4o@qZgrUj4H8XJvYf6O@aB-0UfSw_g^7j#1M<(x z0$Zl)eO0BpJ5RlG%a6preEA2{sZT3Y2B%sianK`O1H}4gG`&@b*O$%v{{eE)Ijc|7 tt>Y_G3YRhu@{QVA&$3EE&yh?de*=frm^eqUfNcN(002ovPDHLkV1fj+L?!?L literal 0 HcmV?d00001 diff --git a/example/lib/annotation_order_maps.dart b/example/lib/annotation_order_maps.dart index f1da2b4b7..3b241c172 100644 --- a/example/lib/annotation_order_maps.dart +++ b/example/lib/annotation_order_maps.dart @@ -116,7 +116,7 @@ class _AnnotationOrderBodyState extends State { center.latitude, center.longitude, ), - iconImage: "airport-15", + iconImage: "custom-marker", // "airport-15", ), ); controller.addLine( diff --git a/example/lib/layer.dart b/example/lib/layer.dart index 757533194..2f7e3c838 100644 --- a/example/lib/layer.dart +++ b/example/lib/layer.dart @@ -1,7 +1,9 @@ import 'dart:async'; import 'dart:math'; +import 'dart:typed_data'; import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:maplibre_gl/mapbox_gl.dart'; import 'package:maplibre_gl_example/page.dart'; @@ -57,6 +59,7 @@ class LayerState extends State { } void _onStyleLoadedCallback() async { + await addImageFromAsset("custom-marker", "assets/symbols/custom-marker.png"); await controller.addGeoJsonSource("fills", _fills); await controller.addGeoJsonSource("points", _points); await controller.addGeoJsonSource("moving", _movingFeature(0)); @@ -105,7 +108,7 @@ class LayerState extends State { "points", "symbols", SymbolLayerProperties( - iconImage: "{type}-15", + iconImage: "custom-marker", // "{type}-15", iconSize: 2, iconAllowOverlap: true, ), @@ -123,7 +126,7 @@ class LayerState extends State { Expressions.literal, [0, 2] ], - iconImage: "bicycle-15", + iconImage: "custom-marker", // "bicycle-15", iconSize: 2, iconAllowOverlap: true, textAllowOverlap: true, @@ -139,6 +142,13 @@ class LayerState extends State { timer?.cancel(); super.dispose(); } + + /// Adds an asset image to the currently displayed style + Future addImageFromAsset(String name, String assetName) async { + final ByteData bytes = await rootBundle.load(assetName); + final Uint8List list = bytes.buffer.asUint8List(); + return controller.addImage(name, list); + } } Map _movingFeature(double t) { diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 256f7b24a..5dd61e946 100644 --- a/example/pubspec.yaml +++ b/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 From a2ed78f9ad3a4b12829dcd0953c610b3e9954de9 Mon Sep 17 00:00:00 2001 From: m0nac0 <58807793+m0nac0@users.noreply.github.com> Date: Sat, 21 May 2022 09:59:29 +0200 Subject: [PATCH 2/4] fix formatting --- example/lib/layer.dart | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/example/lib/layer.dart b/example/lib/layer.dart index 2f7e3c838..e04aefd08 100644 --- a/example/lib/layer.dart +++ b/example/lib/layer.dart @@ -59,7 +59,8 @@ class LayerState extends State { } void _onStyleLoadedCallback() async { - await addImageFromAsset("custom-marker", "assets/symbols/custom-marker.png"); + await addImageFromAsset( + "custom-marker", "assets/symbols/custom-marker.png"); await controller.addGeoJsonSource("fills", _fills); await controller.addGeoJsonSource("points", _points); await controller.addGeoJsonSource("moving", _movingFeature(0)); From 5ab385fa6d370d4b992106f8e4edc288e43e6534 Mon Sep 17 00:00:00 2001 From: m0nac0 <58807793+m0nac0@users.noreply.github.com> Date: Mon, 23 May 2022 17:04:56 +0200 Subject: [PATCH 3/4] fix other symbols --- example/lib/annotation_order_maps.dart | 6 +++++- example/lib/click_annotations.dart | 7 +++++-- example/lib/layer.dart | 11 +++-------- example/lib/place_batch.dart | 5 ++++- example/lib/place_symbol.dart | 10 ++++++---- example/lib/scrolling_map.dart | 7 +++++-- example/lib/util.dart | 12 ++++++++++++ 7 files changed, 40 insertions(+), 18 deletions(-) create mode 100644 example/lib/util.dart diff --git a/example/lib/annotation_order_maps.dart b/example/lib/annotation_order_maps.dart index 3b241c172..7c4cb9169 100644 --- a/example/lib/annotation_order_maps.dart +++ b/example/lib/annotation_order_maps.dart @@ -1,8 +1,10 @@ import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; // ignore: unnecessary_import +import 'package:flutter/services.dart'; import 'package:maplibre_gl/mapbox_gl.dart'; import 'page.dart'; +import 'util.dart'; class AnnotationOrderPage extends ExamplePage { AnnotationOrderPage() @@ -109,7 +111,9 @@ class _AnnotationOrderBodyState extends State { 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( diff --git a/example/lib/click_annotations.dart b/example/lib/click_annotations.dart index e7305c509..4c522da88 100644 --- a/example/lib/click_annotations.dart +++ b/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 { _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 { controller!.addSymbol( SymbolOptions( geometry: LatLng(-33.894372606072309, 151.17576679759523), - iconImage: "fast-food-15", + iconImage: "custom-marker", //"fast-food-15", iconSize: 2), ); controller!.addLine( diff --git a/example/lib/layer.dart b/example/lib/layer.dart index b63446306..1bcfd9378 100644 --- a/example/lib/layer.dart +++ b/example/lib/layer.dart @@ -7,6 +7,8 @@ import 'package:flutter/services.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'); @@ -60,7 +62,7 @@ class LayerState extends State { void _onStyleLoadedCallback() async { await addImageFromAsset( - "custom-marker", "assets/symbols/custom-marker.png"); + controller, "custom-marker", "assets/symbols/custom-marker.png"); await controller.addGeoJsonSource("points", _points); await controller.addGeoJsonSource("moving", _movingFeature(0)); @@ -145,13 +147,6 @@ class LayerState extends State { timer?.cancel(); super.dispose(); } - - /// Adds an asset image to the currently displayed style - Future addImageFromAsset(String name, String assetName) async { - final ByteData bytes = await rootBundle.load(assetName); - final Uint8List list = bytes.buffer.asUint8List(); - return controller.addImage(name, list); - } } Map _movingFeature(double t) { diff --git a/example/lib/place_batch.dart b/example/lib/place_batch.dart index ab276931d..8281d072d 100644 --- a/example/lib/place_batch.dart +++ b/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 { 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 { 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, diff --git a/example/lib/place_symbol.dart b/example/lib/place_symbol.dart index 77f7bac16..4a9e663a9 100644 --- a/example/lib/place_symbol.dart +++ b/example/lib/place_symbol.dart @@ -46,6 +46,7 @@ class PlaceSymbolBodyState extends State { } 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 { 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 { children: [ 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)'), diff --git a/example/lib/scrolling_map.dart b/example/lib/scrolling_map.dart index c55da3246..30964473a 100644 --- a/example/lib/scrolling_map.dart +++ b/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 { 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: [ diff --git a/example/lib/util.dart b/example/lib/util.dart new file mode 100644 index 000000000..fd7f378d6 --- /dev/null +++ b/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 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); +} From 9cc8ab0b1a8e91ec5106401eac909ca953f5d731 Mon Sep 17 00:00:00 2001 From: m0nac0 <58807793+m0nac0@users.noreply.github.com> Date: Mon, 23 May 2022 17:07:39 +0200 Subject: [PATCH 4/4] make the linter happy --- example/lib/annotation_order_maps.dart | 1 - example/lib/layer.dart | 2 -- 2 files changed, 3 deletions(-) diff --git a/example/lib/annotation_order_maps.dart b/example/lib/annotation_order_maps.dart index 7c4cb9169..2640401f7 100644 --- a/example/lib/annotation_order_maps.dart +++ b/example/lib/annotation_order_maps.dart @@ -1,6 +1,5 @@ import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; // ignore: unnecessary_import -import 'package:flutter/services.dart'; import 'package:maplibre_gl/mapbox_gl.dart'; import 'page.dart'; diff --git a/example/lib/layer.dart b/example/lib/layer.dart index 1bcfd9378..ec2c4c1ec 100644 --- a/example/lib/layer.dart +++ b/example/lib/layer.dart @@ -1,9 +1,7 @@ import 'dart:async'; import 'dart:math'; -import 'dart:typed_data'; import 'package:flutter/material.dart'; -import 'package:flutter/services.dart'; import 'package:maplibre_gl/mapbox_gl.dart'; import 'package:maplibre_gl_example/page.dart';