Start to implement functions: adding point, polyline and polygon to map

2025-10-11 09:26:59 +02:00
parent e986cccdd6
commit e8a6e4464a
7 changed files with 295 additions and 4 deletions
@@ -1,4 +1,8 @@
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
+import 'package:flutter_map_polygon_editor/polygon_editor.dart';
 import 'package:get/get.dart';
+import 'package:latlong2/latlong.dart';
 import 'package:terepi_seged/pages/field_trip/presentations/controllers/field_trip_controller.dart';
 import 'package:flutter/material.dart';

@@ -7,6 +11,103 @@ class FieldTripView extends GetView<FieldTripController> {

  @override
  Widget build(BuildContext context) {
-    return Container();
+    return Scaffold(
+      resizeToAvoidBottomInset: false,
+      extendBody: true,
+      appBar: AppBar(
+          title: const Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text('Terepbejárás'),
+        ],
+      )),
+      body: Column(
+        children: [
+          Expanded(
+              child: Stack(children: [
+            Obx(() => controller.mapIsInitialized.value
+                ? FlutterMap(
+                    mapController: controller.mapController,
+                    options: controller.mapOptions,
+                    children: [
+                      TileLayer(
+                        urlTemplate:
+                            'http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
+                        subdomains: const ['mt0', 'mt1', 'mt2', 'mt3'],
+                        maxNativeZoom: 18,
+                      ),
+                      CurrentLocationLayer(
+                        alignPositionOnUpdate: AlignOnUpdate.once,
+                      ),
+                      MarkerLayer(markers: controller.pointNotes),
+                      PolylineLayer(
+                        polylines: controller.polylineNotes,
+                      ),
+                      PolygonLayer(
+                        polygons: controller.polygonNotes,
+                        useAltRendering: true,
+                      ),
+                      // PolylineLayer(polylines: [
+                      //   Polyline(
+                      //     points: [
+                      //       const LatLng(47.65, 19.00),
+                      //       const LatLng(47.64, 19.02),
+                      //       const LatLng(47.69, 19.22),
+                      //     ],
+                      //     strokeWidth: 8,
+                      //     color: const Color(0xFF60399E),
+                      //     hitValue: (
+                      //       title: 'Purple Line',
+                      //       subtitle: 'Nothing really special here...',
+                      //     ),
+                      //   ),
+                      // ]),
+                      PolygonEditor(
+                          controller: controller.polygonEditorController,
+                          throttleDuration: Duration.zero)
+                    ],
+                  )
+                : const Center(child: CircularProgressIndicator())),
+            Positioned(
+                bottom: 3,
+                right: 3,
+                child: Row(
+                  children: [
+                    IconButton.filled(
+                        iconSize: 32,
+                        onPressed: () {
+                          controller.startPointEdition();
+                        },
+                        icon: const Icon(Icons.flag)),
+                    IconButton.filled(
+                        iconSize: 32,
+                        onPressed: () {
+                          controller.startPolylineEdition();
+                        },
+                        icon: const Icon(Icons.polyline)),
+                    IconButton.filled(
+                        iconSize: 32,
+                        onPressed: () {
+                          controller.startPolygonEdition();
+                        },
+                        icon: const Icon(Icons.border_outer)),
+                    IconButton.filled(
+                        iconSize: 32,
+                        onPressed: () {
+                          controller.saveNote();
+                        },
+                        icon: const Icon(Icons.done)),
+                    IconButton.filled(
+                        iconSize: 32,
+                        onPressed: () {
+                          controller.cancelEditorController();
+                        },
+                        icon: const Icon(Icons.cancel))
+                  ],
+                ))
+          ]))
+        ],
+      ),
+    );
  }
 }