oysega
Last Updated: July 27, 2018
·
343
· Wahlbarg

MapBox WEBGL fitBounds quick fix

Hello,

In MapBox , the fitBounds function will work only if we pass the SW first coords and then the NE coords, otherwise, the fnction will throw a message in the console :
"Map cannot fit within canvas with the given bounds, padding, and/or offset".
This message will show when try to pass the NE befor the SW in the bounding Array.
And it will show also if you have two points, one in the NW and the other in the SE.

This function will handel it for your, no matter the order of the your points or the position, it will always fit the view in to the given Coords points !

See it live : https://jsfiddle.net/wahlbarg/unqm9022/

The function :

function FitBounds(ArrayA,ArrayB)
{
var Box;

            if(ArrayA[0] > ArrayB[0] && ArrayA[1] > ArrayB[1])
            {
                Box = [ArrayB,ArrayA];
            }
            else if(ArrayB[0] > ArrayA[0] && ArrayB[1] > ArrayA[1])
            {
                Box = [ArrayA,ArrayB];
            }

        else if(ArrayA[0] > ArrayB[0] && ArrayA[1] < ArrayB[1])
        {
                var MirroPointA = [ArrayA[0],ArrayB[1]],
                        MirroPointB = [ArrayB[0],ArrayA[1]];
                                Box = [MirroPointB,MirroPointA];
        }

        else if(ArrayA[0] < ArrayB[0] && ArrayA[1] > ArrayB[1])
        {
                var MirroPointA = [ArrayB[0],ArrayA[1]],
                        MirroPointB = [ArrayA[0],ArrayB[1]];
                                Box = [MirroPointB,MirroPointA];
        }

Map.fitBounds(Box,{
                                      padding : {
                                        top: 80,
                                        right:80,
                                        bottom:80,
                                        left:80
                                                        }
                                    } );

}

Say Thanks

8 Responses
Add your response

29729
12 1510738735134

For those writing JavaScript with r.js compiler, pragmas can be very useful for this kind of thing.

Ready to play amazing games for free Run 3: https://run3coolmath.io/

6 months ago ·
29783

Thanks for your sharing! The information your share is very useful to me and many people are looking for them just like me!
http://run3-game.com >Run 3

5 months ago ·
29916

The article is interesting and useful. I tried it and found it really useful. Thank you very much. https://www.hotmailissue.com

3 months ago ·
29945
3 months ago ·
29964

Thank you for this message. Best of luck.
http://superfighters.xyz/
http://warfare1917unblocked.stream/

3 months ago ·
29984

This function will handel it for your, no matter the order of the your points or the position, it will always fit the view in to the given Coords points
https://gswitch3.net/

2 months ago ·
30200

Where to buy hermes birkin replica? You may be heard of HermesSale.com, it was the well-known online shop in this industry. They offer best quality hermes replica bag and wallets. But because of copy right issues and complaint from authentic hermes, they have to change domains frequently. Their current working domain is http://www.hermessale.ee, if you have wechat, you'd better add their account (HermesSale).

about 1 month ago ·
30245

Thanks to this article I can learn more. Expand your knowledge and abilities. Actually the article is very practical.
http://templerun3.co

23 days ago ·