Scaling issue

[RodrigoHamuy]

Do we know why scaling seems to be quite off?

Sandobx: https://codesandbox.io/p/sandbox/gzl9tv

I took the Chaillot data points from https://rodrigohamuy.github.io/react-three-map/?source=true&story=extrude-coordinates--extrude-coordinates#ladle_loc_13

[tentone]

Hello

This is expected from the deformation in the tiles projection

We could implement a strategy to fix deformation maybe by resizing the map based on where we are looking at or similar

[RodrigoHamuy]

@tentone , In the meantime we are using import { pointToTile, tileToBBOX } from "@mapbox/tilebelt"; to set the root node to fix scaling, if it helps for inspiration.

But if there is a nicer solution in the future that would be great.

Hot fix example: https://codesandbox.io/p/sandbox/geo-three-scale-hot-fix-2qnmxw

[tentone]

This would be a good solution for the issue, scaling based on the map point.

I think that we should move this code into a separate util that can be attached to the map instance.

[joaomelorodrigues]

I'm trying very hard to make the map work in my project with the correct scale. In my case i don't want to change the map position, but move the camera to the correct coordinates of the map instead. Is it possible?

Also the scaling and positioning seems very confusing:
setting the map to
map.scale.set(0.01, 0.01, 0.01);

map is too small, so i set the scale to 1000 and its visible

I try UnitsUtils.datumsToSpherical(lat, lng); and set the r3f MapControls to the position and target position but the vector3 values are thousands and it positions the camera very far away from the map.

@tentone can you give a bit more details on how these scaling and positions work?

[shot-codes]

I'm trying very hard to make the map work in my project with the correct scale. In my case i don't want to change the map position, but move the camera to the correct coordinates of the map instead. Is it possible?

Also the scaling and positioning seems very confusing: setting the map to map.scale.set(0.01, 0.01, 0.01);

map is too small, so i set the scale to 1000 and its visible

I try UnitsUtils.datumsToSpherical(lat, lng); and set the r3f MapControls to the position and target position but the vector3 values are thousands and it positions the camera very far away from the map.

@tentone can you give a bit more details on how these scaling and positions work?

I'm struggling with the exact same issue.

[shot-codes]

@cyango This is my workaround

const magicNumber = 40030200;
const mapScale = 50000000;
const magicRatio = magicNumber / mapScale;

streetMap.scale.set(mapScale, mapScale, mapScale);

point = { lat: 50.00, lon: 10.00 }
const spherical = geoThree.UnitsUtils.datumsToSpherical(point.lat, point.lon);
const adjustedPoint = {  x: spherical.x / magicRatio, y: spherical.y / magicRatio }

This won't give you millimeter precision but you can at least get something plotted.