How to remove MapBox logo from bottom left corner?

Question

I'm embeding a MapBox map in my html page via mapbox.js script like so:

L.mapbox.accessToken = 'pk.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxx';
var map = L.mapbox.map('map', 'xxxxx.xxxxxxxx', {
    zoomControl: false
});

This produces a map like this: http://s4.postimg.org/58m4aeb8d/mapbox.png

How do I remove "Mapbox" logo in the bottom left corner?

score 25 · Accepted Answer · answered May 19 '15 at 08:12

You can only completely remove the attribution on maps that do not contain Mapbox (Streets, Terrain, Satellite) or OpenStreetMap layers. This is because the OpenStreetMap and DigitalGlobe data contained in these layers legally require attribution.

If your map doesn’t include these layers, you can remove the default attribution by setting the info control to false:

var map = L.mapbox.map('map', 'examples.map-8ced9urs', {attributionControl: false});

You can add your own attribution by using the L.control.attribution constructor.

var credits = L.control.attribution().addTo(map);
credits.addAttribution('Credits: Penny Dog Mapping Co.');

You can, however, move the attribution. If you are using a layer that requires attribution, but want to move it to a different part of the page, you can insert this HTML snippet elsewhere on the page, like a page footer:

<a href='https://www.mapbox.com/about/maps/' target='_blank'>Maps &copy; Mapbox &copy; OpenStreetMap</a>

This only removes copyright in the bottom right corner, not logo in the bottom left. — lateo, May 19 '15 at 08:27
You are correct. Unfortunately, that's by design. They want you to pay for a higher-tier license to have it removed. — Dave, May 19 '15 at 08:29
This is not the correct answer. The question is asking about the logo not the attribution. — DanV, Apr 12 '23 at 10:45

score 18 · Answer 2 · edited Jul 22 '19 at 14:55

18

This worked for me:

.mapboxgl-ctrl-logo {
    display: none !important;
}

edited Jul 22 '19 at 14:55

I.T Delinquent

2,305
2
16
33

answered Jul 22 '19 at 14:15

Guilherme Patriarca

303
2
5

score 12 · Answer 3 · answered Sep 10 '15 at 18:16

12

This may violate the MapBox terms of service. Adding this css will remove it...

.mapbox-logo{
    display: none !important;
}

answered Sep 10 '15 at 18:16

max kaplan

541
4
13

6

.mapboxgl-ctrl-logo – Worm Oct 15 '20 at 06:57

score 5 · Answer 4 · answered May 19 '15 at 08:12

5

As per https://www.mapbox.com/plans/. Unless you are on the Standard or Premium pricing plans then the MapBox logo is required according to the terms of service.

answered May 19 '15 at 08:12

extols

1,762
14
19

Correct. I'm not advocating a ToS violation - I'm just saying it is possible to do :) I more interesting question I guess is how could his be prevented? – max kaplan Apr 29 '16 at 18:10

score 4 · Answer 5 · edited Jul 06 '20 at 18:04

4

Simply add attributionControl: false, when creating object for map

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    attributionControl: false
});

edited Jul 06 '20 at 18:04

β.εηοιτ.βε

33,893
13
69
83

answered Jul 06 '20 at 17:38

karthiraja karthik.k

41
1

score 3 · Answer 6 · answered Mar 22 '17 at 15:32

I've found this solution which keeps the mapbox wordmark(=logo) and text attributions in place but keeps them from interfering with the rest of the interface.

This solution does NOT violate the terms of service!

.leaflet-bottom, .leaflet-top {
    z-index: 0 !important; // This is 1000 by default
    position: absolute;
    pointer-events: none;
}

Fahad Ali · Answer 7 · 2020-06-10T01:22:48.730

3

In style.css paste this code

.mapbox-logo{ display: none; } .mapboxgl-ctrl-logo { display: none !important; } .mapbox-improve-map { display: none; } .mapboxgl-ctrl-compass { display: none; }

Is javascript file add this..

const map = new mapboxgl.Map({ container: this.mapContainer, style: 'mapbox://styles/mapbox/dark-v10', center: [this.state.lng, this.state.lat], zoom: this.state.zoom, attributionControl: false });

It's help you to hide terms of service

edited Jun 10 '20 at 01:22

answered Jun 09 '20 at 20:20

Fahad Ali

47
1
7

Hi fahad and thanks for the contribution. Can you please edit your answer to include your code snippet instead of linking to pastebin? Even better if you add a little explanation as well. Thanks and keep on stackoverflowing! – Alpi Murányi Jun 09 '20 at 22:17

score 2 · Answer 8 · answered Dec 14 '21 at 19:24

In case you are using the Mapbox Static Images API, you can easily remove both the Mapbox logo and the OpenStreetMaps attribution by adding the following parameters to your source URL:

&attribution=false&logo=false

Example (replace xxx with your own access token):

https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/static/-122.385,37.7175,12,0/300x300?access_token=xxx

Remember that you are still legally required to include proper attribution elsewhere on the webpage or document.

This seems to be the proper and easiest way. TY! – dan Jun 17 '23 at 19:06 — dan, Jun 17 '23 at 19:06

score 0 · Answer 9 · answered Feb 09 '22 at 23:47

The Mapbox logo is a small image containing the stylized word "Mapbox". It typically resides on the bottom left corner of a map. While you may move the logo to a different corner of the map, we require the Mapbox logo to appear on our maps so that Mapbox and its maps get proper credit.

https://docs.mapbox.com/help/getting-started/attribution/

score -1 · Answer 10 · answered Nov 19 '20 at 06:18

You can try this

@IBOutlet weak var mapView: MGLMapView!{
        didSet{
            mapView.styleURL = URL(string: "mapbox://styles/mapbox/dark-v10")
            mapView.attributionButton.alpha = 0 // to remove info icon on right
            mapView.logoView.isHidden = true // to remove mapBox logo on left
            mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        }
    }

How to remove MapBox logo from bottom left corner?

10 Answers10