From b3a1f260f7650db7090a1dec3832ae9aefb23bbc Mon Sep 17 00:00:00 2001 From: hungtrn75 Date: Mon, 10 Oct 2022 15:34:57 +0700 Subject: [PATCH 1/9] feat: support image source --- lib/mapbox_gl_dart.dart | 2 + lib/src/geo/image_options.dart | 27 +++++++++++ .../interop/geo/image_options_interop.dart | 15 ++++++ lib/src/interop/interop.dart | 2 + .../style/sources/image_source_interop.dart | 19 ++++++++ lib/src/style/sources/image_source.dart | 47 +++++++++++++++++++ 6 files changed, 112 insertions(+) create mode 100644 lib/src/geo/image_options.dart create mode 100644 lib/src/interop/geo/image_options_interop.dart create mode 100644 lib/src/interop/style/sources/image_source_interop.dart create mode 100644 lib/src/style/sources/image_source.dart diff --git a/lib/mapbox_gl_dart.dart b/lib/mapbox_gl_dart.dart index 955c951..1ea2d1d 100644 --- a/lib/mapbox_gl_dart.dart +++ b/lib/mapbox_gl_dart.dart @@ -4,6 +4,7 @@ library mapboxgl; export 'src/geo/geojson.dart'; +export 'src/geo/image_options.dart'; export 'src/geo/lng_lat.dart'; export 'src/geo/lng_lat_bounds.dart'; export 'src/geo/point.dart'; @@ -14,6 +15,7 @@ export 'src/style/layers/layer.dart'; export 'src/style/layers/line_layer.dart'; export 'src/style/layers/symbol_layer.dart'; export 'src/style/sources/geojson_source.dart'; +export 'src/style/sources/image_source.dart'; export 'src/style/sources/source.dart'; export 'src/style/sources/vector_source.dart'; export 'src/style/style.dart'; diff --git a/lib/src/geo/image_options.dart b/lib/src/geo/image_options.dart new file mode 100644 index 0000000..6b27058 --- /dev/null +++ b/lib/src/geo/image_options.dart @@ -0,0 +1,27 @@ +library mapboxgl.geo.image_options; + +import 'package:mapbox_gl_dart/src/interop/interop.dart'; + +class ImageOptions extends JsObjectWrapper { + String get url => jsObject.url; + dynamic get coordinates => jsObject.coordinates; + + factory ImageOptions({ + String? url, + dynamic coordinates, + }) { + if (coordinates != null && + (coordinates is! List || coordinates.length != 4)) { + throw Exception( + 'Image coordinates must be an array of four longitude latitude pairs'); + } + return ImageOptions.fromJsObject(ImageOptionsJsImpl( + url: url, + coordinates: coordinates, + )); + } + + /// Creates a new ImageOptions from a [jsObject]. + ImageOptions.fromJsObject(ImageOptionsJsImpl jsObject) + : super.fromJsObject(jsObject); +} diff --git a/lib/src/interop/geo/image_options_interop.dart b/lib/src/interop/geo/image_options_interop.dart new file mode 100644 index 0000000..1c59531 --- /dev/null +++ b/lib/src/interop/geo/image_options_interop.dart @@ -0,0 +1,15 @@ +@JS('mapboxgl') +library mapboxgl.interop.geo.image_options; + +import 'package:js/js.dart'; + +@JS() +@anonymous +class ImageOptionsJsImpl { + external String get url; + external dynamic get coordinates; + external factory ImageOptionsJsImpl({ + String? url, + dynamic coordinates, + }); +} diff --git a/lib/src/interop/interop.dart b/lib/src/interop/interop.dart index 59f8cf0..88d431c 100644 --- a/lib/src/interop/interop.dart +++ b/lib/src/interop/interop.dart @@ -1,6 +1,7 @@ library mapboxgl.interop; export 'geo/geojson_interop.dart'; +export 'geo/image_options_interop.dart'; export 'geo/lng_lat_bounds_interop.dart'; export 'geo/lng_lat_interop.dart'; export 'geo/point_interop.dart'; @@ -10,6 +11,7 @@ export 'style/layers/circle_layer_interop.dart'; export 'style/layers/line_layer_interop.dart'; export 'style/layers/symbol_layer_interop.dart'; export 'style/sources/geojson_source_interop.dart'; +export 'style/sources/image_source_interop.dart'; export 'style/sources/vector_source_interop.dart'; export 'style/style_image_interop.dart'; export 'style/style_interop.dart'; diff --git a/lib/src/interop/style/sources/image_source_interop.dart b/lib/src/interop/style/sources/image_source_interop.dart new file mode 100644 index 0000000..94bf09d --- /dev/null +++ b/lib/src/interop/style/sources/image_source_interop.dart @@ -0,0 +1,19 @@ +@JS('mapboxgl') +library mapboxgl.style.interop.sources.image_source; + +import 'package:js/js.dart'; +import 'package:mapbox_gl_dart/src/interop/interop.dart'; + +@JS() +@anonymous +class ImageSourceJsImpl { + external String get url; + external dynamic get coordinates; + external factory ImageSourceJsImpl({ + String? type, + String url, + dynamic coordinates, + }); + + external ImageSourceJsImpl updateImage(ImageOptionsJsImpl imageOptions); +} diff --git a/lib/src/style/sources/image_source.dart b/lib/src/style/sources/image_source.dart new file mode 100644 index 0000000..d06eb79 --- /dev/null +++ b/lib/src/style/sources/image_source.dart @@ -0,0 +1,47 @@ +library mapboxgl.style.sources.image_source; + +import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; +import 'package:mapbox_gl_dart/src/interop/interop.dart'; + +class ImageSource extends Source { + String? get url => jsObject.url; + dynamic get coordinates => jsObject.coordinates; + + factory ImageSource({ + required String url, + dynamic coordinates, + }) { + if (coordinates != null) { + throw Exception('Specify coordinates'); + } + if ((coordinates as List?)?.length != 4) { + throw Exception( + 'Image coordinates must be an array of four longitude latitude pairs'); + } + return ImageSource.fromJsObject(ImageSourceJsImpl( + type: 'image', + url: url, + coordinates: coordinates, + )); + } + + ImageSource.fromJsObject(ImageSourceJsImpl jsObject) + : super.fromJsObject(jsObject); + + ImageSource updateImage(ImageOptions imageOptions) => + ImageSource.fromJsObject(jsObject.updateImage(imageOptions.jsObject)); + + @override + get dict { + Map dict = { + 'type': 'image', + }; + if (url != null) { + dict['url'] = url; + } + if (coordinates != null) { + dict['coordinates'] = coordinates; + } + return dict; + } +} From 9d96df4b2c003c115a49575d133bb2f7184fe265 Mon Sep 17 00:00:00 2001 From: hungtrn75 Date: Mon, 10 Oct 2022 15:42:09 +0700 Subject: [PATCH 2/9] update image source type --- lib/src/ui/map.dart | 3 +++ pubspec.yaml | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/src/ui/map.dart b/lib/src/ui/map.dart index ee9f65b..d6b32b3 100644 --- a/lib/src/ui/map.dart +++ b/lib/src/ui/map.dart @@ -590,6 +590,9 @@ class MapboxMap extends Camera { if (source is VectorSourceJsImpl) { return VectorSource.fromJsObject(source); } + if (source is ImageSourceJsImpl) { + return ImageSource.fromJsObject(source); + } return source; } diff --git a/pubspec.yaml b/pubspec.yaml index 3b9c471..133d229 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,5 +1,5 @@ name: mapbox_gl_dart -version: 0.2.1 +version: 0.2.2 description: Mapbox-gl wrapper for Dart. Library to use Mapbox GL JS in your web Dart projects. homepage: https://github.com/andrea689/mapbox-gl-dart/ environment: From 648df1a5aad3829e1c1dd1751aaaac4c5489b7e5 Mon Sep 17 00:00:00 2001 From: hungtrn75 Date: Mon, 10 Oct 2022 16:30:32 +0700 Subject: [PATCH 3/9] fix: require coords param --- lib/src/style/sources/image_source.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/style/sources/image_source.dart b/lib/src/style/sources/image_source.dart index d06eb79..46b1c88 100644 --- a/lib/src/style/sources/image_source.dart +++ b/lib/src/style/sources/image_source.dart @@ -11,7 +11,7 @@ class ImageSource extends Source { required String url, dynamic coordinates, }) { - if (coordinates != null) { + if (coordinates == null) { throw Exception('Specify coordinates'); } if ((coordinates as List?)?.length != 4) { From 3aa2247c791ccb2736ebcacb81db0b32208004ec Mon Sep 17 00:00:00 2001 From: hungtrn75 Date: Mon, 10 Oct 2022 17:37:47 +0700 Subject: [PATCH 4/9] fix: only return geojson source type when --- lib/src/style/sources/geojson_source.dart | 3 ++- lib/src/style/sources/image_source.dart | 3 ++- lib/src/style/sources/vector_source.dart | 3 ++- lib/src/ui/map.dart | 16 +++++++--------- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/lib/src/style/sources/geojson_source.dart b/lib/src/style/sources/geojson_source.dart index 8725b3b..09060ff 100644 --- a/lib/src/style/sources/geojson_source.dart +++ b/lib/src/style/sources/geojson_source.dart @@ -4,6 +4,7 @@ import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; import 'package:mapbox_gl_dart/src/interop/interop.dart'; class GeoJsonSource extends Source { + static const type = 'geojson'; FeatureCollection get data => FeatureCollection.fromJsObject(jsObject.data); String? get promoteId => jsObject.promoteId; @@ -26,7 +27,7 @@ class GeoJsonSource extends Source { @override get dict => { - 'type': 'geojson', + 'type': type, 'promoteId': promoteId, 'data': data.jsObject, }; diff --git a/lib/src/style/sources/image_source.dart b/lib/src/style/sources/image_source.dart index 46b1c88..6bc8860 100644 --- a/lib/src/style/sources/image_source.dart +++ b/lib/src/style/sources/image_source.dart @@ -4,6 +4,7 @@ import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; import 'package:mapbox_gl_dart/src/interop/interop.dart'; class ImageSource extends Source { + static const type = 'image'; String? get url => jsObject.url; dynamic get coordinates => jsObject.coordinates; @@ -34,7 +35,7 @@ class ImageSource extends Source { @override get dict { Map dict = { - 'type': 'image', + 'type': type, }; if (url != null) { dict['url'] = url; diff --git a/lib/src/style/sources/vector_source.dart b/lib/src/style/sources/vector_source.dart index bf84eec..14f707b 100644 --- a/lib/src/style/sources/vector_source.dart +++ b/lib/src/style/sources/vector_source.dart @@ -4,6 +4,7 @@ import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; import 'package:mapbox_gl_dart/src/interop/interop.dart'; class VectorSource extends Source { + static const type = 'vector'; String? get url => jsObject.url; List? get tiles => jsObject.tiles; @@ -33,7 +34,7 @@ class VectorSource extends Source { @override get dict { Map dict = { - 'type': 'vector', + 'type': type, }; if (url != null) { dict['url'] = url; diff --git a/lib/src/ui/map.dart b/lib/src/ui/map.dart index d6b32b3..a4377d0 100644 --- a/lib/src/ui/map.dart +++ b/lib/src/ui/map.dart @@ -584,16 +584,14 @@ class MapboxMap extends Camera { /// @see [Add live realtime data](https://www.mapbox.com/mapbox-gl-js/example/live-geojson/) dynamic getSource(String id) { var source = jsObject.getSource(id); - if (source is GeoJsonSourceJsImpl) { - return GeoJsonSource.fromJsObject(source); + switch (source.type) { + case ImageSource.type: + return ImageSource.fromJsObject(source); + case VectorSource.type: + return VectorSource.fromJsObject(source); + default: + return GeoJsonSource.fromJsObject(source); } - if (source is VectorSourceJsImpl) { - return VectorSource.fromJsObject(source); - } - if (source is ImageSourceJsImpl) { - return ImageSource.fromJsObject(source); - } - return source; } /// Add an image to the style. This image can be displayed on the map like any other icon in the style's From 81ba1b38e02619fcbe42817d02ad36783f775c6c Mon Sep 17 00:00:00 2001 From: hungtrn75 Date: Tue, 11 Oct 2022 09:31:00 +0700 Subject: [PATCH 5/9] feat: add setCoordinates for image source --- lib/src/interop/style/sources/image_source_interop.dart | 1 + lib/src/style/sources/image_source.dart | 9 ++++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/lib/src/interop/style/sources/image_source_interop.dart b/lib/src/interop/style/sources/image_source_interop.dart index 94bf09d..775550e 100644 --- a/lib/src/interop/style/sources/image_source_interop.dart +++ b/lib/src/interop/style/sources/image_source_interop.dart @@ -16,4 +16,5 @@ class ImageSourceJsImpl { }); external ImageSourceJsImpl updateImage(ImageOptionsJsImpl imageOptions); + external ImageSourceJsImpl setCoordinates(dynamic coordinates); } diff --git a/lib/src/style/sources/image_source.dart b/lib/src/style/sources/image_source.dart index 6bc8860..997a689 100644 --- a/lib/src/style/sources/image_source.dart +++ b/lib/src/style/sources/image_source.dart @@ -26,12 +26,15 @@ class ImageSource extends Source { )); } - ImageSource.fromJsObject(ImageSourceJsImpl jsObject) - : super.fromJsObject(jsObject); - ImageSource updateImage(ImageOptions imageOptions) => ImageSource.fromJsObject(jsObject.updateImage(imageOptions.jsObject)); + ImageSource setCoordinates(dynamic coordinates) => + ImageSource.fromJsObject(jsObject.setCoordinates(coordinates)); + + ImageSource.fromJsObject(ImageSourceJsImpl jsObject) + : super.fromJsObject(jsObject); + @override get dict { Map dict = { From 72fd58dbfa4a8672910c6de830babee32f731fc4 Mon Sep 17 00:00:00 2001 From: hungtrn75 Date: Tue, 11 Oct 2022 09:35:43 +0700 Subject: [PATCH 6/9] fix: check source when it is null --- lib/src/ui/map.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/ui/map.dart b/lib/src/ui/map.dart index a4377d0..402ce2b 100644 --- a/lib/src/ui/map.dart +++ b/lib/src/ui/map.dart @@ -584,7 +584,7 @@ class MapboxMap extends Camera { /// @see [Add live realtime data](https://www.mapbox.com/mapbox-gl-js/example/live-geojson/) dynamic getSource(String id) { var source = jsObject.getSource(id); - switch (source.type) { + switch (source?.type) { case ImageSource.type: return ImageSource.fromJsObject(source); case VectorSource.type: From edaf202649b940c7e21496d76f827247ac6fe658 Mon Sep 17 00:00:00 2001 From: hungtrn75 Date: Tue, 11 Oct 2022 11:57:40 +0700 Subject: [PATCH 7/9] feat: add canvas source --- example/canvas_source/index.dart | 46 +++++++ example/canvas_source/index.html | 116 ++++++++++++++++++ example/examples.json | 4 + lib/mapbox_gl_dart.dart | 1 + lib/src/interop/interop.dart | 1 + .../style/sources/canvas_source_interop.dart | 22 ++++ lib/src/style/sources/canvas_source.dart | 49 ++++++++ lib/src/ui/map.dart | 4 + 8 files changed, 243 insertions(+) create mode 100644 example/canvas_source/index.dart create mode 100644 example/canvas_source/index.html create mode 100644 lib/src/interop/style/sources/canvas_source_interop.dart create mode 100644 lib/src/style/sources/canvas_source.dart diff --git a/example/canvas_source/index.dart b/example/canvas_source/index.dart new file mode 100644 index 0000000..f8d28d8 --- /dev/null +++ b/example/canvas_source/index.dart @@ -0,0 +1,46 @@ +import 'dart:html'; +import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; + +void main() { + Mapbox.accessToken = + 'pk.eyJ1IjoiYW5kcmVhNjg5IiwiYSI6ImNrNGlsYjhyZDBuYXoza213aWphOGNjZmoifQ.maw_5NsXejG1DoOeOi6hlQ'; + + var map = MapboxMap( + MapOptions( + container: 'map', + style: 'mapbox://styles/mapbox/light-v10', + zoom: 5, + minZoom: 4, + center: LngLat(95.8991, 18.0887), + ), + ); + + map.on('load', (_) { + map.addSource( + 'canvas-source', + CanvasSource( + canvas: "canvasID", + coordinates: [ + [91.4461, 21.5006], + [100.3541, 21.5006], + [100.3541, 13.9706], + [91.4461, 13.9706] + ], + animate: true, + )); + + map.addLayer( + {'id': 'canvas-layer', 'type': 'raster', 'source': 'canvas-source'}); + + final playBtn = querySelector('.playBtn') as HtmlElement; + playBtn.onClick.listen((event) { + final source = map.getSource('canvas-source') as CanvasSource?; + source?.play(); + }); + final pauseBtn = querySelector('.pauseBtn') as HtmlElement; + pauseBtn.onClick.listen((event) { + final source = map.getSource('canvas-source') as CanvasSource?; + source?.pause(); + }); + }); +} diff --git a/example/canvas_source/index.html b/example/canvas_source/index.html new file mode 100644 index 0000000..422f85c --- /dev/null +++ b/example/canvas_source/index.html @@ -0,0 +1,116 @@ + + + + Display a canvas source + + + + + + + +
+
+ Canvas not supported +
+

+ Example of the + mapbox-gl-dart +

+
+ + +
+ + + diff --git a/example/examples.json b/example/examples.json index a55d70f..774a54c 100644 --- a/example/examples.json +++ b/example/examples.json @@ -18,5 +18,9 @@ { "title": "Display a popup on hover", "folder": "popup_on_hover" + }, + { + "title": "Display a canvas source", + "folder": "canvas_source" } ] \ No newline at end of file diff --git a/lib/mapbox_gl_dart.dart b/lib/mapbox_gl_dart.dart index 1ea2d1d..5258b2d 100644 --- a/lib/mapbox_gl_dart.dart +++ b/lib/mapbox_gl_dart.dart @@ -14,6 +14,7 @@ export 'src/style/layers/circle_layer.dart'; export 'src/style/layers/layer.dart'; export 'src/style/layers/line_layer.dart'; export 'src/style/layers/symbol_layer.dart'; +export 'src/style/sources/canvas_source.dart'; export 'src/style/sources/geojson_source.dart'; export 'src/style/sources/image_source.dart'; export 'src/style/sources/source.dart'; diff --git a/lib/src/interop/interop.dart b/lib/src/interop/interop.dart index 88d431c..b4188de 100644 --- a/lib/src/interop/interop.dart +++ b/lib/src/interop/interop.dart @@ -10,6 +10,7 @@ export 'style/evaluation_parameters_interop.dart'; export 'style/layers/circle_layer_interop.dart'; export 'style/layers/line_layer_interop.dart'; export 'style/layers/symbol_layer_interop.dart'; +export 'style/sources/canvas_source_interop.dart'; export 'style/sources/geojson_source_interop.dart'; export 'style/sources/image_source_interop.dart'; export 'style/sources/vector_source_interop.dart'; diff --git a/lib/src/interop/style/sources/canvas_source_interop.dart b/lib/src/interop/style/sources/canvas_source_interop.dart new file mode 100644 index 0000000..303e035 --- /dev/null +++ b/lib/src/interop/style/sources/canvas_source_interop.dart @@ -0,0 +1,22 @@ +@JS('mapboxgl') +library mapboxgl.style.interop.sources.canvas_source; + +import 'package:js/js.dart'; + +@JS() +@anonymous +class CanvasSourceJsImpl { + external bool get animate; + external String get canvas; + external dynamic get coordinates; + external factory CanvasSourceJsImpl({ + String? type, + bool? animate = false, + String canvas, + dynamic coordinates, + }); + + external CanvasSourceJsImpl play(); + external CanvasSourceJsImpl pause(); + external CanvasSourceJsImpl setCoordinates(dynamic coordinates); +} diff --git a/lib/src/style/sources/canvas_source.dart b/lib/src/style/sources/canvas_source.dart new file mode 100644 index 0000000..2d4c5d2 --- /dev/null +++ b/lib/src/style/sources/canvas_source.dart @@ -0,0 +1,49 @@ +library mapboxgl.style.sources.canvas_source; + +import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; +import 'package:mapbox_gl_dart/src/interop/interop.dart'; + +class CanvasSource extends Source { + static const type = 'canvas'; + bool get animate => jsObject.animate; + String get canvas => jsObject.canvas; + dynamic get coordinates => jsObject.coordinates; + + factory CanvasSource({ + required String canvas, + bool? animate, + required dynamic coordinates, + }) { + if (coordinates == null) { + throw Exception('Specify coordinates'); + } + if ((coordinates as List?)?.length != 4) { + throw Exception( + 'Coordinates must be an array of four longitude latitude pairs'); + } + return CanvasSource.fromJsObject(CanvasSourceJsImpl( + type: type, + animate: animate, + canvas: canvas, + coordinates: coordinates, + )); + } + + CanvasSource play() => CanvasSource.fromJsObject(jsObject.play()); + + CanvasSource pause() => CanvasSource.fromJsObject(jsObject.pause()); + + CanvasSource setCoordinates(dynamic coordinates) => + CanvasSource.fromJsObject(jsObject.setCoordinates(coordinates)); + + CanvasSource.fromJsObject(CanvasSourceJsImpl jsObject) + : super.fromJsObject(jsObject); + + @override + get dict => { + 'type': type, + 'canvas': canvas, + 'coordinates': coordinates, + 'animate': animate + }; +} diff --git a/lib/src/ui/map.dart b/lib/src/ui/map.dart index 402ce2b..ff48ed2 100644 --- a/lib/src/ui/map.dart +++ b/lib/src/ui/map.dart @@ -584,8 +584,12 @@ class MapboxMap extends Camera { /// @see [Add live realtime data](https://www.mapbox.com/mapbox-gl-js/example/live-geojson/) dynamic getSource(String id) { var source = jsObject.getSource(id); + switch (source?.type) { case ImageSource.type: + if (source?.canvas != null) { + return CanvasSource.fromJsObject(source); + } return ImageSource.fromJsObject(source); case VectorSource.type: return VectorSource.fromJsObject(source); From 60adcd71a9ef1ccb0a516cf1793cadc59e92e0a0 Mon Sep 17 00:00:00 2001 From: hungtrn75 Date: Tue, 11 Oct 2022 12:09:05 +0700 Subject: [PATCH 8/9] canvas source example --- example/canvas_source/index.dart | 20 +++++++++----------- example/canvas_source/index.html | 2 -- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/example/canvas_source/index.dart b/example/canvas_source/index.dart index f8d28d8..093b884 100644 --- a/example/canvas_source/index.dart +++ b/example/canvas_source/index.dart @@ -1,7 +1,7 @@ -import 'dart:html'; import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; void main() { + bool isPlaying = true; Mapbox.accessToken = 'pk.eyJ1IjoiYW5kcmVhNjg5IiwiYSI6ImNrNGlsYjhyZDBuYXoza213aWphOGNjZmoifQ.maw_5NsXejG1DoOeOi6hlQ'; @@ -31,16 +31,14 @@ void main() { map.addLayer( {'id': 'canvas-layer', 'type': 'raster', 'source': 'canvas-source'}); - - final playBtn = querySelector('.playBtn') as HtmlElement; - playBtn.onClick.listen((event) { - final source = map.getSource('canvas-source') as CanvasSource?; - source?.play(); - }); - final pauseBtn = querySelector('.pauseBtn') as HtmlElement; - pauseBtn.onClick.listen((event) { - final source = map.getSource('canvas-source') as CanvasSource?; + }); + map.on('click', (_) { + final source = map.getSource('canvas-source') as CanvasSource?; + if (isPlaying) { source?.pause(); - }); + } else { + source?.play(); + } + isPlaying = !isPlaying; }); } diff --git a/example/canvas_source/index.html b/example/canvas_source/index.html index 422f85c..0040a70 100644 --- a/example/canvas_source/index.html +++ b/example/canvas_source/index.html @@ -45,8 +45,6 @@ >

- - + + + + + + +
+
+
+

+ Example of the + mapbox-gl-dart +

+
+
+ + diff --git a/lib/mapbox_gl_dart.dart b/lib/mapbox_gl_dart.dart index 5258b2d..001460c 100644 --- a/lib/mapbox_gl_dart.dart +++ b/lib/mapbox_gl_dart.dart @@ -19,6 +19,7 @@ export 'src/style/sources/geojson_source.dart'; export 'src/style/sources/image_source.dart'; export 'src/style/sources/source.dart'; export 'src/style/sources/vector_source.dart'; +export 'src/style/sources/video_source.dart'; export 'src/style/style.dart'; export 'src/style/style_image.dart'; export 'src/ui/camera.dart'; diff --git a/lib/src/interop/interop.dart b/lib/src/interop/interop.dart index b4188de..3a15312 100644 --- a/lib/src/interop/interop.dart +++ b/lib/src/interop/interop.dart @@ -13,7 +13,9 @@ export 'style/layers/symbol_layer_interop.dart'; export 'style/sources/canvas_source_interop.dart'; export 'style/sources/geojson_source_interop.dart'; export 'style/sources/image_source_interop.dart'; +export 'style/sources/image_source_interop.dart'; export 'style/sources/vector_source_interop.dart'; +export 'style/sources/video_source_interop.dart'; export 'style/style_image_interop.dart'; export 'style/style_interop.dart'; export 'ui/camera_interop.dart'; diff --git a/lib/src/interop/style/sources/video_source_interop.dart b/lib/src/interop/style/sources/video_source_interop.dart new file mode 100644 index 0000000..43f1f03 --- /dev/null +++ b/lib/src/interop/style/sources/video_source_interop.dart @@ -0,0 +1,20 @@ +@JS('mapboxgl') +library mapboxgl.style.interop.sources.video_source; + +import 'package:js/js.dart'; + +@JS() +@anonymous +class VideoSourceJsImpl { + external List get urls; + external dynamic get coordinates; + external factory VideoSourceJsImpl({ + String? type, + List urls, + dynamic coordinates, + }); + + external VideoSourceJsImpl play(); + external VideoSourceJsImpl pause(); + external VideoSourceJsImpl setCoordinates(dynamic coordinates); +} diff --git a/lib/src/style/sources/geojson_source.dart b/lib/src/style/sources/geojson_source.dart index 09060ff..1273b61 100644 --- a/lib/src/style/sources/geojson_source.dart +++ b/lib/src/style/sources/geojson_source.dart @@ -13,7 +13,7 @@ class GeoJsonSource extends Source { String? promoteId, }) => GeoJsonSource.fromJsObject(GeoJsonSourceJsImpl( - type: 'geojson', + type: type, promoteId: promoteId, data: data.jsObject, )); diff --git a/lib/src/style/sources/image_source.dart b/lib/src/style/sources/image_source.dart index 997a689..b0e1005 100644 --- a/lib/src/style/sources/image_source.dart +++ b/lib/src/style/sources/image_source.dart @@ -20,7 +20,7 @@ class ImageSource extends Source { 'Image coordinates must be an array of four longitude latitude pairs'); } return ImageSource.fromJsObject(ImageSourceJsImpl( - type: 'image', + type: type, url: url, coordinates: coordinates, )); diff --git a/lib/src/style/sources/vector_source.dart b/lib/src/style/sources/vector_source.dart index 14f707b..8523576 100644 --- a/lib/src/style/sources/vector_source.dart +++ b/lib/src/style/sources/vector_source.dart @@ -22,7 +22,7 @@ class VectorSource extends Source { )); } return VectorSource.fromJsObject(VectorSourceJsImpl( - type: 'vector', + type: type, tiles: tiles, )); } diff --git a/lib/src/style/sources/video_source.dart b/lib/src/style/sources/video_source.dart new file mode 100644 index 0000000..7cb2955 --- /dev/null +++ b/lib/src/style/sources/video_source.dart @@ -0,0 +1,48 @@ +library mapboxgl.style.sources.image_source; + +import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; +import 'package:mapbox_gl_dart/src/interop/interop.dart'; + +class VideoSource extends Source { + static const type = 'video'; + List get urls => jsObject.urls; + dynamic get coordinates => jsObject.coordinates; + + factory VideoSource({ + required List urls, + required dynamic coordinates, + }) { + if (coordinates == null) { + throw Exception('Specify coordinates'); + } + if ((coordinates as List?)?.length != 4) { + throw Exception( + 'Video coordinates must be an array of four longitude latitude pairs'); + } + if (urls.isEmpty) { + throw Exception('Specify at least 1 url'); + } + return VideoSource.fromJsObject(VideoSourceJsImpl( + type: type, + urls: urls, + coordinates: coordinates, + )); + } + + VideoSource play() => VideoSource.fromJsObject(jsObject.play()); + + VideoSource pause() => VideoSource.fromJsObject(jsObject.pause()); + + VideoSource setCoordinates(dynamic coordinates) => + VideoSource.fromJsObject(jsObject.setCoordinates(coordinates)); + + VideoSource.fromJsObject(VideoSourceJsImpl jsObject) + : super.fromJsObject(jsObject); + + @override + get dict => { + 'type': type, + 'urls': urls, + 'coordinates': coordinates, + }; +} diff --git a/lib/src/ui/map.dart b/lib/src/ui/map.dart index ff48ed2..5619a57 100644 --- a/lib/src/ui/map.dart +++ b/lib/src/ui/map.dart @@ -584,7 +584,6 @@ class MapboxMap extends Camera { /// @see [Add live realtime data](https://www.mapbox.com/mapbox-gl-js/example/live-geojson/) dynamic getSource(String id) { var source = jsObject.getSource(id); - switch (source?.type) { case ImageSource.type: if (source?.canvas != null) { @@ -593,6 +592,8 @@ class MapboxMap extends Camera { return ImageSource.fromJsObject(source); case VectorSource.type: return VectorSource.fromJsObject(source); + case VideoSource.type: + return VideoSource.fromJsObject(source); default: return GeoJsonSource.fromJsObject(source); }