Customizable shapes layer.

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [2.0.1]
+
+* Customizable shapes layer.
+
 ## [2.0.0+1]
 
 * Dependencies updated.

example/lib/pages/metro_lines_page.dart

@@ -124,12 +124,9 @@ class MetroLinesPageState extends State<MetroLinesPage> {
  CustomPaint(
  painter: PolylinePainter(transformer),
  ),
- ...stations
- .map(
- (e) =>
- _buildStationMarker(e, Colors.black, transformer),
- )
- .toList(),
+ ...stations.map(
+ (e) => _buildStationMarker(e, Colors.black, transformer),
+ ),
  ],
  ),
  ),

example/lib/pages/shapes_page.dart

@@ -8,6 +8,42 @@ import 'package:flutter/material.dart';
 import 'package:latlng/latlng.dart';
 import 'package:map/map.dart';
 
+final paint = Paint()
+ ..style = PaintingStyle.fill
+ ..strokeWidth = 2;
+
+void _painter(Canvas canvas, Path shape, Object? metadata) {
+ const basecolor = Colors.pink;
+
+ paint.color = basecolor.withOpacity(0.4);
+ paint.style = PaintingStyle.fill;
+ canvas.drawPath(shape, paint);
+
+ paint.color = basecolor;
+ paint.style = PaintingStyle.stroke;
+ canvas.drawPath(shape, paint);
+}
+
+final shape1 = Shape(
+ points: wgs84.getGroundTrack(
+ const LatLngAlt(
+ Angle.degree(40),
+ Angle.degree(90),
+ 900, // 900 km.
+ ),
+ ),
+ painter: _painter,
+);
+
+const shape2 = Shape(
+ points: [
+ LatLng(Angle.degree(10), Angle.degree(10)),
+ LatLng(Angle.degree(20), Angle.degree(10)),
+ LatLng(Angle.degree(15), Angle.degree(15)),
+ ],
+ painter: _painter,
+);
+
 class ShapesPage extends StatefulWidget {
  const ShapesPage({Key? key}) : super(key: key);
 
@@ -155,6 +191,10 @@ class ShapesPageState extends State<ShapesPage> {
  transformer: transformer,
  polylines: polylines,
  ),
+ ShapeLayer(
+ transformer: transformer,
+ shapes: [shape1, shape2],
+ ),
  PositionedDirectional(
  top: 24,
  start: 24,

example/pubspec.yaml

@@ -20,7 +20,7 @@ environment:
 dependencies:
  flutter:
  sdk: flutter
- latlng: any
+ latlng: '>=2.0.2'
  cached_network_image: ^3.2.0
  flutter_localizations:
  sdk: flutter
@@ -31,7 +31,7 @@ dependencies:
 dev_dependencies:
  flutter_test:
  sdk: flutter
- flutter_lints: ^2.0.0
+ flutter_lints: ^3.0.0
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec

lib/map.dart

@@ -29,3 +29,4 @@ part 'src/controller.dart';
 part 'src/polyline.dart';
 part 'src/layers/tile_layer.dart';
 part 'src/layers/polyline_layer.dart';
+part 'src/layers/shape_layer.dart';

lib/src/layers/polyline_layer.dart

@@ -1,5 +1,7 @@
 part of '../../map.dart';
 
+@Deprecated('Please use [ShapeLayer]')
+
 /// Draws a layer of polylines on the [MapLayout].
 class PolylineLayer extends StatelessWidget {
  /// Default constructor,
@@ -26,6 +28,7 @@ class PolylineLayer extends StatelessWidget {
  }
 }
 
+@Deprecated('Please use [ShapeLayer]')
 class _PolylinesCustomPainter extends CustomPainter {
  const _PolylinesCustomPainter({
  required this.transformer,

lib/src/layers/shape_layer.dart

@@ -0,0 +1,91 @@
+part of '../../map.dart';
+
+/// Raster or Vector data for a specific [z, x, y] coordinate.
+///
+/// This class must be a child of [MapLayout].
+class ShapeLayer extends StatefulWidget {
+ /// Main constructor.
+ const ShapeLayer({
+ Key? key,
+ required this.transformer,
+ required this.shapes,
+ }) : super(key: key);
+
+ /// The transformer from parent.
+ final MapTransformer transformer;
+
+ /// Shapes to display on the Map.
+ final List<Shape> shapes;
+
+ @override
+ State<StatefulWidget> createState() => _ShapeLayerState();
+}
+
+/// Represents a polygon.
+class Shape {
+ /// Constructor.
+ const Shape({
+ required this.points,
+ required this.painter,
+ this.metadata,
+ });
+
+ /// Geo coordinates.
+ final List<LatLng> points;
+
+ /// Optional metadata that comes with the shape.
+ final Object? metadata;
+
+ /// Painter.
+ final void Function(Canvas canvas, Path shape, Object? metadata) painter;
+}
+
+class _ShapeLayerState extends State<ShapeLayer> {
+ @override
+ void didChangeDependencies() {
+ final map = context.findAncestorWidgetOfExactType<MapLayout>();
+
+ if (map == null) {
+ throw Exception('TileLayer must be used inside a MapLayout.');
+ }
+
+ super.didChangeDependencies();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return CustomPaint(
+ painter: _ShapePainter(
+ transformer: widget.transformer,
+ shapes: widget.shapes,
+ ),
+ );
+ }
+}
+
+class _ShapePainter extends CustomPainter {
+ const _ShapePainter({
+ required this.transformer,
+ required this.shapes,
+ });
+
+ final MapTransformer transformer;
+ final List<Shape> shapes;
+
+ @override
+ void paint(Canvas canvas, Size size) {
+ for (var shape in shapes) {
+ final points = transformer.toOffsetMany(shape.points).toList();
+
+ Path f = Path();
+ f.addPolygon(points, true);
+
+ shape.painter(canvas, f, shape.metadata);
+ }
+ }
+
+ @override
+ bool shouldRepaint(covariant CustomPainter oldDelegate) {
+ return false;
+ }
+}

pubspec.yaml

@@ -1,6 +1,6 @@
 name: map
 description: Geographical Map widget for flutter supporting different projections including EPSG4326/Mercator/WGS1984.
-version: 2.0.0+1
+version: 2.0.1
 homepage: https://pwa.ir
 repository: https://github.com/xclud/flutter_map
 
@@ -10,7 +10,7 @@ environment:
 dependencies:
  flutter:
  sdk: flutter
- latlng: ^2.0.0
+ latlng: '>=2.0.2'
 
 dev_dependencies:
  flutter_test: