How can I ensure that labels align with GeoJSON

Question

I have a very large map project which uses labels (and only labels from mapbox. That is, I don't get any boundaries or terrain from mapbox.)

I bring those vector tiles into Leaflet Using mapbox-gl-leaflet.

Generally, everything works great. However as soon as the map is taller than it is wide, the labels no longer align with the countries (which have been drawn as polygons using GeoJSON). Here is a pic of what happens and the relevant code is below.map with labels unaligned map with labels not alignted

Any thoughts or insights would be helpful. Here is the code that brings in the tiles:

settings.globalVariables.labelTiles = L.mapboxGL({
    accessToken: myAccessToken,
    style: 'mapbox://styles/markslawton/ckgsqyzhi0diy19rwi98mlt4g',
   pane: 'labels',
}).addTo(settings.globalVariables.map);

Here is the code that creates the map:

 Window.map = settings.globalVariables.map = new L.map('map', {
        zoomControl: false,
        zoomDelta: settings.map.zoomDelta,
        zoomSnap: settings.map.zoomSnap,
        minZoom: settings.map.minZoom,
        maxZoom: settings.map.maxZoom,
        dragging: true,
        trackResize: true,
        attributionControl: false,
        // maxBounds:[[-90,-180],[90,180]] 
    });

Answer 1

I'm not 100% sure, but I suspect the issue is with the north/south bounds of your map. Mapbox is constrained to the Web Mercator projection, which tops out at around 85º/-85º latitude. Judging from your image here, you are trying to show latitudes well north of there.

You probably need to constrain the bounds of your map with tighter bounds, or increase the minimum zoom, so this situation doesn't arise.