Merge pull request #1 from apptreesoftware/master

Merge upstream

README.md

@@ -57,12 +57,17 @@ see the `flutter_map_example/` folder for a working example app.
 
 ## Mapbox tiles
 
-The example uses OpenStreetMap tiles. Use TileLayerOptions to configure other
-tile providers:
+You can use map tiles from a number of
+[free and paid map suppliers](http://leafletjs.com/plugins.html#basemap-providers),
+or you can host your own map tiles.
+
+The example uses OpenStreetMap tiles, which are free but can be slow.
+
+Use TileLayerOptions to configure other tile providers, such as [mapbox]:
 
 ```dart
 new TileLayerOptions(
-  urlTemplate: "https://api.tiles.mapbox.com/v4/"
+  urlTemplate: "https://api.mapbox.com/v4/"
       "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
   additionalOptions: {
     'accessToken': '<PUT_ACCESS_TOKEN_HERE>',

flutter_map/CHANGELOG.md

@@ -1,3 +1,12 @@
 ## [0.0.1] - 2/5/2018
 
 - inital release
+
+## [0.0.2] - 2/21/2018
+
+- subdomain support
+- move gesture detection into map widget
+- improved tile layer support
+- improved examples
+- Polyline layers
+- fix marker redraw on map rotation

flutter_map/lib/flutter_map.dart

@@ -10,6 +10,7 @@ import 'package:flutter_map/src/map/map.dart';
 export 'src/layer/layer.dart';
 export 'src/layer/tile_layer.dart';
 export 'src/layer/marker_layer.dart';
+export 'src/layer/polyline_layer.dart';
 export 'src/map/map.dart';
 
 class FlutterMap extends StatefulWidget {
@@ -21,8 +22,7 @@ class FlutterMap extends StatefulWidget {
   }
 }
 
-class _FlutterMapState extends State<FlutterMap>
-    with MapGestureMixin, SingleTickerProviderStateMixin {
+class _FlutterMapState extends MapGestureMixin {
   MapOptions get options => widget.options;
   MapState mapState;
 
@@ -58,6 +58,9 @@ class _FlutterMapState extends State<FlutterMap>
     if (options is MarkerLayerOptions) {
       return new MarkerLayer(options, mapState);
     }
+    if (options is PolylineLayerOptions) {
+      return new PolylineLayer(options, mapState);
+    }
     return null;
   }
 }

flutter_map/lib/src/layer/polyline_layer.dart

@@ -0,0 +1,82 @@
+import 'package:flutter/widgets.dart';
+import 'package:latlong/latlong.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'dart:ui';
+
+class PolylineLayerOptions extends LayerOptions {
+  final List<Polyline> polylines;
+  PolylineLayerOptions({this.polylines = const []});
+}
+
+class Polyline {
+  final List<LatLng> points;
+  final List<Offset> offsets = [];
+  final double strokeWidth;
+  final Color color;
+  Polyline({
+    this.points,
+    this.strokeWidth = 1.0,
+    this.color = const Color(0xFF00FF00),
+  });
+}
+
+class PolylineLayer extends StatelessWidget {
+  final PolylineLayerOptions polylineOpts;
+  final MapState map;
+  PolylineLayer(this.polylineOpts, this.map);
+
+  Widget build(BuildContext context) {
+    return new StreamBuilder<int>(
+      stream: map.onMoved, // a Stream<int> or null
+      builder: (BuildContext context, _) {
+        for (var polylineOpt in polylineOpts.polylines) {
+          polylineOpt.offsets.clear();
+          var i = 0;
+          for (var point in polylineOpt.points) {
+            var pos = map.project(point);
+            pos = pos.multiplyBy(map.getZoomScale(map.zoom, map.zoom)) -
+                map.getPixelOrigin();
+            polylineOpt.offsets.add(new Offset(pos.x, pos.y));
+            if (i > 0 && i < polylineOpt.points.length) {
+              polylineOpt.offsets.add(new Offset(pos.x, pos.y));
+            }
+            i++;
+          }
+        }
+
+        var polylines = <Widget>[];
+        for (var polylineOpt in this.polylineOpts.polylines) {
+          polylines.add(
+            new CustomPaint(
+              painter: new PolylinePainter(polylineOpt),
+            ),
+          );
+        }
+
+        return new Container(
+          child: new Stack(
+            children: polylines,
+          ),
+        );
+      },
+    );
+  }
+}
+
+class PolylinePainter extends CustomPainter {
+  final Polyline polylineOpt;
+  PolylinePainter(this.polylineOpt);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (polylineOpt.offsets.isEmpty) {
+      return;
+    }
+    var paint = new Paint()..color = polylineOpt.color;
+    paint.strokeWidth = polylineOpt.strokeWidth;
+    canvas.drawPoints(PointMode.lines, polylineOpt.offsets, paint);
+  }
+
+  @override
+  bool shouldRepaint(PolylinePainter other) => false;
+}

flutter_map/lib/src/map/map.dart

@@ -52,6 +52,7 @@ class MapState {
   Point get size => _size;
   set size(Point s) {
     _size = s;
+    _pixelOrigin = getNewPixelOrigin(this._lastCenter);
     if (!_initialized) {
       _init();
       _initialized = true;

flutter_map/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_map
 description: A flutter implementation of Leaflet
-version: 0.0.2+2
+version: 0.0.2+4
 authors:
 - John Ryan <[email protected]>
 homepage: https://github.com/apptreesoftware/flutter_map

flutter_map_example/lib/main.dart

@@ -17,6 +17,7 @@ class MyApp extends StatelessWidget {
       routes: <String, WidgetBuilder>{
         TapToAddPage.route: (context) => new TapToAddPage(),
         EsriPage.route: (context) => new EsriPage(),
+        PolylinePage.route: (context) => new PolylinePage(),
       },
     );
   }
@@ -73,10 +74,9 @@ class HomePage extends StatelessWidget {
                 ),
                 layers: [
                   new TileLayerOptions(
-                    urlTemplate:
-                        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                    subdomains: ['a','b','c']
-                  ),
+                      urlTemplate:
+                          "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                      subdomains: ['a', 'b', 'c']),
                   new MarkerLayerOptions(markers: markers)
                 ],
               ),
@@ -186,6 +186,56 @@ class EsriPage extends StatelessWidget {
   }
 }
 
+class PolylinePage extends StatelessWidget {
+  static const String route = "polyline";
+
+  Widget build(BuildContext context) {
+    var points = <LatLng>[
+      new LatLng(51.5, -0.09),
+      new LatLng(53.3498, -6.2603),
+      new LatLng(48.8566, 2.3522),
+    ];
+    return new Scaffold(
+      appBar: new AppBar(title: new Text("Polylines")),
+      drawer: _buildDrawer(context, TapToAddPage.route),
+      body: new Padding(
+        padding: new EdgeInsets.all(8.0),
+        child: new Column(
+          children: [
+            new Padding(
+              padding: new EdgeInsets.only(top: 8.0, bottom: 8.0),
+              child: new Text("Polylines"),
+            ),
+            new Flexible(
+              child: new FlutterMap(
+                options: new MapOptions(
+                  center: new LatLng(51.5, -0.09),
+                  zoom: 5.0,
+                ),
+                layers: [
+                  new TileLayerOptions(
+                      urlTemplate:
+                          "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                      subdomains: ['a', 'b', 'c']),
+                  new PolylineLayerOptions(
+                    polylines: [
+                      new Polyline(
+                          points: points,
+                        strokeWidth: 4.0,
+                        color: Colors.purple
+                      ),
+                    ],
+                  )
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 class AppDrawer extends StatelessWidget {
   Widget build(BuildContext context) {
     return new AppBar(
@@ -225,6 +275,13 @@ Drawer _buildDrawer(BuildContext context, String currentRoute) {
             Navigator.popAndPushNamed(context, EsriPage.route);
           },
         ),
+        new ListTile(
+          title: const Text('Polylines'),
+          selected: currentRoute == EsriPage.route,
+          onTap: () {
+            Navigator.popAndPushNamed(context, PolylinePage.route);
+          },
+        ),
       ],
     ),
   );