mapbox.js icon indicating copy to clipboard operation
mapbox.js copied to clipboard

Attribution Control showing twice.

Open DerekOverlock opened this issue 10 years ago • 2 comments

Hi there,

I am using PhoneGap for my mobile app, and with that, I have to tweak the attribution controls a bit (specifically, I need to change the target="_blank" to target="_system"). I have this working for one of my maps. For the second, it is showing the attribution twice now, once with target="_blank" and another with target="_system". I have ensured that {attributionControl: false} is set for both maps.

The code is similar for both maps, so I don't understand why one is showing:

<a href="https://www.mapbox.com/about/maps/" target="_system">© Mapbox © OpenStreetMap</a> <a class="mapbox-improve-map" href="https://www.mapbox.com/map-feedback/" target="_system">Improve this map</a>, <a href="https://www.mapbox.com/about/maps/" target="_blank">© Mapbox © OpenStreetMap</a> <a class="mapbox-improve-map" href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a>

This is how I'm adding the attribution (for both maps):

this.mapAttribution = L.control.attribution({prefix: false}).addTo(this.map);
this.mapAttribution.addAttribution("<a href='https://www.mapbox.com/about/maps/' target='_system'>&copy; Mapbox &copy; OpenStreetMap</a> <a class='mapbox-improve-map' href='https://www.mapbox.com/map-feedback/' target='_system'>Improve this map</a>");

And this is how the map is being created:

this.map = L.mapbox.map('map', '{MAP_ID}', this.mapOptions);

where this.mapOptions is:

this.mapOptions = {
            zoomControl: false,
            maxBounds: [[-90,-180], [90,180]],
            minZoom: 2,
            attributionControl: false
};

Any idea why I'm experiencing this inconsistency? FWIW, the differences between the two maps are minimal. I've added a marker to the map that has the attribution controls painted appropriately, I also set the location after I create this map.

Another FWIW, when I don't add attributions, and attributionControl: false both maps do not show any attribution (as expected).

Is there something that could trigger addition of the old attribution?

DerekOverlock avatar Feb 26 '15 17:02 DerekOverlock

When the attribution control is added to the map it automatically adds attributions for any existing layers.

So you have a couple options:

  • Explicitly remove the duplicate attribution after adding the attribution control.
  • Don't provide a map ID when creating L.mapbox.map, this way the default tile layer won't be created. Instead add the attribution control first, and then add a L.mapbox.tileLayer second.

jfirebaugh avatar Feb 26 '15 17:02 jfirebaugh

Thanks for the options. I will look into them.

I just found out what makes the maps show the attribution correctly, if I do:

this.map = L.mapbox.map('map', '{MAP_ID}', this.mapOptions).setView([30, 80], 4);
this.mapAttribution = L.control.attribution({prefix: false}).addTo(this.map);
this.mapAttribution.addAttribution({ATTRIBUTION_TEXT});

Then the second map will show the correct attribution. It seems that adding setView triggers this fix. I looked at the documentation, and saw the setView just returns the Map object, so I'm not sure why this fixes it. Thoughts?

(Similarly, just removed the .setView([location.latitude, location.longitude], 4); part of the first map, and now it shows the attribution twice)

DerekOverlock avatar Feb 26 '15 17:02 DerekOverlock