@ -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 ,
) ,
) ,
) ,
] ,
) ,
) ,