ibrierley / flutter_map_dragmarker Goto Github PK
View Code? Open in Web Editor NEWA drag marker for flutter_map
License: BSD 3-Clause "New" or "Revised" License
A drag marker for flutter_map
License: BSD 3-Clause "New" or "Revised" License
I couldn't find this plugin on https://pub.dev/packages.
Should I copy the files into my project?
Hi,
I was trying to implement it on my app, but apparently i can't because Anchor and custompoint are missing. Is it because i am on stable ? Is there any way to use it on stable version ? I really don't want to migrate now for a single feature as it's a very big project
Hello,
Thank you for this much needed feature.
I have implemented this in mobile app, but when I try to drag marker, almost all the times it is the map which moves, is there anything I need to make, to make marker easily draggable?
Thanks in advance!
I can change the marker anchorPos and the marker is always anchored in the center. I can see that the offset is handled in the dragmarker.dart, but it makes no difference. Any idea of how to get the anchorPos to be utilized? I am trying to add a rotation element to the draggable marker and I need the origin to be at the bottom center.
Not compatible with flutter_map v4.0.0
Because flutter_map_dragmarker 4.1.2 depends on flutter_map ^3.0.0 and no versions of flutter_map_dragmarker match >4.1.2 <5.0.0, flutter_map_dragmarker ^4.1.2 requires flutter_map ^3.0.0. So, because app depends on both flutter_map ^4.0.0 and flutter_map_dragmarker ^4.1.2, version solving failed.
Not compatible with flutter_map v5.0.0
Because flutter_map_dragmarker 4.1.3 depends on flutter_map >=3.0.0 <5.0.0 and no versions of flutter_map_dragmarker match >4.1.3 <5.0.0, flutter_map_dragmarker ^4.1.3 requires flutter_map >=3.0.0 <5.0.0. So, because app depends on both flutter_map ^5.0.0 and flutter_map_dragmarker ^4.1.3, version solving failed.
Due to the use of latlong2: ^0.8.0. this plugin is incompatible with flutter_map_tappable_polyline: any.
Because every version of flutter_map_dragmarker from git depends on latlong2 0.8.0 and flutter_map_tappable_polyline >=3.1.0 depends on latlong2 ^0.8.1, flutter_map_dragmarker from git is incompatible with flutter_map_tappable_polyline >=3.1.0.
Would it be possible to change the dependency to latlong2 0.8.1?
I'm facing the same issue #25. None of those solution work for me.. absorbPanEventsOnScrollables no longer available. Any update on this issue?
Because flutter_map_dragmarker 4.1.3 depends on latlong2 ^0.8.0 and no versions of flutter_map_dragmarker match >4.1.3 <5.0.0, flutter_map_dragmarker ^4.1.3 requires latlong2 ^0.8.0. So, because app depends on both latlong2 ^0.9.0 and flutter_map_dragmarker ^4.1.3, version solving failed.
I understand this repo is for Markers so may be off topic here but I'm looking for a way to drag Circle Layer objects. I can use Drag Marker to draw circles no problem, but they don't re-size when the map zooms in and out, like a Circle Layer does. Alternatively is there a way to re-size a Drag Marker as the map zooms in and out?
Hello. Is it possible to create a button to center the marker in view of the map?
I manage to send it the coordinates for the center when loading my map but not to interact with it with a floatingActionButton ...
In any case, thank you for this very useful plugin !!
Platform : macOS
Dependencies :
flutter_map: ^3.1.0
flutter_map_dragmarker: ^4.1.2
Flutter Version : Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Dart Version : Dart 2.18.6 • DevTools 2.15.0
Bug
Sometimes when zooming in on a map the drag marker does not respond to drag or touch events. This does not occur every time, but only in certain instances.
Note : In the video below (@ 4 seconds), when trying to drag the marker the map is moved instead. Also the onTap callback is not triggered when this happens.
Reproducing the Bug:
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_map_dragmarker/dragmarker.dart';
import 'package:latlong2/latlong.dart';
void main() {
runApp(const DragMarkerTest());
}
class DragMarkerTest extends StatelessWidget {
const DragMarkerTest({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: FlutterMap(
options: MapOptions(
absorbPanEventsOnScrollables: false,
center: LatLng(45.5231, -122.6765),
zoom: 6.4,
),
children: [
TileLayer(
urlTemplate:
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: const ['a', 'b', 'c']),
DragMarkers(
markers: [
DragMarker(
key: const ValueKey(1),
point: LatLng(45.2131, -122.6765),
width: 80.0,
height: 80.0,
offset: const Offset(0.0, -8.0),
builder: (ctx) => const Icon(Icons.location_on, size: 50),
onDragUpdate: (details, point) {
debugPrint("Dragged position: $point");
},
onTap: (point) {
debugPrint("Marker Tapped");
},
feedbackBuilder: (ctx) =>
const Icon(Icons.edit_location, size: 75),
feedbackOffset: const Offset(0.0, -18.0),
updateMapNearEdge: true,
nearEdgeRatio: 2.0,
nearEdgeSpeed: 1.0,
),
],
),
],
),
),
),
);
}
}
Hello. I'm developing a Flutter web app and have encountered a serious bug when using flutter_map_dragmarker v4.0.2 and flutter_map 3.0.0. When I'm dragging the map sometimes and randomly dragmarkers will disappear from the map. When I drag back to where I was they will re-appear. Don't know why this is happening, the dragmarker that disappears isn't deleted, it is still there, it just disappears from the map. I tried using different icon for the drag marker but the issue persists. This occurs both on a desktop and on a mobile. Here are some screenshots depicting the bug:
Using a Container with BoxDecoration and with text the number of the marker on a mobile phone:
How FlutterMap and drag markers are used in my Scafold:
body: Stack(
children: <Widget>[
FlutterMap(
options: MapOptions(
absorbPanEventsOnScrollables: false,
center: LatLng(XX.XX, YY.YY),
zoom: 8.5,
maxZoom: 17.0,
onTap: (tapPosition, location) => addMarker(location),
),
nonRotatedChildren: [
AttributionWidget.defaultWidget(
source: 'OpenStreetMap contributors',
onSourceTapped: null,
),
],
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'com.antoniskes.tsp_app',
),
DragMarkers(
markers: Data.locations,
)
],
),
),
where locations are stored and the addMarker method:
class Data{
static List<DragMarker> locations = List.empty(growable: true);
static int locationsCount = 0;
}
void _addLocation(LatLng latLng){
String markerText = Data.locationsCount.toString();
TextStyle markerTextStyle = const TextStyle(fontSize: 26, fontWeight: FontWeight.bold, color: Colors.white);
Color markerColor = markerText == '0' ? Colors.red : Colors.blue;
Container markerIcon = Container(
width: 60,
height: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32.0),
color: markerColor,
),
child: Center(
child: Text(
markerText,
style: markerTextStyle,
textAlign: TextAlign.center,
),
),
);
DragMarker dragMarker = DragMarker(
point: latLng,
width: 60,
height: 60,
builder: (context) => markerIcon
);
Data.locations.add(dragMarker);
Data.locationsCount++;
setState(() {});
}
Thanks to the author’s contribution, support for flutter_map's Children Widgets
is added here
FlutterMap(
options: MapOptions(
allowPanningOnScrollingParent: false, /// IMPORTANT for dragging
center: LatLng(45.5231, -122.6765),
zoom: 6.4,
),
children: [
TileLayerWidget(
options: TileLayerOptions(
urlTemplate:
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c'],
maxZoom: 19,
),
),
DragMarkerPluginWidget(
options: DragMarkerPluginOptions(
markers: [
DragMarker(
point: LatLng(45.2131, -122.6765),
width: 80.0,
height: 80.0,
offset: const Offset(0.0, -8.0),
builder: (ctx) {
return const Icon(Icons.location_on, size: 50);
},
onDragStart: (details, point) =>
debugPrint("Start point $point"),
onDragEnd: (details, point) =>
debugPrint("End point $point"),
onDragUpdate: (details, point) {},
onTap: (point) {
debugPrint("on tap");
},
onLongPress: (point) {
debugPrint("on long press");
},
feedbackBuilder: (ctx) {
return const Icon(Icons.edit_location, size: 75);
},
feedbackOffset: const Offset(0.0, -18.0),
updateMapNearEdge: true,
nearEdgeRatio: 2.0,
nearEdgeSpeed: 1.0,
),
DragMarker(
point: LatLng(45.535, -122.675),
width: 80.0,
height: 80.0,
builder: (ctx) {
return const Icon(Icons.location_on, size: 50);
},
onDragEnd: (details, point) {
debugPrint('Finished Drag $details $point');
},
updateMapNearEdge: false,
)
],
),
)
],
),
Not compatible with flutter_map v7.0.0
As far as I can tell, you can't update the position of a marker that already exists. Is this correct?
If so, I'll try to implement it in a good way and make a PR.
Previously I implemented my draggable marker on my own. So I was able to react on the tap to open a popup using the PopupMarker plugin.
Since their update from v3 to v4 the onPanUpdate
is not called anymore (funny enough: all other events still work as onVerticalDragUpdate
).
I tried to implement the onVerticalDragUpdate
and onHorizontalDragUpdate
instead as you did, but it worked not as expected. I only was able to drag the marker in exact horizontal and vertical direction. Reading your code did not make it clear to me how you bypassed this behaviour to enable panning in all directions, unfortunately. (Moreover it seems to me more like a dirty workaround to use these two events instead the plain onPanUpdate
, which worked quite well all the time...)
However, I tried to integrate your plugin directly but I am not sure how to keep the popup functionality because both plugins are different kind of layers...
Do you see a way around this?
I use two layers, MarkerLayer
of flutter_map
and DragMarkers
of flutter_map_dragmarker
, as shown in the code below.
FlutterMap(
...
children: [
...
MarkerLayer(markers: markers),
DragMarkers(markers: dragMarkers,),
...
],
...
)
I have given these arguments, markers
and dragMarkers
, points with the same latitude and longitude, but in the actual display, the two points are displayed misaligned as shown in the figure.
(The blue icon is element of markers
and the purple icon is element of dragMarkers
.)
I thought about adjusting the offset
of dragMarker
to correct the misalignment, but this parameter does not seem to work (i.e., changing the offset
value from (0, 0)
to (10, 10)
, for example, does not change the position of the icon).
Is this a bug in the library? Or is there any way to deal with this?
Now I'm using version ^6.0.0
.
the newest version of FLutter_Map (2.2.0) no longer has the following parameters on MapOptions :
with this being the case, how are we supposed to implement dragmarkers plugin with this version?
Is it possible to change the color of marker after it created? Or even more change the icon?
Bug
Whenever a rebuild is triggered while dragging a DragMarker it returns to its initial position. The example below shows two such dragMarkers. Although the position of Marker1 (black) should change on dragging, rebuilding the widget causes it to always return to its initial position. Maker2 (red) on the other hand is continuously updated on Drag update which allows for it to be moved around, but when it is dragged outside the border of the map it sometimes gets stuck even though its still being dragged.
Expected Output:
A rebuild should not cause any change in the position of a Drag Marker while it is being dragged.
Reproducing the Bug:
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_map_dragmarker/dragmarker.dart';
import 'package:latlong2/latlong.dart';
void main() {
runApp(const DragMarkerTest());
}
class DragMarkerTest extends StatefulWidget {
const DragMarkerTest({Key? key}) : super(key: key);
@override
DragMarkerTestState createState() => DragMarkerTestState();
}
class DragMarkerTestState extends State<DragMarkerTest> {
LatLng _marker1Position = LatLng(44.1461, 9.6400);
LatLng _marker2Position = LatLng(44.1461, 9.6412);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
floatingActionButton: Text(' Marker1 Position : $_marker1Position \n Marker2 Position : $_marker2Position'),
body: FlutterMap(
options: MapOptions(
allowPanningOnScrollingParent: false,
plugins: [
DragMarkerPlugin(),
],
center: _marker1Position,
zoom: 18,
),
layers: [
TileLayerOptions(
urlTemplate:
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c'],
),
DragMarkerPluginOptions(
markers: [
DragMarker(
point: LatLng(44.1461, 9.6400),
width: 80.0,
height: 80.0,
offset: const Offset(0.0, -8.0),
builder: (ctx) =>
const Icon(Icons.location_on, size: 50),
feedbackBuilder: (ctx) =>
const Icon(Icons.edit_location, size: 50),
feedbackOffset: const Offset(0.0, -8.0),
onDragUpdate: (details, point) {
setState(() {
_marker1Position = point;
});
},
),
DragMarker(
point: _marker2Position,
width: 80.0,
height: 80.0,
offset: const Offset(0.0, -8.0),
builder: (ctx) =>
const Icon(Icons.location_on, size: 50, color : Colors.red),
feedbackBuilder: (ctx) =>
const Icon(Icons.edit_location, size: 50, color: Colors.red),
feedbackOffset: const Offset(0.0, -8.0),
onDragUpdate: (details, point) {
setState(() {
_marker2Position = point;
});
},
)
],
),
],
),
),
);
}
}
pub get
Running "flutter pub get" in .....
Because flutter_map_dragmarker 2.0.0 depends on flutter_map ^1.0.0 and no versions of flutter_map_dragmarker match >2.0.0 <3.0.0, flutter_map_dragmarker ^2.0.0 requires flutter_map ^1.0.0.
So, because ..... depends on both flutter_map ^2.0.0 and flutter_map_dragmarker ^2.0.0, version solving failed.
pub get failed (1; So, because ..... depends on both flutter_map ^2.0.0 and flutter_map_dragmarker ^2.0.0, version solving failed.)
Process finished with exit code 1
Flutter Doctor:
[√] Flutter (Channel stable, 3.0.2, on Microsoft Windows [Version 10.0.22000.795], locale en-ZA)
• Flutter version 3.0.2 at C:\src\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision cd41fdd495 (5 weeks ago), 2022-06-08 09:52:13 -0700
• Engine revision f15f824b57
• Dart version 2.17.3
• DevTools version 2.12.2
• No issues found!
pub get:
Because flutter_map_dragmarker 3.1.0 depends on flutter_map ^2.0.0 and no versions of flutter_map_dragmarker match >3.1.0 <4.0.0, flutter_map_dragmarker ^3.1.0 requires flutter_map ^2.0.0.
So, because ......... depends on both flutter_map ^3.0.0 and flutter_map_dragmarker ^3.1.0, version solving failed.
pub get failed (1; So, because ......... depends on both flutter_map ^3.0.0 and flutter_map_dragmarker ^3.1.0, version solving failed.)
Process finished with exit code 1
Flutter Doctor:
C:\src\flutter\bin\flutter.bat doctor --verbose
[√] Flutter (Channel stable, 3.3.1, on Microsoft Windows [Version 10.0.22000.856], locale en-ZA)
• Flutter version 3.3.1 on channel stable at C:\src\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4f9d92fbbd (2 days ago), 2022-09-06 17:54:53 -0700
• Engine revision 3efdf03e73
• Dart version 2.18.0
• DevTools version 2.15.0
• No issues found!
Not compatible with flutter_map v6.0.0
Because flutter_map_dragmarker 5.0.0 depends on flutter_map ^5.0.0 and no versions of flutter_map_dragmarker match >5.0.0 <6.0.0, flutter_map_dragmarker ^5.0.0 requires flutter_map ^5.0.0. So, because app depends on both flutter_map ^6.0.0 and flutter_map_dragmarker ^5.0.0, version solving failed.
This message has been sent to multiple plugin authors, so it is not personalised
As part of fleaflet/flutter_map#992 & fleaflet/flutter_map#927 (reply in thread), I (a documentation author) am contacting plugin authors to ensure the information about this plugin on the new documentation is correct; or alternatively, if this plugin is not yet on the existing list, to check whether you would like to add your plugin to the new documentation.
I would also like you to check you conform to these new rules:
Currently I have copied over the existing plugin descriptions, and you can see these here: https://flutter-map.vercel.app/plugins/list. Please note that this documentation is currently unapproved and should not be used unless otherwise directed, as some information may be incorrect or missing, or might change in the future. There is no ETA at the moment, but things seem to be moving along.
Should you wish for the description to remain the same as current on the page linked above, you do not have to reply, you can close this issue.
If you wish to change any information, please leave this issue open and add your reply as a comment.
flutter_map
maintainers do not take any responsibility for this message, I am the sole author.
On behalf of myself and the flutter_map
community thank you for your excellent plugin :).
Once I know how to include this plugin into my project (#3) I will need it to be sound null safe.
As the project is not very big I could give it a go myself. But beware: I am a dart/flutter noob.
@ibrierley What do you think?
Readme example is out of sync with main function. Took me a while to realize that the Readme is outdated.
Great job otherwise, works for me in the first attempts to integrate it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.