frontend groundwork

frontend/lib/modules/map.dart

@@ -1,9 +1,10 @@
 import 'dart:collection';
 
+import 'package:flutter/material.dart';
 import 'package:anyway/structs/landmark.dart';
 import 'package:anyway/structs/trip.dart';
-import 'package:flutter/material.dart';
 import 'package:google_maps_flutter/google_maps_flutter.dart';
+import 'package:the_widget_marker/the_widget_marker.dart';
 
 class MapWidget extends StatefulWidget {
 
@@ -25,6 +26,7 @@ class _MapWidgetState extends State<MapWidget> {
     zoom: 11.0,
   );
   Set<Marker> markers = <Marker>{};
+  final GlobalKey globalKey = GlobalKey();
   
 
   void _onMapCreated(GoogleMapController controller) async {
@@ -49,28 +51,81 @@ class _MapWidgetState extends State<MapWidget> {
     Trip? trip = await widget.trip;
     LinkedList<Landmark>? landmarks = trip?.landmarks;
     if (landmarks != null){
-      setState(() {
-        for (Landmark landmark in landmarks) {
-          markers.add(Marker(
-            markerId: MarkerId(landmark.name),
-            position: LatLng(landmark.location[0], landmark.location[1]),
-            infoWindow: InfoWindow(title: landmark.name, snippet: landmark.type.name),
-          ));
-        }
-      });
+      for (Landmark landmark in landmarks) {
+        markers.add(Marker(
+          markerId: MarkerId(landmark.name),
+          position: LatLng(landmark.location[0], landmark.location[1]),
+          // infoWindow: InfoWindow(title: landmark.name, snippet: landmark.type.name),
+          icon: await MarkerIcon.widgetToIcon(globalKey),
+        ));
+      }
+      setState(() {});
     }
   }
 
 
   @override
   Widget build(BuildContext context) {
-    return GoogleMap(
-      onMapCreated: _onMapCreated,
-      initialCameraPosition: _cameraPosition,
-      onCameraIdle: _onCameraIdle,
-      // onLongPress: ,
-      markers: markers,
-      cloudMapId: '41c21ac9b81dbfd8',
+    return Stack(
+      children: [
+        MyMarker(globalKey),
+
+        GoogleMap(
+              onMapCreated: _onMapCreated,
+              initialCameraPosition: _cameraPosition,
+              onCameraIdle: _onCameraIdle,
+              // onLongPress: ,
+              markers: markers,
+              cloudMapId: '41c21ac9b81dbfd8',
+            )
+      ]
     );
   }
 }
+
+
+class MyMarker extends StatelessWidget {
+  // declare a global key and get it trough Constructor
+
+  MyMarker(this.globalKeyMyWidget);
+  final GlobalKey globalKeyMyWidget;
+
+  @override
+  Widget build(BuildContext context) {
+    // This returns an outlined circle, with an icon corresponding to the landmark type
+    // As a small dot, the number of the landmark is displayed in the top right
+    return RepaintBoundary(
+      key: globalKeyMyWidget,
+      child: Stack(
+        children: [
+          Container(
+            width: 75,
+            height: 75,
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
+                colors: [Colors.red, Colors.yellow]
+              ),
+              shape: BoxShape.circle,
+              border: Border.all(color: Colors.black, width: 5),
+            ),
+            child: Icon(Icons.location_on, color: Colors.black, size: 50),
+          ),
+          Positioned(
+            top: 0,
+            right: 0,
+            child: Container(
+              padding: EdgeInsets.all(5),
+              decoration: BoxDecoration(
+                color: Theme.of(context).primaryColor,
+                shape: BoxShape.circle,
+              ),
+              child: Text('1', style: TextStyle(color: Colors.white, fontSize: 20)),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}