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);
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
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 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.
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!
I programatically create requests to dev.virtualearth.net (Bing static maps).
I know the following values:
Center Point (Latitude & Longitude)
Zoom Level
Map Size (X pixels, Y pixels)
After I recieved the map as a bitmap, how do I determine the Coordinates (Latitude and Longitude) of the upper left corner (basically the very first pixel) and the lower right corner (the very last pixel)?
I just need some suggestions or some pseudo code. Note, that while I know the Center Point, Zoom Level and Map Size, these aren't the same for every request.
Thank you.
You will need to do tile math: https://msdn.microsoft.com/en-us/library/bb259689.aspx
You will need to do the following:
Pass the center point into LatLongToPixelXY method to get the center global pixel value.
Knowing the pixel dimensions of the static image you created, subtract half the width from the x value of the center global pixel value. Do the same with the height and y.
This gives you a new pixel value, pass it into the PixelXYToLatLong to get the coordinate for the top left corner.
That's it :)
I have an old code sample that does this, but retrieves the static image using the old SOAP services rather than the REST services. You can find the blog post here: https://rbrundritt.wordpress.com/2008/10/25/ve-imagery-service-and-custom-icons/ See the LatLongToPixel function code that is half way down the post. That does the above three steps.