mapbox.js
mapbox.js copied to clipboard
Attribution Control showing twice.
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'>© Mapbox © 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?
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 aL.mapbox.tileLayersecond.
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)