Flutter_map: Latlng to screen position

[Skyost]

Hi,

I have a moving marker that tracks the user position. I want to be able to save the user path, a bit like this :

To do this, I need to know how to convert a given position LatLng to a screen position (x, y) (where _x_ and _y_ are pixels), this will allow me to draw a circle at the given position.

I've already seen #231 but it doesn't seem to fit my needs.

Thanks !

[aytunch]

You can use

CustomPoint<num> screenPosition =
            Epsg3857().latLngToPoint(mapPosition.center, mapPosition.zoom);

This should give you the center x,y for your screen so something like x:250, y:450 according to the device of course.
Can you try it and tell if it worked or not?

[Skyost]

Yes I'm gonna try it asap (but not before sunday because I don't have access to an IDE before).

[c-mendoza]

The proposed solution didn't work for me. It gives completely different values depending on the zoom level, and they do not seem to be related at all to the screen.

[aytunch]

@c-mendoza It should give different values depending on the zoom level. Think of a Marker on the map before and after a zoom. Its place changes(unless it is in the center of the map) It's LatLng does not change but it's place in the screen changes because of the zoom level.

The solution I proposed works for me.

[c-mendoza]

@aytunch thanks for the quick reply. I'm getting wildly different values depending on zoom level, and the values don't seem to correlate at all to screen coordinates:

_onMapTapped(LatLng point) {
    CustomPoint<num> screenPosition = Epsg3857().latLngToPoint(mapController.center, mapController.zoom);
    print('Map Center: ${mapController.center}, zoom: ${mapController.zoom}');
    print('Screen position: $screenPosition');
}

flutter: Map Center: LatLng(latitude:42.874552, longitude:-78.885459), zoom: 15.023030455492945
flutter: Screen position: CustomPoint (2394053.6168428315, 3136045.6988957934)

flutter: Map Center: LatLng(latitude:42.873977, longitude:-78.884953), zoom: 16.3294798810794
flutter: Screen position: CustomPoint (5921292.46594501, 7756493.206048926)

flutter: Map Center: LatLng(latitude:42.873685, longitude:-78.884736), zoom: 17.792225925136517
flutter: Screen position: CustomPoint (16321041.76060866, 21379481.089647323)

When I zoom increases, the latLngToPoint return values increase as well. I don't know if it makes a difference, but I'm using Mapbox as the tile provider.

Any idea what could cause this?

[aytunch]

@c-mendoza @Skyost If you want to find the absolute x,y screen coordinates, you can get the CustomPoint of the LatLng with the function I provided and then subtract it from the topleft(northwest) of the visible map.

So top left of the map screen point will be (0,0) and bottom right will be (mapwidth, mapheight)

CustomPoint<num> northWestPoint = Epsg3857()
          .latLngToPoint(mapPosition.bounds.northWest, mapPosition.zoom);
CustomPoint<num> markerPoint =
              Epsg3857().latLngToPoint(markerLatLng, mapPosition.zoom);
double x = markerPoint.x -
              northWestPoint.x;
double y =
              markerPoint.y - northWestPoint.y;

[johnpryan]

thanks for the detailed answer @aytunch