I need to get lngLat coordinates from Mapbox map container center once the map is loaded and during user interaction with it. Tried to do on the basis of Get coordinates of the mouse pointer example but can't realize how to change e.point JSON coordinates from dynamic mouse cursor XY-coordinates to static XY-coordinates of map viewport center (outerWidht/2 and outerHeight/2).
Mapbox.js and MapboxGL both offer getCenter methods that return a map view's geographic center.
You can use various events such as moveend to update the center dynamically.
Related
I'm trying to find out what is the bounding box of the visible part of google map in flutter's google maps plugin.
Is it possible to get it?
If not is it possible to calculate the bounding box based on zoom level and latitude, longitude of the map center?
That would be GoogleMapController.getVisibleRegion()
Be careful, GoogleMapController.getVisibleRegion() returns a LatLngBounds (a rectangle) and if your map has a tilt then it should not be a rectangle but a trapezoid!
The issue is in the plugin implementation where the returned result is computed only from latLngBounds field whereas it should be computed from farLeft, farRight, nearLeft, nearRight fields.
Reference: https://developers.google.com/maps/documentation/android-sdk/reference/com/google/android/libraries/maps/model/VisibleRegion
So GoogleMapController.getVisibleRegion() is not accurate and can't be used if there's a tilt.
For reference, an issue has been created: https://github.com/flutter/flutter/issues/74888
In Mapbox you can use setCenter with an optional "padding" value which is useful for offsetting the map center if there are things such as overlays on part of the map. However getCenter does not seem to have the same padding option. This becomes an issue when I need to get the map center that matches the visual location of the offset center. Does anyone know of a way to get the center of the map with padding taken into account the same way that setCenter does?
The solution I found was to use Mapbox's unproject method. I first obtained the x/y screen coordinates of the offset map center, converted them to a mapbox Point object, and then used unproject to get that latitude and longitude at that location.
const point = new mapboxgl.Point(screenX, screenY);
const latLng = map.unproject(point);
If marker shape is a drop we need to set it's offset, there is no sense setting anchor point to center for eccentric markers.
I can't find any options to control mapbox static image map marker offset in mapbox API.
enter link description here
The only idea comes to my head is detecting lng/lat with some offset.
For example we can initialize hidden mapbox-gl-js map 100px/100px sized and use project->update pixels offset->unproject to get lng lat back, or somehow else.
You could just pad your marker image with white space so the tip is at the image centre.
I am developing an interactive map in HTML+JavaScript using mapboxgl (0.33.1). When the user clicks a button (which is associated with a particular location in the map), I call easeTo(), which put that location in the center of the map.
window.map.easeTo({
center: item.loc
});
Because my application has some overlapping UI over the bottom half of the map, I actually want to put that location not in the center of the map, but in the center of the top half of the map (25% from the top).
I'd appreciate if somebody could give me a hint how achieve it. My app knows the exact sizes of the window in Pixel (and also the zoom level), but (I assume) I need to convert it into the map-coordinate (from pixel) to add an appropriate offset to the "center" parameter I pass to easyTo() function.
I think I found the answer. I just need to call the project() method -- which was very hard to discover!
Use case - Get the geopoint from Elastic Seach (data source) based on Bounding box of the map.
and then those geopoint render as marker in the map.
Context-
As the map first time load , we get the markers on the map based on the available bounding box.
But as the user start panning/zooming the map , size of the bounding box changes and so the list of markers
It is becasue we retrive markers based on the bounding box of the map.
Problem -
As user starts panning/zooming the map we need the markers just for the area which had changed due to his panning/zooming , not for the entire bounding box
but right now we are getting markers for entire bounding box and hence lot of duplicates markers in the map.
We need markers just for incremental bounding box (increment bounding box means area of the map which is just increased due to panning/zooming of the map)
let know if i am able to explain else we can connect online .
what is Bounding box -
bounding box is nothing but visible area of the map
Please note that I am using Mapbox.js and RestAPI to implement this
To get the effect you want, you will need to ask the map for the current list of markers and compare the coordinates to the new list from your data source, adding the new one to the map. Tedious, but should run pretty fast.