How to show current location in Flutter SfMaps?
In Flutter SfMaps, you can add a marker in the current location easily.
Step 1: Add location and syncfusion_flutter_maps packages to your dependencies in pubspec.yaml file.
Step 2: Import the below libraries in your dart file.
import 'package:location/location.dart'; import 'package:syncfusion_flutter_maps/maps.dart';
Step 3: Using the public APIs in
the Flutter location package, we can get the current location.
Check more details about this package and the permission to be enabled
to access the location data in this link.
Future<LocationData?> _currentLocation() async { bool serviceEnabled; PermissionStatus permissionGranted; Location location = new Location(); serviceEnabled = await location.serviceEnabled(); if (!serviceEnabled) { serviceEnabled = await location.requestService(); if (!serviceEnabled) { return null; } } permissionGranted = await location.hasPermission(); if (permissionGranted == PermissionStatus.denied) { permissionGranted = await location.requestPermission(); if (permissionGranted != PermissionStatus.granted) { return null; } } return await location.getLocation(); }
@override Widget build(BuildContext context) { return FutureBuilder<LocationData?>( future: _currentLocation(), builder: (BuildContext context, AsyncSnapshot<dynamic> snapchat) { if (snapchat.hasData) { final LocationData currentLocation = snapchat.data; return SfMaps( layers: [ MapTileLayer( initialFocalLatLng: MapLatLng( currentLocation.latitude!, currentLocation.longitude!), initialZoomLevel: 5, initialMarkersCount: 1, urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', markerBuilder: (BuildContext context, int index) { return MapMarker( latitude: currentLocation.latitude!, longitude: currentLocation.longitude!, child: Icon( Icons.location_on, color: Colors.red[800], ), size: Size(20, 20), ); }, ), ], ); } return Center(child: CircularProgressIndicator()); }, ); }
Screenshot:
https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples
https://apps.apple.com/us/app/syncfusion-flutter-ui-widgets/id1475231341
Check the below links for more features in Syncfusion® Flutter Maps.
Live samples,
Step 4: Set the initialMarkersCount as 1 and the latitude
and longitude of the MapMarker
as the latitude and longitude of the current location.
The MapMarker will be returned from the markerBuilder.
Conclusion
I hope you enjoyed learning about how to show current location in Flutter SfMaps.
You can refer to our Flutter SfMaps feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback. We are always happy to assist you!