Added MapController.pointToLatLng() to get LatLng of given screen point #1115

HugoHeneault · 2022-01-04T18:38:35Z

I wanted to get LatLng of a given point on screen, but couldn't find an easy way to.

So I've implemented a MapController.pointToLatLng() inspired by @maRci002's answer.

HugoHeneault · 2022-01-04T18:39:31Z

Here's an example of what it does:

JaffaKetchup · 2022-01-04T19:20:27Z

Fantastic! I recently manually coded this using parts from the library, but I couldn't do it easily because I didn't have access to internal variables.
This should make things much easier! Thanks.

ibrierley

I like this, does it pass dartfmt ok ? (not sure what we're using these days, but line 86 indentation map.dart looks like it should be spaced out, but this is very minor)?

HugoHeneault · 2022-01-04T19:53:28Z

I like this, does it pass dartfmt ok ? (not sure what we're using these days, but line 86 indentation map.dart looks like it should be spaced out, but this is very minor)?

Nope sorry, I'll dart format

Is there a way to get it done automatically?

HugoHeneault · 2022-01-12T10:49:47Z

I just pushed a fix that caused calculation to be wrong when user zoomed the map.
Now I have an issue when user rotates the map.

RPReplay_Final1641984191.mov

Has anyone an idea?

HugoHeneault · 2022-01-13T06:54:40Z

I updated my example but still can't figure out what's wrong :(

It looks like LatLng I return doesn't take rotation in consideration. Still investigating, any help would be nice :)

Kapture.2022-01-13.at.07.58.49.mp4

ibrierley · 2022-01-25T21:16:07Z

Are you still having problems with the rotation issue ?

HugoHeneault · 2022-01-26T10:24:54Z

Yes no updates here. Might need some help... We've - for now - disabled rotation on our app when this is active.

ibrierley · 2022-01-26T19:47:06Z

See if this works for you....

@override
  LatLng? pointToLatLng(CustomPoint localPoint) {
    if (_state.originalSize == null) {
      return null;
    }

    final width = _state.originalSize!.x;
    final height = _state.originalSize!.y;

    var localPointCenterDistance =
        CustomPoint((width / 2) - localPoint.x, (height / 2) - localPoint.y);
    var mapCenter =
        _state.options.crs.latLngToPoint(_state.center, _state.zoom);

    var point = mapCenter - localPointCenterDistance;

    if( _state.rotation != 0.0 ) {
      var m = Matrix4.identity()
        ..translate(mapCenter.x.toDouble(), mapCenter.y.toDouble())
        ..rotateZ(-_state.rotationRad)
        ..translate(-mapCenter.x.toDouble(), -mapCenter.y.toDouble());

      var tp = MatrixUtils.transformPoint(
          m, Offset(point.x.toDouble(), point.y.toDouble()));

      return _state.options.crs.pointToLatLng(
          CustomPoint(tp.dx, tp.dy), _state.zoom);
    }

    return _state.options.crs.pointToLatLng(
        point, _state.zoom);
  }

If it does (the icon rotates around its own center, but I think either a nonrotatedwidget or an opposite rotation would probably fix), maybe the rotated matrix stuff could be broken out into a separate method, as there may be uses for it being called elsewhere....

ibrierley · 2022-01-30T16:51:49Z

Just wondering on this one, if pointToLatLng should take the option of using the maps rotation (then it could use the matrix code). As some may want to use this as a separate method sometimes for a straightforward calculation ignoring rotation.

This also needs pull upstream so we can merge whenever, as there have been some changes since.

HugoHeneault · 2022-01-31T08:50:55Z

I'll be on vacation for two weeks, might work back on it around mi-february. Feel free to work on it during this time :)
Thanks @ibrierley

JaffaKetchup · 2022-02-20T13:42:08Z

@HugoHeneault Any news on this? Thanks.

HugoHeneault · 2022-02-21T13:21:30Z

No and I don't have time this days so if you'd like to investigate do not hesitate :)

github-actions · 2022-03-24T02:03:01Z

This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 10 days.

HugoHeneault · 2022-03-25T08:18:49Z

This should still be reviewed and fixed as I'm sure other people will need it...

github-actions · 2022-04-25T02:11:29Z

This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 10 days.

pablojimpas · 2022-05-17T23:57:25Z

@HugoHeneault would you mind re-basing this branch from master when you have time? I'll take a look at it after that.

Ref fleaflet#496, ref fleaflet#607, ref fleaflet#981, ref fleaflet#1010

HugoHeneault · 2022-05-18T05:16:42Z

@HugoHeneault would you mind re-basing this branch from master when you have time? I'll take a look at it after that.

I'm on it :)

JaffaKetchup · 2022-05-19T16:36:15Z

Yeah, I can't do anything directly as it's someone else's fork. I'll try fixing it through suggestions...

lib/src/map/map.dart

JaffaKetchup

Maybe now?

lib/src/map/map.dart

HugoHeneault · 2022-05-19T16:52:39Z

If it's working, I'll apply the suggested fix tomorrow morning with formating, if you haven't figured it out already. Thanks guys for your help (I'm sorry I didn't followed the suggestion as I've moved on another project)

JaffaKetchup · 2022-05-19T16:55:22Z

@HugoHeneault Thanks. All is needed now (I think) is just the addition of a trailing newline. Should just be able to run dart format ., or do it manually. Don't worry about doing other stuff!

HugoHeneault · 2022-05-20T07:32:17Z

I did the reformat and tested. It works! Thanks alot @ibrierley for the solution and @pablojimpas & @JaffaKetchup for the follow-up!

LGTM :)

Co-authored-by: Polo <gitpjp@pm.me> and ibrierley Update lib/src/map/map.dart Update lib/src/map/map.dart Fix trailing lines

JaffaKetchup · 2022-05-20T16:44:40Z

Seems good to me, thanks to:

Will merge now...

JaffaKetchup

LGTM!

Ronjack · 2022-05-25T10:48:16Z

wow, just in time, perfect, thanks!

mohammedX6 · 2022-07-18T15:56:59Z

See if this works for you....

@override
  LatLng? pointToLatLng(CustomPoint localPoint) {
    if (_state.originalSize == null) {
      return null;
    }

    final width = _state.originalSize!.x;
    final height = _state.originalSize!.y;

    var localPointCenterDistance =
        CustomPoint((width / 2) - localPoint.x, (height / 2) - localPoint.y);
    var mapCenter =
        _state.options.crs.latLngToPoint(_state.center, _state.zoom);

    var point = mapCenter - localPointCenterDistance;

    if( _state.rotation != 0.0 ) {
      var m = Matrix4.identity()
        ..translate(mapCenter.x.toDouble(), mapCenter.y.toDouble())
        ..rotateZ(-_state.rotationRad)
        ..translate(-mapCenter.x.toDouble(), -mapCenter.y.toDouble());

      var tp = MatrixUtils.transformPoint(
          m, Offset(point.x.toDouble(), point.y.toDouble()));

      return _state.options.crs.pointToLatLng(
          CustomPoint(tp.dx, tp.dy), _state.zoom);
    }

    return _state.options.crs.pointToLatLng(
        point, _state.zoom);
  }

If it does (the icon rotates around its own center, but I think either a nonrotatedwidget or an opposite rotation would probably fix), maybe the rotated matrix stuff could be broken out into a separate method, as there may be uses for it being called elsewhere....

Hi @ibrierley
I want to take consideration the rotation if I want to convert from LatLng to point, How I can do it ? any hints please.

ibrierley · 2022-07-19T07:07:57Z

Are you all sorted on this now (I noted your other issue is closed), or still having an issue ?

mohammedX6 · 2022-07-19T08:56:37Z

@ibrierley Thanks ,i got it working now.

mohammedX6 · 2022-07-26T20:00:53Z

Are you all sorted on this now (I noted your other issue is closed), or still having an issue ?

Hi, @ibrierley I am sorry to disturb you, I have been trying to achieve this for days. Without luck, I am trying here to convert LatLng Point (I need the point to be a LatLng point so Local/Global position won't work) to a point (Offset) with taking mind map rotation.
Here is what I am trying

@override
  Offset? LatLngToPoint(LatLng localPoint) {
    if (_state.originalSize == null) {
      return null;
    }

    final width = _state.originalSize!.x;
    final height = _state.originalSize!.y;

    var myLocalPoint =
        _state.options.crs.latLngToPoint(localPoint, _state.zoom) -
            _state.getPixelOrigin();

    final localPointCenterDistance = CustomPoint(
        (width / 2) - myLocalPoint.x, (height / 2) - myLocalPoint.y);
    final mapCenter =
        _state.options.crs.latLngToPoint(_state.center, _state.zoom);

    CustomPoint point = mapCenter - localPointCenterDistance;

    if (_state.rotation != 0.0) {
      point = rotatePoint(mapCenter, point);
    }
    point = point - _state.getPixelOrigin();
    return Offset(point.x.toDouble(), point.y.toDouble());
  }

can you help me, please.

ibrierley · 2022-07-26T21:04:28Z

Why do you need the latlng from screen point out of interest, normally there is a simpler way.

mohammedX6 · 2022-07-27T05:12:24Z

@ibrierley Thanks for response, I am using flutter_map_line_editor onDragUpdate callback , using the screenPoint.global This is for touch position not for the actual point position, i want the actual point position because touch position and point position are not the same.
The red circle is touch position, and the blue circle is the point while i am dragging

ibrierley · 2022-07-27T06:45:31Z

Why are your touch and point positions not the same ?

mohammedX6 · 2022-07-27T15:06:02Z

@ibrierley , Because the point the and the touch position will not be same

ibrierley · 2022-07-27T15:21:46Z

From the info provided, I can't really see what you need to have working beyond the original code, so I'm probably missing something.

If you want to provide a minimal example I can run, to highlight your issue, I will take a look and see if I can help.

mohammedX6 · 2022-07-27T15:45:21Z

can we chat on the discord channel to make things easier , I will give in short time an example

mohammedX6 · 2022-07-27T16:09:27Z

@ibrierley Hi , Here is a minimal example https://filebin.net/f3na2ig0nilvp4hp/example.zip

When you start the app make sure you have rotation on the map to see the effect

ibrierley · 2022-07-27T17:08:32Z

You need to create a smaller single example, without any plugins and highlight what is wrong with pointToLatLng with a rotation.

mohammedX6 · 2022-07-27T18:23:50Z

@ibrierley There is no wrong with pointToLatLng, I just want LatLngToPoint with rotation

ibrierley · 2022-07-27T18:40:03Z

Ok, this issue is about pointToLatLng, and the code you quoted is that :D. Probably why the confusion with no example.

Can you open a new issue that is latLngToPoint, not pointToLatLng, so it's clear what you need.

mohammedX6 · 2022-07-27T19:54:13Z

@ibrierley yes sure

ibrierley reviewed Jan 4, 2022

View reviewed changes

HugoHeneault mentioned this pull request Jan 13, 2022

Points on Tap? OwnWeb/flutter_map_tappable_polyline#39

Closed

HugoHeneault force-pushed the feat/point-to-latlng branch from 258ce7a to 772db9c Compare January 13, 2022 06:57

github-actions bot added the Stale label Mar 24, 2022

github-actions bot removed the Stale label Mar 26, 2022

github-actions bot added the Stale label Apr 25, 2022

github-actions bot removed the Stale label May 18, 2022

HugoHeneault added 5 commits May 18, 2022 06:59

Added MapController.pointToLatLng() to get LatLng of given screen point

9a920b5

Ref fleaflet#496, ref fleaflet#607, ref fleaflet#981, ref fleaflet#1010

Better pointToLatLng example

457cb61

dartfmt

258bf2b

Fix zoom breaking pointToLatLng()

d2ddde2

Updated example to help fix the rotation issue

1734ed5

Rebased on latest

0dad777

JaffaKetchup reviewed May 19, 2022

View reviewed changes

lib/src/map/map.dart Show resolved Hide resolved

JaffaKetchup reviewed May 19, 2022

View reviewed changes

lib/src/map/map.dart Outdated Show resolved Hide resolved

HugoHeneault force-pushed the feat/point-to-latlng branch from d682baf to 3e63a08 Compare May 20, 2022 07:30

Fix pointToLatLng with rotation

c228f78

Co-authored-by: Polo <gitpjp@pm.me> and ibrierley Update lib/src/map/map.dart Update lib/src/map/map.dart Fix trailing lines

HugoHeneault force-pushed the feat/point-to-latlng branch from 3e63a08 to c228f78 Compare May 20, 2022 07:34

JaffaKetchup self-requested a review May 20, 2022 16:44

JaffaKetchup approved these changes May 20, 2022

View reviewed changes

JaffaKetchup merged commit 02b4a37 into fleaflet:master May 20, 2022

Zverik mentioned this pull request Jun 18, 2022

[BUG] MapState methods do not support rotation #1283

Closed

Added MapController.pointToLatLng() to get LatLng of given screen point #1115

Added MapController.pointToLatLng() to get LatLng of given screen point #1115

Conversation

HugoHeneault commented Jan 4, 2022

HugoHeneault commented Jan 4, 2022

JaffaKetchup commented Jan 4, 2022

ibrierley left a comment

Choose a reason for hiding this comment

HugoHeneault commented Jan 4, 2022

HugoHeneault commented Jan 12, 2022

HugoHeneault commented Jan 13, 2022 • edited Loading

ibrierley commented Jan 25, 2022

HugoHeneault commented Jan 26, 2022

ibrierley commented Jan 26, 2022 • edited Loading

ibrierley commented Jan 30, 2022

HugoHeneault commented Jan 31, 2022

JaffaKetchup commented Feb 20, 2022 • edited Loading

HugoHeneault commented Feb 21, 2022

github-actions bot commented Mar 24, 2022

HugoHeneault commented Mar 25, 2022

github-actions bot commented Apr 25, 2022

pablojimpas commented May 17, 2022

HugoHeneault commented May 18, 2022

JaffaKetchup commented May 19, 2022

JaffaKetchup left a comment

Choose a reason for hiding this comment

HugoHeneault commented May 19, 2022

JaffaKetchup commented May 19, 2022

HugoHeneault commented May 20, 2022

JaffaKetchup commented May 20, 2022

JaffaKetchup left a comment

Choose a reason for hiding this comment

Ronjack commented May 25, 2022

mohammedX6 commented Jul 18, 2022

ibrierley commented Jul 19, 2022

mohammedX6 commented Jul 19, 2022

mohammedX6 commented Jul 26, 2022 • edited Loading

ibrierley commented Jul 26, 2022

mohammedX6 commented Jul 27, 2022 • edited Loading

ibrierley commented Jul 27, 2022

mohammedX6 commented Jul 27, 2022

ibrierley commented Jul 27, 2022

mohammedX6 commented Jul 27, 2022

mohammedX6 commented Jul 27, 2022 • edited Loading

ibrierley commented Jul 27, 2022

mohammedX6 commented Jul 27, 2022

ibrierley commented Jul 27, 2022

mohammedX6 commented Jul 27, 2022

HugoHeneault commented Jan 13, 2022 •

edited

Loading

ibrierley commented Jan 26, 2022 •

edited

Loading

JaffaKetchup commented Feb 20, 2022 •

edited

Loading

mohammedX6 commented Jul 26, 2022 •

edited

Loading

mohammedX6 commented Jul 27, 2022 •

edited

Loading

mohammedX6 commented Jul 27, 2022 •

edited

Loading