Mapbox - console.warning = "The sun direction is attached to a light with viewport anchor, lighting may behave unexpectedly" - mapbox-gl-js

the mapbox docs talk about setting the light anchor to 'map', but where exactly do you do this? Mapbox Docs setLight()


To set the light anchor to map at run time, you would do:
map.setLight({ anchor: 'map' });

Related

Mapbox markers and the centre of the map v marker

See attached image, I have a Mapbox map and a marker that is "centred in the map", what I want is the marker's point to be at the centre (where the red arrow is) and not the middle of the marker.
the marker is Mapbox, setting the lng lat is Mapbox, getting the centre of the map is Mapbox, does anyone know if Mapbox construct the marker in such a way where the end point is the middle?
if not, is there a way to adjust ?
thanks
Martin

for anyone else needing this information
1)
mapbox allows the markers centre to be set when you add the marker, so you can say the centre is top, bottom, centre etc etc
2)
out of the box the mapbox markers are centred in the correct place using "centre". proved this by debugging the GPS from mapbox and comparing to google maps lng,lat and then using every setting to see which one was exactly the same mapping

Im trying to add a pushpin to an Azure map using SymbolLayer. But on zooming in and out my pushpins are moving instead of the map. How can I fix this?

I'm trying to migrate my app from Bing maps to Azure maps.
I'm adding a few custom pushpins on my map using the SymbolLayer.
When I try to zoom in or out though, my pushpins are getting displaced while my map stays static. What might be the issue?

I suspect the issue is that your anchor point of your icon does not align with the point on the icon image you want. You can adjust this in a couple of ways.
Use the icon options anchor setting. Good for most standard icon images.
Use the icon options offset setting. Good for fine tuning.
For example, if the point on your image that you want to "anchor" to the coordinates on the map is the bottom left corner of the image, you could do the following:
var layer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
anchor: 'bottom-left'
}
});
Here is a sample to experiment with: https://azuremapscodesamples.azurewebsites.net/?sample=Symbol%20Layer%20Options
Here are the docs on the icon options for a symbol layer: https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.iconoptions?view=azure-maps-typescript-latest

Mapbox programmatically add polygon with different heights

We are trying to create a polygon programmatically in typescript using mapbox gl. But starting height and ending height of the polygon will be different to create a slope. Please let me know is there any way to achieve this requirement.

Mapbox GL JS does not support 3D shapes with sloping surfaces. You could use something like three.js (via ThreeBox) to achieve it.

Drawing Rectangle on Mapbox gl

Any Idea about Drawing Rectangle on Mapbox GL like we draw Polygon in This Demo

This is currently not supported in mapbox-gl-draw, but according to this github issue it's in the works.

Cytoscape.js with leaflet

I want to use leaflet as Map library and use Cytoscape.js to display nodes as overlay. Also node locations are updated with zoom in and zoom out. What are the challenges on the way. Any suggestions?
I have list can anyone support :
Use canvas element as overlay on leaflet.
how to translate geo location to canvas location
relocating nodes on zoom in and zoom out.

What are the challenges on the way?
A lot. You'll have to be more specific when asking.
Use canvas element as overlay on leaflet.
See the documentation for L.Canvas (and its source code if you want to implement something similar).
how to translate geo location to canvas location relocating nodes on zoom in and zoom out.
See the L.Map.LatLngToContainerPoint() method. Zoom animations are handled via CSS and screen coordinates of map layers are not recalculated during zoom animation frames.