mapbox/mapbox-gl-js

Allow controls to be placed at top-center, bottom-center, left-center, and right-center

Open

#3,039 opened on Aug 20, 2016

View on GitHub
 (12 comments) (16 reactions) (0 assignees)JavaScript (10,532 stars) (2,203 forks)batch import
feature :green_apple:good first issue

Description

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

Contributor guide

Tech stack
javascriptcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS positioningJavaScript event handlingmapbox gl js API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the CSS file mapbox gl.css for existing control positioning classes (e.g., mapboxgl ctrl top left). Add new classes for top center, bottom center, etc. Also check the JavaScript source for control container logic, likely in src/ui/control/control.js or similar. The issue comments (#3039) mention some workarounds and potential approaches. Ensure new positions work with responsive design and that the controls don't overlap.
Allow controls to be placed at top-center, bottom-center, left-center, and right-center · mapbox/mapbox-gl-js#3039 | Good First Issue