Skip to content

change anchor API to MarkerAnchor #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
johnpryan wants to merge 1 commit into from
Closed

change anchor API to MarkerAnchor #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 51 additions & 10 deletions flutter_map/lib/src/layer/marker_layer.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<double> 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 {
Expand All @@ -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),
),
);
Expand All @@ -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;
}
}
}
127 changes: 127 additions & 0 deletions flutter_map_example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
},
);
}
Expand Down Expand Up @@ -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);
},
),
],
),
);
Expand Down Expand Up @@ -400,6 +408,125 @@ class MapControllerPageState extends State<MapControllerPage> {
}
}

class MarkerAnchorPage extends StatefulWidget {
static const String route = '/marker_anchors';
@override
MarkerAnchorPageState createState() {
return new MarkerAnchorPageState();
}
}

class MarkerAnchorPageState extends State<MarkerAnchorPage> {
MarkerAnchor markerAnchor;

void initState() {
super.initState();
markerAnchor = MarkerAnchor.center;
}

Widget build(BuildContext context) {
var markers = <Marker>[
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: <Widget>[
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: <Widget>[
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
Expand Down