Marker is aligned diagonally to the expected coordinate

[kopalag]

I'm adding a marker to the map, using version maplibre-gl v5.0.0. The marker is getting added diagonal to the expected coordinate.
I have not added any projection or alignment, it is a basic addition of marker to a map based on https://maplibre.org/maplibre-gl-js/docs/examples/add-a-marker/

Some of my observations:
When i zoom-in the map, the marker comes closer to the expected coordinate but it never actually meets.
When i zoom-out of the map, viceversa happens.

I'm also using MapLibreGlDirections from '@maplibre/maplibre-gl-directions'; to get route for two point.

The starting point of the route, the centre of the map and the coordinate of the marker, they all are same.
I can see the route on the map clearly but the marker is not at the start position.

I'm implementing all this in typescript.

p.s: Using a custom map css class to define height and width of the map div

[zerda-ocm]

Apparently you forgot the link (for example to https://jsbin.com) with a demonstration of the problem.

[kopalag]

I'm sorry but I won't be able to add a link. It is a basic addition of marker on the map. For the problem, I'm setting css as
{
height: 200px;
width: 400px;
}
and the marker is apparing below the map (diagonal to expected coordinate) . let me know, I can provide any other information required

[HarelM]

Please provide a way to reproduce the issue, the provided text is not enough and thus the request for a jsbin example link.

[kopalag]

I believe it could be a css issue. How can we load maplibre-gl css in a react component (typescript) ?

[zerda-ocm]

import 'maplibre-gl/dist/maplibre-gl.css';

[kopalag]

Already tried this. This does not create an error but style is not loaded

[zerda-ocm]

Well, that's what my crystal ball was telling me.

In all seriousness, without you sharing a way to reproduce this issue with us, nobody will be able to be very helpful in this matter.

[kopalag]

hope this helps https://playcode.io/2226762

[zerda-ocm]

It's a good start, but not a working reproduction of the problem.

For instance it looks like you misspelled "style.scss" and you imported "maplibregl-gl.css" instead of "maplibre-gl.css" resulting in build errors. Please review your shared project and make sure it builds without errors.

[kopalag]

I have updated it. The error right now is because there is no valid style url. Just replace it with your style url and it should work

[zerda-ocm]

Well, it doesn't work with https://demotiles.maplibre.org/style.json
So, it would be nice to include a working one.