Mapbox-gl-js: Allow controls to be placed at top-center, bottom-center, left-center, and right-center

[mb12]

mapbox-gl-js version:Master

Steps to Trigger Behavior

Can you please suggest a workaround / solution for this? This is blocking switching from G Maps to Mapbox GL JS.

We need to put controls on the map at top center and bottom center. Google maps supports this and other positions for controls. You can find more details of supported positions at the link below. TOP_CENTER and BOTTOM_CENTER would unblock me.

I am hoping it just a matter of adding css. mapbox-gl.css only includes css for adding controls at the four corners.

https://developers.google.com/maps/documentation/javascript/controls

Expected Behavior

Actual Behavior

[lucaswoj]

@mb12 Until this lands in master, you should be able to implement this functionality downstream by adding your own CSS rules for mapboxgl-ctrl-*-center.

[mollymerp]

@mb12 here's a quick and dirty hack https://jsfiddle.net/wwbh6qsh/

[hermesespinola]

A workaround that I'm using, instead of renaming another position like the jsfiddle molly shared.

function registerControlPosition(map, positionName) {
        if (map._controlPositions[positionName]) {
            return;
        }
        var positionContainer = document.createElement('div');
        positionContainer.className = `mapboxgl-ctrl-${positionName}`;
        map._controlContainer.appendChild(positionContainer);
        map._controlPositions[positionName] = positionContainer;
    }

You just have to define css rules for mapboxgl-ctrl-${positionName}.
This mutates some property of the map, so may not work in the future. I'm using v0.44.2.

[cs09g]

I hope there should have right-bottom, left-bottom, right-top, left-top those placed on different direction with bottom-right, bottom-left, top-right, top-left. such https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning