fix: Properly position the pointer in the map bubble and add attribution

Prior the pointer in the map bubble wasn't offsetted upwards, so the center
of the icon marked the point, rather than the point of the icon as one would
expect.
Additionally, attribution to the OpenStreetMap project has been added.
This commit is contained in:
Sorunome 2021-11-29 16:04:23 +01:00
parent 3105bfe6b7
commit 123a9b000c
No known key found for this signature in database
GPG Key ID: B19471D07FC9BE9C

View File

@ -28,28 +28,56 @@ class MapBubble extends StatelessWidget {
constraints: BoxConstraints.loose(Size(width, height)),
child: AspectRatio(
aspectRatio: width / height,
child: FlutterMap(
options: MapOptions(
center: LatLng(latitude, longitude),
zoom: zoom,
),
layers: [
TileLayerOptions(
urlTemplate:
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c'],
),
MarkerLayerOptions(
markers: [
Marker(
point: LatLng(latitude, longitude),
builder: (context) => const Icon(
Icons.location_pin,
color: Colors.red,
),
child: Stack(
children: <Widget>[
FlutterMap(
options: MapOptions(
center: LatLng(latitude, longitude),
zoom: zoom,
),
layers: [
TileLayerOptions(
urlTemplate:
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c'],
),
MarkerLayerOptions(
rotate: true,
markers: [
Marker(
point: LatLng(latitude, longitude),
width: 30,
height: 30,
builder: (_) => Transform.translate(
// No idea why the offset has to be like this, instead of -15
// It has been determined by trying out, though, that this yields
// the tip of the location pin to be static when zooming.
// Might have to do with psychological perception of where the tip exactly is
offset: const Offset(0, -12.5),
child: const Icon(
Icons.location_pin,
color: Colors.red,
size: 30,
),
),
),
],
),
],
),
Container(
alignment: Alignment.bottomRight,
child: Text(
' © OpenStreetMap contributors ',
style: TextStyle(
color: Theme.of(context).brightness == Brightness.dark
? Colors.white
: Colors.black,
backgroundColor:
Theme.of(context).appBarTheme.backgroundColor,
),
),
),
],
),
),