diff --git a/flutter_map/lib/src/layer/marker_layer.dart b/flutter_map/lib/src/layer/marker_layer.dart index 7b063af34..a987e6ac4 100644 --- a/flutter_map/lib/src/layer/marker_layer.dart +++ b/flutter_map/lib/src/layer/marker_layer.dart @@ -8,19 +8,26 @@ class MarkerLayerOptions extends LayerOptions { MarkerLayerOptions({this.markers = const []}); } +enum MarkerAnchor { + left, + right, + top, + bottom, + center, +} + class Marker { final LatLng point; final WidgetBuilder builder; final double width; final double height; - final List anchor; - Marker({ - this.point, - this.builder, - this.width = 30.0, - this.height = 30.0, - this.anchor = const [15.0, 15.0] - }); + final MarkerAnchor anchor; + Marker( + {this.point, + this.builder, + this.width = 30.0, + this.height = 30.0, + this.anchor = MarkerAnchor.center}); } class MarkerLayer extends StatelessWidget { @@ -42,8 +49,14 @@ class MarkerLayer extends StatelessWidget { new Positioned( width: markerOpt.width, height: markerOpt.height, - left: (pos.x - (markerOpt.width - markerOpt.anchor[0])).toDouble(), - top: (pos.y - (markerOpt.height - markerOpt.anchor[1])).toDouble(), + left: (pos.x - + (markerOpt.width - + _leftOffset(markerOpt.width, markerOpt.anchor))) + .toDouble(), + top: (pos.y - + (markerOpt.height - + _topOffset(markerOpt.height, markerOpt.anchor))) + .toDouble(), child: markerOpt.builder(context), ), ); @@ -56,4 +69,32 @@ class MarkerLayer extends StatelessWidget { }, ); } + + static double _leftOffset(double width, MarkerAnchor anchor) { + switch (anchor) { + case MarkerAnchor.left: + return 0.0; + case MarkerAnchor.right: + return width; + case MarkerAnchor.top: + case MarkerAnchor.bottom: + case MarkerAnchor.center: + default: + return width / 2; + } + } + + static double _topOffset(double height, MarkerAnchor anchor) { + switch (anchor) { + case MarkerAnchor.top: + return 0.0; + case MarkerAnchor.bottom: + return height; + case MarkerAnchor.left: + case MarkerAnchor.right: + case MarkerAnchor.center: + default: + return height / 2; + } + } } diff --git a/flutter_map_example/lib/main.dart b/flutter_map_example/lib/main.dart index 2ed7320fc..e36972cb1 100644 --- a/flutter_map_example/lib/main.dart +++ b/flutter_map_example/lib/main.dart @@ -19,6 +19,7 @@ class MyApp extends StatelessWidget { EsriPage.route: (context) => new EsriPage(), PolylinePage.route: (context) => new PolylinePage(), MapControllerPage.route: (context) => new MapControllerPage(), + MarkerAnchorPage.route: (context) => new MarkerAnchorPage(), }, ); } @@ -289,6 +290,13 @@ Drawer _buildDrawer(BuildContext context, String currentRoute) { Navigator.popAndPushNamed(context, MapControllerPage.route); }, ), + new ListTile( + title: const Text('Marker Anchors'), + selected: currentRoute == MarkerAnchorPage.route, + onTap: () { + Navigator.popAndPushNamed(context, MarkerAnchorPage.route); + }, + ), ], ), ); @@ -400,6 +408,125 @@ class MapControllerPageState extends State { } } +class MarkerAnchorPage extends StatefulWidget { + static const String route = '/marker_anchors'; + @override + MarkerAnchorPageState createState() { + return new MarkerAnchorPageState(); + } +} + +class MarkerAnchorPageState extends State { + MarkerAnchor markerAnchor; + + void initState() { + super.initState(); + markerAnchor = MarkerAnchor.center; + } + + Widget build(BuildContext context) { + var markers = [ + new Marker( + width: 80.0, + height: 80.0, + point: new LatLng(51.5, -0.09), + builder: (ctx) => new Container( + child: new FlutterLogo(), + ), + anchor: markerAnchor), + new Marker( + width: 80.0, + height: 80.0, + point: new LatLng(53.3498, -6.2603), + builder: (ctx) => new Container( + child: new FlutterLogo( + colors: Colors.green, + ), + ), + anchor: MarkerAnchor.center), + new Marker( + width: 80.0, + height: 80.0, + point: new LatLng(48.8566, 2.3522), + builder: (ctx) => new Container( + child: new FlutterLogo(colors: Colors.purple), + ), + anchor: markerAnchor), + ]; + + return new Scaffold( + appBar: new AppBar(title: new Text("Marker Anchor Points")), + drawer: _buildDrawer(context, MarkerAnchorPage.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( + "Markers can be anchored to the top, bottom, left or right."), + ), + new Padding( + padding: new EdgeInsets.only(top: 8.0, bottom: 8.0), + child: new Row( + children: [ + new MaterialButton( + child: new Text("Left"), + onPressed: () => + setState(() => markerAnchor = MarkerAnchor.left), + ), + new MaterialButton( + child: new Text("Right"), + onPressed: () => + setState(() => markerAnchor = MarkerAnchor.right), + ), + new MaterialButton( + child: new Text("Top"), + onPressed: () => + setState(() => markerAnchor = MarkerAnchor.top), + ), + new MaterialButton( + child: new Text("Bottom"), + onPressed: () => + setState(() => markerAnchor = MarkerAnchor.bottom), + ), + ], + ), + ), + new Padding( + padding: new EdgeInsets.only(top: 8.0, bottom: 8.0), + child: new Row( + children: [ + new MaterialButton( + child: new Text("Center"), + onPressed: () => setState( + () => markerAnchor = MarkerAnchor.center), + ), + ], + ), + ), + 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 MarkerLayerOptions(markers: markers) + ], + ), + ), + ], + ), + ), + ); + } +} + // Generated using Material Design Palette/Theme Generator // http://mcg.mbitson.com/ // https://github.com/mbitson/mcg