Overall Implementation
main.dart
Dart
import 'package:flutter/material.dart'; import 'package:mapbox/map.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( title: "Maps", debugShowCheckedModeBanner: false, home: MapScreen(), ); } } |
map.dart
Dart
import 'package:flutter/material.dart'; import 'package:flutter_map/flutter_map.dart'; import 'package:latlong2/latlong.dart'; class MapScreen extends StatefulWidget { const MapScreen({super.key}); @override State<MapScreen> createState() => _MapScreenState(); } class _MapScreenState extends State<MapScreen> { final MapController controller = MapController(); LatLng latLng = const LatLng(48.8584, 2.2945); @override Widget build(BuildContext context) { return FlutterMap( mapController: controller, options: MapOptions( initialCenter: latLng, initialZoom: 18, ), children: [ TileLayer( urlTemplate: "your-mapbox-map-template-url" ), MarkerLayer( markers: [ Marker( point: latLng, width: 60, height: 60, alignment: Alignment.topCenter, child: Icon( Icons.location_pin, color: Colors.red.shade700, size: 60, ), ), ], ), ], ); } } |
Output:
Flutter – How to Integrate Mapbox
Maps have become an aspect of our routines. Whether you’re exploring a city looking for a coffee shop or keeping tabs on delivery maps is incredibly valuable. When it comes to creating apps incorporating maps not only improves the user experience but is also frequently necessary, for applications that rely on location-based services. If you’re developing a travel app, a fitness tracker, ride-sharing service or any other application that needs maps, for navigation and location-based details. Let’s see how we can implement maps in our Flutter application using Mapbox. A sample video is given below to get an idea about what we are going to do in this article.
Contact Us