andrea689 · hungtrn75 · Oct 10, 2022 · Oct 10, 2022 · Oct 10, 2022 · Oct 10, 2022
diff --git a/example/canvas_source/index.dart b/example/canvas_source/index.dart
@@ -0,0 +1,44 @@
+import 'package:mapbox_gl_dart/mapbox_gl_dart.dart';
+
+void main() {
+  bool isPlaying = true;
+  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'});
+  });
+  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
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Display a canvas source</title>
+    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js"></script>
+    <link
+      href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css"
+      rel="stylesheet"
+    />
+    <script defer type="application/javascript" src="index.dart.js"></script>
+    <style type="text/css">
+      body {
+        margin: 20px;
+      }
+
+      #map {
+        height: 450px;
+      }
+
+      div.wrapper {
+        margin: 0 auto;
+        max-width: 800px;
+        text-align: center;
+        font-style: italic;
+      }
+
+      .mapboxgl-popup {
+        max-width: 400px;
+        font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div>
+      <div class="wrapper">
+        <canvas id="canvasID" width="400" height="400"
+          >Canvas not supported</canvas
+        >
+        <div id="map"></div>
+        <p>
+          Example of the
+          <a href="https://github.com/andrea689/mapbox-gl-dart"
+            >mapbox-gl-dart</a
+          >
+        </p>
+      </div>
+    </div>
+  </body>
+  <script>
+    //Animation from https://javascript.tutorials24x7.com/blog/how-to-draw-animated-circles-in-html5-canvas
+    const canvas = document.getElementById("canvasID");
+    const ctx = canvas.getContext("2d");
+    const circles = [];
+    const radius = 20;
+    if (ctx) {
+      canvas.style.display = "none";
+    }
+
+    function Circle(x, y, dx, dy, radius, color) {
+      this.x = x;
+      this.y = y;
+      this.dx = dx;
+      this.dy = dy;
+
+      this.radius = radius;
+
+      this.draw = function () {
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
+        ctx.strokeStyle = color;
+        ctx.stroke();
+      };
+
+      this.update = function () {
+        if (this.x + this.radius > 400 || this.x - this.radius < 0) {
+          this.dx = -this.dx;
+        }
+
+        if (this.y + this.radius > 400 || this.y - this.radius < 0) {
+          this.dy = -this.dy;
+        }
+
+        this.x += this.dx;
+        this.y += this.dy;
+
+        this.draw();
+      };
+    }
+
+    for (let i = 0; i < 5; i++) {
+      const color =
+        "#" + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6);
+      const x = Math.random() * (400 - radius * 2) + radius;
+      const y = Math.random() * (400 - radius * 2) + radius;
+
+      const dx = (Math.random() - 0.5) * 2;
+      const dy = (Math.random() - 0.5) * 2;
+
+      circles.push(new Circle(x, y, dx, dy, radius, color));
+    }
+
+    function animate() {
+      requestAnimationFrame(animate);
+      ctx.clearRect(0, 0, 400, 400);
+
+      for (let r = 0; r < 5; r++) {
+        circles[r].update();
+      }
+    }
+
+    animate();
+  </script>
+</html>
diff --git a/example/examples.json b/example/examples.json
@@ -18,5 +18,13 @@
     {
         "title": "Display a popup on hover",
         "folder": "popup_on_hover"
+    },
+    {
+        "title": "Display a canvas source",
+        "folder": "canvas_source"
+    },
+    {
+        "title": "Display a video source",
+        "folder": "video_source"
     }
 ]
diff --git a/example/video_source/index.dart b/example/video_source/index.dart
@@ -0,0 +1,45 @@
+import 'package:mapbox_gl_dart/mapbox_gl_dart.dart';
+
+void main() {
+  bool isPlaying = true;
+  Mapbox.accessToken =
+      'pk.eyJ1IjoiYW5kcmVhNjg5IiwiYSI6ImNrNGlsYjhyZDBuYXoza213aWphOGNjZmoifQ.maw_5NsXejG1DoOeOi6hlQ';
+
+  var map = MapboxMap(
+    MapOptions(
+      container: 'map',
+      style: 'mapbox://styles/mapbox/light-v10',
+      zoom: 16,
+      minZoom: 14,
+      center: LngLat(-122.514426, 37.562984),
+      bearing: -96,
+    ),
+  );
+
+  map.on('load', (_) {
+    map.addSource(
+        'video',
+        VideoSource(
+          urls: [
+            'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4'
+          ],
+          coordinates: [
+            [-122.51596391201019, 37.56238816766053],
+            [-122.51467645168304, 37.56410183312965],
+            [-122.51309394836426, 37.563391708549425],
+            [-122.51423120498657, 37.56161849366671]
+          ],
+        ));
+
+    map.addLayer({'id': 'video', 'type': 'raster', 'source': 'video'});
+  });
+  map.on('click', (_) {
+    final source = map.getSource('video') as VideoSource?;
+    if (isPlaying) {
+      source?.pause();
+    } else {
+      source?.play();
+    }
+    isPlaying = !isPlaying;
+  });
+}
diff --git a/example/video_source/index.html b/example/video_source/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Display a video source</title>
+    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js"></script>
+    <link
+      href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css"
+      rel="stylesheet"
+    />
+    <script defer type="application/javascript" src="index.dart.js"></script>
+    <style type="text/css">
+      body {
+        margin: 20px;
+      }
+
+      #map {
+        height: 450px;
+      }
+
+      div.wrapper {
+        margin: 0 auto;
+        max-width: 800px;
+        text-align: center;
+        font-style: italic;
+      }
+
+      .mapboxgl-popup {
+        max-width: 400px;
+        font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div>
+      <div class="wrapper">
+        <div id="map"></div>
+        <p>
+          Example of the
+          <a href="https://github.com/andrea689/mapbox-gl-dart"
+            >mapbox-gl-dart</a
+          >
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git 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';
@@ -13,9 +14,12 @@ 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';
 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/geo/image_options.dart 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<ImageOptionsJsImpl> {
+  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
@@ -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
@@ -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';
@@ -9,8 +10,12 @@ 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/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/canvas_source_interop.dart 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/interop/style/sources/image_source_interop.dart b/lib/src/interop/style/sources/image_source_interop.dart
@@ -0,0 +1,20 @@
+@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);
+  external ImageSourceJsImpl setCoordinates(dynamic coordinates);
+}