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.
Related
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);
I use GeoServer to provide Vector Tiles (based on the GeoServer Vector Tile Extension) of my biking trails as .pbf.
The data are added as vector source and visualized using Mapbox GL JS.
Additionally, I use the GeoServer perpendicularOffset to offset the lines (as I always have two directions of the biking trail).
A problem occurs when visualizing the data within Mapbox. The lines are cut at the tile edges, although they are visualized correctly using the layer preview on GeoServer.
The further I zoom in the map, the less the clipping of the lines happens and at a very detailed zoom, the lines are drawn correctly.
I already tried to use a large enough buffer and modify the tile size, as these were suggestions when researching the problem. Unfortunately, these settings had no effect.
I have another vector source layer for the base map, there I have no problems.
It seems to me, that offsetting the lines might be a problem.
Any idea what I can try?
the tile size of Geoserver's tile grid is 256x256 , but mapbox need 512x512, add a custom tile grid, set the tile size to 512x512, generate your vector tile with the custom tile grid should be ok.
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 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.
Is it possible to determine the pixel co-ordinates of a given marker, taking into account current zoom level and visible area of the map?
Current (v3):
map.getProjection().fromLatLngToPoint(marker.position);
https://developers.google.com/maps/documentation/javascript/3.exp/reference#Projection
Old (v2):
The method fromLatLngToContainerPixel following should give you what you're after, assuming markerPoint is your marker, and zoomLevel your current zoom:
map.fromLatLngToContainerPixel(markerPoint.getLatLng(), zoomLevel);