# Are lines drawn on most web maps wrong? [closed]

Lets imagine a shortest path (on the surface of earth ellipsoid) between CA, US and Greenland. Also lets add a point on the middle of that path. If we now draw the path as a line on a map using different map engines, the results are not the same. Here are the results of that drawn path and a middle point on Google Earth Engine, Mapbox and Leaflet. Since with only GEE the line intersects the middle point I would assume that the lines drawn with Mapbox and Leaflet are not correct?

Leaflet (https://codepen.io/ristiisa/pen/mdoQLZO):

• It depends on whether you want a geodetic line or a rhumb line. Do read en.wikipedia.org/wiki/Rhumb_line and en.wikipedia.org/wiki/Geodesics_on_an_ellipsoid Commented Feb 13 at 13:20
• @IvanSanchez regardless how the line looks, the point should be on the line Commented Feb 13 at 14:09
• All map are "wrong" as all projections of a sphere on a plane necessarily distort the surface in some way and to some extent (see en.wikipedia.org/wiki/Map_projection) What you show are just different kind of wrong (and different interpretation of what a line on a sphere mean…)
– J.R
Commented Feb 13 at 15:10
• @J.R projection is not wrong, but in this case it is irrelevant as only one example intersects with the point out of the examples given Commented Feb 13 at 16:10
• @J.R I am talking about a shortest path between two points. There is only one shortest path. That path will. have a start, end and a middle. Depending on projection that path will look different. But it will still have a start, end and a middle. All those 3 points will intersect with the drawn line. If you look at how leflet and mapbox have drawn the line then the middle point does not intersect with the drawn line. Commented Feb 13 at 17:51

Just some info to help debug.

In your Mapbox code, you declare centerPoint, but you dont use it. However it does have values hardcoded, which im going to assume is the 'incorrectly' placed midpoint.

``````const centerPoint = [-73.975547, 40.691785];
``````

Then you declare the linestring.

``````const line = turf.lineString([[-115.19056694158435, 36.1943265363222], [-49.674793172420024, 62.02064170269384]]);
``````

``````const midpoint = turf.circle(turf.midpoint(line.geometry.coordinates[0], line.geometry.coordinates[1]).geometry.coordinates, 10, options);
``````

What I did for reference, is I took the values from your lineString, and plugged them into a desktop GIS system and created a line geometry based on WGS84, which is generally the coordinate system used for webGIS systems. Then I calculated a new geometry, which is the midpoint of that line. The following are the x,y values, which are on the line, as you can see in my picture.

``````-82.433
49.107
``````

I know you don't use centrePoint variable, however the values in that are different to the above. So something is different!

Reading the turf midpoint documentation, I found the following:

"The Turf. js midpoint measurement takes two points and returns a point midway between them. The midpoint is calculated geodesically, meaning the curvature of the earth is taken into account. "

In other words, its calculating the midpoint between two points, not the midpoint of the line geometry. This would also explain why my desktop GIS midpoint calculation is on the line.

If you need to show the midpoint of the line, have a look at this thread, where someone else seems to have had the same problem.

Turf.js midpoint of line

• In the questions comment section we came into that the lines drawn are not geodesic but the midpoint calculation is. In my opinion drawing non geodesic lines is not correct behaviour and should not be the default as it does not reflect reality. The only example of the 3 that is correct is the GEE. Commented May 7 at 7:22