25

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?

10 Answers 10

26

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>
3
  • 6
    This only removes copyright in the bottom right corner, not logo in the bottom left.
    – lateo
    May 19, 2015 at 8: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, 2015 at 8:29
  • This is not the correct answer. The question is asking about the logo not the attribution.
    – DanV
    Apr 12 at 10:45
20

This worked for me:

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

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

.mapbox-logo{
    display: none !important;
}
1
  • 6
    .mapboxgl-ctrl-logo
    – Worm
    Oct 15, 2020 at 6:57
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.

1
  • 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, 2016 at 18:10
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
});
3

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;
}
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

1
  • 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! Jun 9, 2020 at 22:17
2

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.

1
  • This seems to be the proper and easiest way. TY!
    – dan
    Jun 17 at 19:06
0

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/

-2

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]
        }
    }

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.