I have a mapbox map, and I want to add a fixed marker. With "fixed" I mean something that is in absolute
so fixed respect of the map div container.
Example:
(0,0) (200,0)
+-------------+
| |
| |
| |
| * |
| |
| |
| |
+-------------+
(0,300) (200, 300)
In that case the marker * is at the center of the map so to place it I can use:
.marker {
position: absolute;
top: 50%;
left: 50%
}
and then use getCenter()
:
const lngLatObj = map.getCenter()
but if I want the marker not in the center but for example at 20% left and 90% top?
(0,0) (200,0)
+-------------+
| |
| |
| |
| |
| |
| |
| * |
+-------------+
(0,300) (200, 300)
Here you can see the map container and the marker *
on that map.
suppose I have the pixel coordinates of *
, how can I find the longitude and latitude of that point?
I imagine something like:
const x = 40
const y = 270
const point = new mapboxgl.Point(x, y)
const lngLat = point.??
I didn't have mouse or touch events. The point is fixed but user can zoom and pan the map.
With marker I mean not a mapbox Marker
but a simple div element.
Thanks very much
here a reproducible example
I fix using geodesy:
const boundsNorth = new LatLon(bounds.getNorth(), bounds.getCenter().lng)
const boundsSouth = new LatLon(bounds.getSouth(), bounds.getCenter().lng)
const boundsEast = new LatLon(bounds.getCenter().lat, bounds.getEast())
const boundsWest = new LatLon(bounds.getCenter().lat, bounds.getWest())
const lat = boundsNorth.intermediatePointTo(boundsSouth, yPercentage).lat
const lng = boundsEast.intermediatePointTo(boundsWest, xPercentage).lng