Menu
I'm using Mapbox GL to show a map and crop a fixed size image from the center of it. It works great for a particular resolution I designed it (1920x1080) but when I started to make the page responsive where the map styles width and height changes, the canvas size also started to change!
So, when I crop the image the size should be always different because 300px on a 900px canvas it's not the same map area as 300px on a 2000px canvas. The canvas size even changes drastically if I change the device type from Desktop to Mobile in Chrome.
Is there any way to make the canvas DOM size fixed while scaling the entire map with CSS attributes as it's done on a normal canvas? I tried doing trackResize: false and the canvas DOM size stays fixed but the map is not scaled to fit the container neither.
518
When you are viewing a Mapbox map, the bearing rotates the map around its center the specified number of degrees. The bearing of your map view can be adjusted in many Mapbox products, including Mapbox Studio, Mapbox GL JS, the Mapbox Maps SDKs for Android and iOS, and the Static Images API.
Mapbox Studio is supported in browsers that support WebGL, a method of generating dynamic 3D graphics using JavaScript, accelerated through hardware.
Is Mapbox GL JS open source? The previous version, Mapbox GL JS v1, is indeed a free and open-source, BSD3 licensed software. Anyone can contribute to it, or start their own derived work based on it, for free. As of February 2021, the v1 source code is still available from the Mapbox Github.
Use events and flyTo to center the map on a feature in a circle layer. // Add a GeoJSON source with 3 points. }); // Center the map on the coordinates of any clicked circle from the 'circle' layer.
map.on('idle',function(){
map.resize()
})
Try this. it works fine for me.(for mapbox users only)
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
