In Flutter, how to add a marker on openstreetmap by tapping a screen or clicking a button?
1) For adding markers:
List<Marker> markers = [];
Inside Build method:
FlutterMap(
mapController: _mapController,
options: MapOptions(
center: LatLng(41.238250, 69.342939),
zoom: 9.6,
onTap: (latlng) {
setState(() {
markers.add(
Marker(
width: 150.0,
height: 150.0,
point: latlng,
builder: (ctx) => const Icon(
Icons.location_on,
color: Colors.red,
size: 35.0,
),
),
);
});
}),
layers: [
MarkerLayerOptions(
markers: [
for (int i = 0; i < markers.length; i++) markers[i]
],
),
],
),
2) If you want to get directions between two points, you can use this service, it's free. http://project-osrm.org
The link I am using for getting directions between two points.
It takes, API Key and starting point lat-long and ending point lat-long.
Response gives you multiple lat-long points, and if you give these points to polyLine parameter of map, it will draw you a road line between two points
Let me know if you need any clarification on some part of my answer
kokserek
Updated on December 28, 2022Comments
-
kokserek over 1 year
It should be very simple, but I can't seem to find how to do it.
In Flutter / openstreetmap, I need to: (1) put a marker on the map by tapping a map and/or clicking a button; (2) connect two of these markers with a line(s).
Any ideas would be appreciated.
-
SardorbekR about 3 yearsyou want to get road directions between two points or you want a straight line between two points?
-
kokserek about 3 yearsI want a straight line. Finally, I want to let users build an arbitrary polygone and find markers inside.
-
-
SardorbekR about 3 yearsyes, List<Marker> markers = []; I updated answer
-
kokserek about 3 yearsYes, the (1) works! Fantastic! I go ahead. My task is to build a polygon / polyline and let users look at markers inside of it, as I wrote here: stackoverflow.com/questions/66374167/…
-
SardorbekR about 3 years@kokserek I have no idea what to do with it yet/