ResponsiveFramework

ResponsiveFramework copied to clipboard

I have the same issue.

class MapsBaseWidget extends StatefulWidget {
  const MapsBaseWidget({
    Key? key,
  }) : super(key: key);

  @override
  State<MapsBaseWidget> createState() => _MapsBaseWidgetState();
}

class _MapsBaseWidgetState extends State<MapsBaseWidget> {
  final List<Marker> markers = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FlutterMap(
        options: MapOptions(
            center: LatLng(51.5, 9.05),
            zoom: 13.0,
            onLongPress: (_, LatLng latLng) {
              setState(() {
                markers.add(Marker(
                  width: 80.0,
                  height: 80.0,
                  point: latLng,
                  builder: (ctx) => const Icon(Icons.location_on),
                ));
              });
            }),
        layers: [
          TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c'],
            attributionBuilder: (_) {
              return Text("© OpenStreetMap contributors");
            },
          ),
          MarkerLayerOptions(
            markers: markers,
          ),
        ],
      ),
    );
  }
}

here is an image with tap position and marker on wrong place. Fresh card not rotated or zoomed

Originally posted by @tk2232 in https://github.com/fleaflet/flutter_map/issues/1091#issuecomment-1023520245

@pmg1991 I solved the problem as follows https://github.com/Codelessly/ResponsiveFramework/issues/50#issuecomment-1023641178

@tk2232 After your suggested changes nonrotated child are getting out of screen.

The same here problem is with the buttons above the map not being clickable on release builds only on some phones like Redmi 8A.

https://github.com/Codelessly/ResponsiveFramework/issues/50#issuecomment-1023641178 This solution solves it partially.

Thanks

If you are using responsive_framework and getting wrong marker position with flutter_map

Here is the solution to get accurate position.

FlutterMap Controller has a method pointToLatLng I used that method to convert point where user tapped to latlng.

Here is my solution

Inside onTap method of FlutterMap MapOptions we get LatLng and TapPosition

I used TapPosition object

             var rescalingFactor =
                            (ResponsiveWrapper.of(context).scaledHeight /
                                ResponsiveWrapper.of(context).screenHeight);

Use this rescalingFactor to create accurate LatLng

             var ltlng = mapController.pointToLatLng(CustomPoint(
                            tapPosition.relative!.dx * rescalingFactor,
                            tapPosition.relative!.dy * rescalingFactor));                        

Now this will land your pin at right position.

Instead of rescaling flutter map I have actually repositioned where user has actually tapped and this returns accurate LatLng.

PS: if you use resizing instead of autoScale in your ResposiveFramework Wrapper you won't see any problem with flutter_map tap. But if you are seeing a problem for particular screen width or configuration of ResponsiveFramework, you can just apply my solution.

Instead of rescaling flutter map I have actually repositioned where user has actually tapped and this returns accurate LatLng.

PS: if you use resizing instead of autoScale in your ResposiveFramework Wrapper you won't see any problem with flutter_map tap. But if you are seeing a problem for particular screen width or configuration of ResponsiveFramework, you can just apply my solution.

@rayliverified we may need to reopen this now with 1.1.0.

@tk2232 @pmg1991 were you able to solve this with 1.1.0? We're stuck, because of scaledWidth missing #145.