From 7f1051753f2a0cbf817d098a9ce057cb927b522c Mon Sep 17 00:00:00 2001
From: Ethan Guttman <61851595+Ethan-Guttman@users.noreply.github.com>
Date: Wed, 18 Sep 2024 02:29:38 -0700
Subject: [PATCH] Add `top`, `right`, `bottom`, and `left` control positions
 (#13104)

Adds `top`, `right`, `bottom`, and `left` control positions

Co-authored-by: Stepan Kuzmin <stepan.kuzmin@mapbox.com>
---
 src/css/mapbox-gl.css | 38 ++++++++++++++++++++++++++++++--------
 src/ui/map.ts         |  7 ++++---
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/css/mapbox-gl.css b/src/css/mapbox-gl.css
index 5bd35df1612..2f6d1ff2c35 100644
--- a/src/css/mapbox-gl.css
+++ b/src/css/mapbox-gl.css
@@ -54,11 +54,19 @@
 .mapboxgl-ctrl-top-left,
 .mapboxgl-ctrl-top-right,
 .mapboxgl-ctrl-bottom-left,
-.mapboxgl-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; }
+.mapboxgl-ctrl-bottom-right,
+.mapboxgl-ctrl-top,
+.mapboxgl-ctrl-right,
+.mapboxgl-ctrl-bottom,
+.mapboxgl-ctrl-left { position: absolute; pointer-events: none; z-index: 2; }
 .mapboxgl-ctrl-top-left     { top: 0; left: 0; }
+.mapboxgl-ctrl-top { top:0; left: 50%; transform: translateX(-50%); }
 .mapboxgl-ctrl-top-right    { top: 0; right: 0; }
-.mapboxgl-ctrl-bottom-left  { bottom: 0; left: 0; }
+.mapboxgl-ctrl-right { top:50%; transform: translateY(-50%); right:0; }
 .mapboxgl-ctrl-bottom-right { right: 0; bottom: 0; }
+.mapboxgl-ctrl-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
+.mapboxgl-ctrl-bottom-left  { bottom: 0; left: 0; }
+.mapboxgl-ctrl-left { top: 50%; transform: translateY(-50%); left: 0 }
 
 .mapboxgl-ctrl {
     clear: both;
@@ -67,10 +75,14 @@
     /* workaround for a Safari bug https://github.com/mapbox/mapbox-gl-js/issues/8185 */
     transform: translate(0, 0);
 }
-.mapboxgl-ctrl-top-left .mapboxgl-ctrl     { margin: 10px 0 0 10px; float: left; }
-.mapboxgl-ctrl-top-right .mapboxgl-ctrl    { margin: 10px 10px 0 0; float: right; }
-.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl  { margin: 0 0 10px 10px; float: left; }
-.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 10px 10px 0; float: right; }
+.mapboxgl-ctrl-top-left .mapboxgl-ctrl      { margin: 10px 0 0 10px; float: left; }
+.mapboxgl-ctrl-top .mapboxgl-ctrl    { margin: 10px 0; float: left;}
+.mapboxgl-ctrl-top-right .mapboxgl-ctrl     { margin: 10px 10px 0 0; float: right; }
+.mapboxgl-ctrl-right .mapboxgl-ctrl  { margin: 0 10px 10px 0; float: right; }
+.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl  { margin: 0 10px 10px 0; float: right; }
+.mapboxgl-ctrl-bottom .mapboxgl-ctrl { margin: 10px 0;  float: left; }
+.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl   { margin: 0 0 10px 10px; float: left; }
+.mapboxgl-ctrl-left .mapboxgl-ctrl   { margin: 0 0 10px 10px; float: left;}
 
 .mapboxgl-ctrl-group {
     border-radius: 4px;
@@ -418,7 +430,8 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     }
 
     .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show,
-    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show {
+    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show,
+    .mapboxgl-ctrl-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show {
         padding: 2px 8px 2px 28px;
         border-radius: 12px;
     }
@@ -444,7 +457,8 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     }
 
     .mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button,
-    .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button {
+    .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,
+    .mapboxgl-ctrl-left .mapboxgl-ctrl-attrib-button {
         left: 0;
     }
 
@@ -462,6 +476,10 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
         right: 0;
     }
 
+    .mapboxgl-ctrl-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        right: 0;
+    }
+
     .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
         top: 0;
         right: 0;
@@ -476,6 +494,10 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
         bottom: 0;
         left: 0;
     }
+
+    .mapboxgl-ctrl-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        left: 0;
+    }
 }
 
 @media screen and (-ms-high-contrast: active) {
diff --git a/src/ui/map.ts b/src/ui/map.ts
index 87da2d624b3..f6869539798 100644
--- a/src/ui/map.ts
+++ b/src/ui/map.ts
@@ -98,7 +98,7 @@ import type {ITrackedParameters} from '../tracked-parameters/tracked_parameters_
 import type {Callback} from 'src/types/callback';
 import type {Interaction} from './interactions';
 
-export type ControlPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type ControlPosition = 'top-left' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left';
 /* eslint-disable no-use-before-define */
 export interface IControl {
     readonly onAdd: (map: Map) => HTMLElement;
@@ -795,7 +795,8 @@ export class Map extends Camera {
      *
      * @param {IControl} control The {@link IControl} to add.
      * @param {string} [position] Position on the map to which the control will be added.
-     * Valid values are `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`. Defaults to `'top-right'`.
+     * Valid values are `'top-left'`, `'top'`, `'top-right'`, `'right'`, `'bottom-right'`,
+     * `'bottom'`, `'bottom-left'`, and `'left'`. Defaults to `'top-right'`.
      * @returns {Map} Returns itself to allow for method chaining.
      * @example
      * // Add zoom and rotation controls to the map.
@@ -3807,7 +3808,7 @@ export class Map extends Camera {
 
         const controlContainer = this._controlContainer = DOM.create('div', 'mapboxgl-control-container', container);
         const positions = this._controlPositions = {};
-        ['top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach((positionName) => {
+        ['top-left', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left'].forEach((positionName) => {
             positions[positionName] = DOM.create('div', `mapboxgl-ctrl-${positionName}`, controlContainer);
         });