mapbox / mapbox/mapbox-gl-js

Don't require external CSS to show attribution

Open
#9,353 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs discussion :speech_balloon:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

## Motivation

Correctly attributing Mapbox on a map should be the easy default when using the gl-js library.

Currently, application developers must add a line of code in order to add attribution to their maps. This is easily forgotten in an HTML page, and a bit tricky to figure out how to do when using a bundler like Webpack. This makes it harder to correctly attribute Mapbox than it is to leave off attribution.

## Design Alternatives

Require application code to _remove_ attribution.

- Render the attribution within the WebGL context
- Inject the CSS into the page at runtime as part of the gl-js library.

## Current state
With external CSS loaded (attribution appears correctly):
![pink map of the US with yellow heatmap and attribution across the bottom](https://user-images.githubusercontent.com/81553/75467918-61258900-595a-11ea-8b9d-2af8b39a422f.png)

Without external CSS loaded (no attribution):
![pink map of the US with yellow heatmap](https://user-images.githubusercontent.com/81553/75467992-7e5a5780-595a-11ea-93b7-e92cfa90b90a.png)

HTML pages must source the correct (matching) version of CSS to add attribution, e.g.:
``

Bundled applications can source the CSS from their node_modules folder and importing it close to where they use Mapbox, e.g.:
`import 'mapbox-gl/dist/mapbox-gl.css';`

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the current attribution behavior in mapbox-gl-js with and without the externally loaded CSS, then compare the listed design alternatives. Done means Mapbox attribution appears by default without requiring matching external CSS, while still allowing application developers to remove it.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, typescript, webpack
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.