How to draw a route on OSM on flutter App
1,568
You may check out the below Flutter Maps widget which has a polyline feature that allows adding routes on top of the map.
https://pub.dev/packages/syncfusion_flutter_maps
Check the below link for more details.
https://help.syncfusion.com/flutter/maps/vector-layers/polyline-layer#adding-polylines
Comments
-
Drogba over 1 year
I have create a component to display OpenStreetMap (OSM) on the view.
Question: How can I draw a static route on the map.
It should look like the following map I captured from GoogleMap.
What I have done so far. I created a view to show map.
import 'package:flutter/material.dart'; import 'package:flutter_map/flutter_map.dart'; import 'package:latlong/latlong.dart'; class TrailMapPage extends StatefulWidget { @override _TrailMapPageState createState() => _TrailMapPageState(); } class _TrailMapPageState extends State<TrailMapPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("TrailMapPage")), body: _map(context), ); } Widget _map(BuildContext context) { return new FlutterMap( options: MapOptions( center: LatLng(22.3193, 114.1694), zoom: 13.0, ), layers: [ new TileLayerOptions( urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", subdomains: ['a', 'b', 'c']), new MarkerLayerOptions( markers: [ new Marker( width: 80.0, height: 80.0, point: new LatLng(51.5, -0.09), builder: (ctx) => new Container( child: new FlutterLogo(), ), ), ], ), ], ); } }