Added MapController.pointToLatLng() to get LatLng of given screen point

Ref fleaflet#496, ref fleaflet#607, ref fleaflet#981, ref fleaflet#1010
HugoHeneault · May 18, 2022 · 9a920b5 · 9a920b5
1 parent f6e2b23
commit 9a920b5
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 0 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_map_example/pages/epsg4326_crs.dart';
 import 'package:flutter_map_example/pages/map_inside_listview.dart';
 import 'package:flutter_map_example/pages/network_tile_provider.dart';
+import 'package:flutter_map_example/pages/point_to_latlng.dart';
 
 import './pages/animated_map_controller.dart';
 import './pages/circle.dart';
@@ -82,6 +83,7 @@ class MyApp extends StatelessWidget {
         ResetTileLayerPage.route: (context) => const ResetTileLayerPage(),
         EPSG4326Page.route: (context) => const EPSG4326Page(),
         MaxBoundsPage.route: (context) => const MaxBoundsPage(),
+        PointToLatLngPage.route: (context) => const PointToLatLngPage(),
       },
     );
   }

diff --git a/example/lib/pages/point_to_latlng.dart b/example/lib/pages/point_to_latlng.dart
@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:latlong2/latlong.dart';
+
+import '../widgets/drawer.dart';
+
+class PointToLatLngPage extends StatefulWidget {
+  static const String route = 'point_to_latlng';
+
+  @override
+  PointToLatlngPage createState() {
+    return PointToLatlngPage();
+  }
+}
+
+class PointToLatlngPage extends State<PointToLatLngPage> {
+  late final MapController mapController;
+  final pointX = 100.0;
+  final pointY = 100.0;
+  final pointSize = 20.0;
+  late final mapEventSubscription;
+
+  @override
+  void initState() {
+    super.initState();
+    mapController = MapController();
+
+    mapEventSubscription = mapController.mapEventStream.listen(onMapEvent);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('PointToLatlng')),
+      drawer: buildDrawer(context, PointToLatLngPage.route),
+      body: Stack(
+        children: [
+          FlutterMap(
+            mapController: mapController,
+            options: MapOptions(
+              center: LatLng(51.5, -0.09),
+              zoom: 5.0,
+              maxZoom: 5.0,
+              minZoom: 3.0,
+            ),
+            layers: [
+              TileLayerOptions(
+                  urlTemplate:
+                      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                  subdomains: ['a', 'b', 'c']),
+            ],
+          ),
+          Positioned(
+              top: pointY,
+              left: pointX,
+              child: Container(
+                  color: Colors.red, width: pointSize, height: pointSize))
+        ],
+      ),
+    );
+  }
+
+  void onMapEvent(MapEvent mapEvent) {
+    if (mapEvent is MapEventMove) {
+      final latLng = mapController.pointToLatLng(CustomPoint(pointX, pointY));
+
+      print('top left of square is hovering $latLng');
+    }
+  }
+}
diff --git a/example/lib/widgets/drawer.dart b/example/lib/widgets/drawer.dart
@@ -3,6 +3,7 @@ import 'package:flutter_map_example/pages/epsg4326_crs.dart';
 import 'package:flutter_map_example/pages/map_inside_listview.dart';
 import 'package:flutter_map_example/pages/marker_rotate.dart';
 import 'package:flutter_map_example/pages/network_tile_provider.dart';
+import 'package:flutter_map_example/pages/point_to_latlng.dart';
 
 import '../pages/animated_map_controller.dart';
 import '../pages/circle.dart';
@@ -250,6 +251,8 @@ Drawer buildDrawer(BuildContext context, String currentRoute) {
         ),
         _buildMenuItem(context, const Text('Map inside listview'),
             MapInsideListViewPage.route, currentRoute),
+        _buildMenuItem(context, const Text('Point to LatLng'),
+            PointToLatLngPage.route, currentRoute),
       ],
     ),
   );

diff --git a/lib/flutter_map.dart b/lib/flutter_map.dart
@@ -148,6 +148,8 @@ abstract class MapController {
   set state(MapState state);
   void dispose();
 
+  LatLng? pointToLatLng(CustomPoint point);
+
   factory MapController() => MapControllerImpl();
 }
 

diff --git a/lib/src/map/map.dart b/lib/src/map/map.dart
@@ -78,6 +78,19 @@ class MapControllerImpl implements MapController {
     return _state.rotate(degree, id: id, source: MapEventSource.mapController);
   }
 
+  @override
+  LatLng? pointToLatLng(CustomPoint localPoint) {
+    final width = _state.size.x;
+    final height = _state.size.y;
+
+    var localPointCenterDistance =
+    CustomPoint((width / 2) - localPoint.x, (height / 2) - localPoint.y);
+    var mapCenter = _state.options.crs.latLngToPoint(_state.center, _state.zoom);
+
+    var point = mapCenter - localPointCenterDistance;
+    return _state.options.crs.pointToLatLng(point, _state.zoom);
+  }
+
   @override
   Stream<MapEvent> get mapEventStream => _mapEventSink.stream;
 }