Skip to content

Commit

Permalink
Improved screen point / LatLng example pages
Browse files Browse the repository at this point in the history 
Moved `NetworkTileProvider` info log to `TileLayer` to only print once
  • Loading branch information
@JaffaKetchup
JaffaKetchup committed Aug 30, 2023
1 parent c54e02e commit c81176b
Show file tree
Hide file tree
Showing 7 changed files with 190 additions and 184 deletions.
9 changes: 5 additions & 4 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import 'package:flutter_map_example/pages/offline_map.dart';
import 'package:flutter_map_example/pages/overlay_image.dart';
import 'package:flutter_map_example/pages/plugin_scalebar.dart';
import 'package:flutter_map_example/pages/plugin_zoombuttons.dart';
import 'package:flutter_map_example/pages/point_to_latlng.dart';
import 'package:flutter_map_example/pages/screen_point_to_latlng.dart';
import 'package:flutter_map_example/pages/polygon.dart';
import 'package:flutter_map_example/pages/polyline.dart';
import 'package:flutter_map_example/pages/reset_tile_layer.dart';
Expand Down Expand Up @@ -75,9 +75,10 @@ class MyApp extends StatelessWidget {
ResetTileLayerPage.route: (context) => const ResetTileLayerPage(),
EPSG4326Page.route: (context) => const EPSG4326Page(),
EPSG3413Page.route: (context) => const EPSG3413Page(),
PointToLatLngPage.route: (context) => const PointToLatLngPage(),
LatLngScreenPointTestPage.route: (context) =>
const LatLngScreenPointTestPage(),
ScreenPointToLatLngPage.route: (context) =>
const ScreenPointToLatLngPage(),
LatLngToScreenPointPage.route: (context) =>
const LatLngToScreenPointPage(),
FallbackUrlNetworkPage.route: (context) =>
const FallbackUrlNetworkPage(),
SecondaryTapPage.route: (context) => const SecondaryTapPage(),
Expand Down
107 changes: 63 additions & 44 deletions example/lib/pages/latlng_to_screen_point.dart
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,94 @@
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_example/widgets/drawer.dart';
import 'package:latlong2/latlong.dart';

class LatLngScreenPointTestPage extends StatefulWidget {
static const String route = '/latlng_screen_point_test_page';
class LatLngToScreenPointPage extends StatefulWidget {
static const String route = '/latlng_to_screen_point';

const LatLngScreenPointTestPage({Key? key}) : super(key: key);
const LatLngToScreenPointPage({Key? key}) : super(key: key);

@override
State createState() {
return _LatLngScreenPointTestPageState();
}
State<LatLngToScreenPointPage> createState() =>
_LatLngToScreenPointPageState();
}

class _LatLngScreenPointTestPageState extends State<LatLngScreenPointTestPage> {
late final MapController _mapController;
class _LatLngToScreenPointPageState extends State<LatLngToScreenPointPage> {
static const double pointSize = 65;

final mapController = MapController();

Point<double> _textPos = const Point(10, 10);
LatLng? tappedCoords;
Point<double>? tappedPoint;

@override
void initState() {
super.initState();
_mapController = MapController();
}

void onMapEvent(MapEvent mapEvent) {
if (mapEvent is! MapEventMove && mapEvent is! MapEventRotate) {
// do not flood console with move and rotate events
debugPrint(mapEvent.toString());
}
SchedulerBinding.instance
.addPostFrameCallback((_) => ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Tap/click to set coordinate')),
));
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('LatLng To Screen Point')),
drawer: buildDrawer(context, LatLngScreenPointTestPage.route),
appBar: AppBar(title: const Text('Lat/Lng 🡒 Screen Point')),
drawer: buildDrawer(context, LatLngToScreenPointPage.route),
body: Stack(
children: [
Padding(
padding: const EdgeInsets.all(8),
child: FlutterMap(
mapController: _mapController,
options: MapOptions(
onMapEvent: onMapEvent,
onTap: (tapPos, latLng) {
final pt1 = _mapController.camera.latLngToScreenPoint(latLng);
_textPos = Point(pt1.x, pt1.y);
setState(() {});
},
initialCenter: const LatLng(51.5, -0.09),
initialZoom: 11,
initialRotation: 0,
FlutterMap(
mapController: mapController,
options: MapOptions(
initialCenter: const LatLng(51.5, -0.09),
initialZoom: 11,
interactionOptions: const InteractionOptions(
flags: ~InteractiveFlag.doubleTapZoom,
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'dev.fleaflet.flutter_map.example',
),
],
onTap: (_, latLng) {
final point = mapController.camera
.latLngToScreenPoint(tappedCoords = latLng);
setState(() => tappedPoint = Point(point.x, point.y));
},
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'dev.fleaflet.flutter_map.example',
),
if (tappedCoords != null)
MarkerLayer(
markers: [
Marker(
width: pointSize,
height: pointSize,
point: tappedCoords!,
builder: (ctx) => const Icon(
Icons.circle,
size: 10,
color: Colors.black,
),
)
],
),
],
),
Positioned(
left: _textPos.x.toDouble(),
top: _textPos.y.toDouble(),
width: 20,
height: 20,
child: const FlutterLogo())
if (tappedPoint != null)
Positioned(
left: tappedPoint!.x - 60 / 2,
top: tappedPoint!.y - 60 / 2,
child: const IgnorePointer(
child: Icon(
Icons.center_focus_strong_outlined,
color: Colors.black,
size: 60,
),
),
)
],
),
);
Expand Down
118 changes: 0 additions & 118 deletions example/lib/pages/point_to_latlng.dart
View file

This file was deleted.

107 changes: 107 additions & 0 deletions example/lib/pages/screen_point_to_latlng.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_example/widgets/drawer.dart';
import 'package:latlong2/latlong.dart';

class ScreenPointToLatLngPage extends StatefulWidget {
static const String route = '/screen_point_to_latlng';

const ScreenPointToLatLngPage({Key? key}) : super(key: key);

@override
PointToLatlngPage createState() {
return PointToLatlngPage();
}
}

class PointToLatlngPage extends State<ScreenPointToLatLngPage> {
static const double pointSize = 65;
static const double pointY = 250;

final mapController = MapController();

LatLng? latLng;

@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) => updatePoint(context));
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Screen Point 🡒 Lat/Lng')),
drawer: buildDrawer(context, ScreenPointToLatLngPage.route),
body: Stack(
children: [
FlutterMap(
mapController: mapController,
options: MapOptions(
onPositionChanged: (_, __) => updatePoint(context),
initialCenter: const LatLng(51.5, -0.09),
initialZoom: 5,
minZoom: 3,
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'dev.fleaflet.flutter_map.example',
),
if (latLng != null)
MarkerLayer(
markers: [
Marker(
width: pointSize,
height: pointSize,
point: latLng!,
builder: (ctx) => const Icon(
Icons.circle,
size: 10,
color: Colors.black,
),
)
],
),
],
),
Positioned(
top: pointY - pointSize / 2,
left: _getPointX(context) - pointSize / 2,
child: const IgnorePointer(
child: Icon(
Icons.center_focus_strong_outlined,
size: pointSize,
color: Colors.black,
),
),
),
Positioned(
top: pointY + pointSize / 2 + 6,
left: 0,
right: 0,
child: IgnorePointer(
child: Text(
'(${latLng?.latitude.toStringAsFixed(3)},${latLng?.longitude.toStringAsFixed(3)})',
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
)
],
),
);
}

void updatePoint(BuildContext context) => setState(() => latLng =
mapController.camera.pointToLatLng(Point(_getPointX(context), pointY)));

double _getPointX(BuildContext context) =>
MediaQuery.sizeOf(context).width / 2;
}
Loading

0 comments on commit c81176b

Please sign in to comment.