diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css
index efca2ec68cb..9067f7fdb34 100644
--- a/dist/mapbox-gl.css
+++ b/dist/mapbox-gl.css
@@ -161,11 +161,12 @@ a.mapboxgl-ctrl-logo {
color: inherit;
text-decoration: underline;
}
-.mapboxgl-ctrl-attrib .mapboxgl-improve-map {
+/* stylelint-disable */
+.mapboxgl-ctrl-attrib .mapbox-improve-map {
font-weight: bold;
margin-left: 2px;
}
-
+/*stylelint-enable*/
.mapboxgl-ctrl-scale {
background-color: rgba(255,255,255,0.75);
font-size: 10px;
@@ -318,8 +319,11 @@ a.mapboxgl-ctrl-logo {
border: 2px dotted #202020;
opacity: 0.5;
}
+
@media print {
- .mapboxgl-improve-map {
+/* stylelint-disable */
+ .mapbox-improve-map {
display:none;
}
+/* stylelint-enable */
}
diff --git a/src/ui/control/attribution_control.js b/src/ui/control/attribution_control.js
index f84d1c038ef..0ce99e81884 100644
--- a/src/ui/control/attribution_control.js
+++ b/src/ui/control/attribution_control.js
@@ -2,6 +2,7 @@
const DOM = require('../../util/dom');
const util = require('../../util/util');
+const config = require('../../util/config');
/**
* An `AttributionControl` control presents the map's [attribution information](https://www.mapbox.com/help/attribution/).
@@ -66,14 +67,26 @@ class AttributionControl {
}
_updateEditLink() {
- if (!this._editLink) this._editLink = this._container.querySelector('.mapboxgl-improve-map');
+ if (!this._editLink) this._editLink = this._container.querySelector('.mapbox-improve-map');
+ const params = [
+ {key: "owner", value: this.styleOwner},
+ {key: "id", value: this.styleId},
+ {key: "access_token", value: config.ACCESS_TOKEN}
+ ];
+
if (this._editLink) {
- const center = this._map.getCenter();
- this._editLink.href = `https://www.mapbox.com/map-feedback/#/${
- center.lng}/${center.lat}/${Math.round(this._map.getZoom() + 1)}`;
+ const paramString = params.reduce((acc, next, i) => {
+ if (next.value !== undefined) {
+ acc += `${next.key}=${next.value}${i < params.length - 1 ? '&' : ''}`;
+ }
+ return acc;
+ }, `?`);
+ this._editLink.href = `https://www.mapbox.com/feedback/${paramString}${this._map._hash ? this._map._hash.getHashString(true) : ''}`;
+
}
}
+
_updateData(e) {
if (e && e.sourceDataType === 'metadata') {
this._updateAttributions();
@@ -85,6 +98,12 @@ class AttributionControl {
if (!this._map.style) return;
let attributions = [];
+ if (this._map.style.stylesheet) {
+ const stylesheet = this._map.style.stylesheet;
+ this.styleOwner = stylesheet.owner;
+ this.styleId = stylesheet.id;
+ }
+
const sourceCaches = this._map.style.sourceCaches;
for (const id in sourceCaches) {
const source = sourceCaches[id].getSource();
diff --git a/src/ui/hash.js b/src/ui/hash.js
index 9068c055d7b..82efb9e0503 100644
--- a/src/ui/hash.js
+++ b/src/ui/hash.js
@@ -42,6 +42,28 @@ class Hash {
return this;
}
+ getHashString(mapFeedback) {
+ const center = this._map.getCenter(),
+ zoom = Math.round(this._map.getZoom() * 100) / 100,
+ precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2)),
+ lng = Math.round(center.lng * Math.pow(10, precision)) / Math.pow(10, precision),
+ lat = Math.round(center.lat * Math.pow(10, precision)) / Math.pow(10, precision),
+ bearing = this._map.getBearing(),
+ pitch = this._map.getPitch();
+ let hash = '';
+ if (mapFeedback) {
+ // new map feedback site has some constraints that don't allow
+ // us to use the same hash format as we do for the Map hash option.
+ hash += `#/${lng}/${lat}/${zoom}`;
+ } else {
+ hash += `#${zoom}/${lat}/${lng}`;
+ }
+
+ if (bearing || pitch) hash += (`/${Math.round(bearing * 10) / 10}`);
+ if (pitch) hash += (`/${Math.round(pitch)}`);
+ return hash;
+ }
+
_onHashChange() {
const loc = window.location.hash.replace('#', '').split('/');
if (loc.length >= 3) {
@@ -57,21 +79,10 @@ class Hash {
}
_updateHash() {
- const center = this._map.getCenter(),
- zoom = this._map.getZoom(),
- bearing = this._map.getBearing(),
- pitch = this._map.getPitch(),
- precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2));
-
- let hash = `#${Math.round(zoom * 100) / 100
- }/${center.lat.toFixed(precision)
- }/${center.lng.toFixed(precision)}`;
-
- if (bearing || pitch) hash += (`/${Math.round(bearing * 10) / 10}`);
- if (pitch) hash += (`/${Math.round(pitch)}`);
-
+ const hash = this.getHashString();
window.history.replaceState('', '', hash);
}
+
}
module.exports = Hash;
diff --git a/test/unit/ui/control/attribution.test.js b/test/unit/ui/control/attribution.test.js
index 41be18e9300..4dcb8940339 100644
--- a/test/unit/ui/control/attribution.test.js
+++ b/test/unit/ui/control/attribution.test.js
@@ -3,19 +3,25 @@
const test = require('mapbox-gl-js-test').test;
const window = require('../../../../src/util/window');
const Map = require('../../../../src/ui/map');
+const config = require('../../../../src/util/config');
const AttributionControl = require('../../../../src/ui/control/attribution_control');
function createMap() {
const container = window.document.createElement('div');
+ config.ACCESS_TOKEN = 'pk.123';
return new Map({
container: container,
attributionControl: false,
style: {
version: 8,
sources: {},
- layers: []
- }
+ layers: [],
+ owner: 'mapbox',
+ id: 'streets-v10',
+ },
+ hash: true
});
+
}
test('AttributionControl appears in bottom-right by default', (t) => {
@@ -103,14 +109,13 @@ test('AttributionControl has the correct edit map link', (t) => {
const map = createMap();
const attribution = new AttributionControl();
map.addControl(attribution);
-
map.on('load', () => {
- map.addSource('1', {type: 'vector', attribution: 'Improve this map'});
+ map.addSource('1', {type: 'vector', attribution: 'Improve this map'});
map.on('data', (e) => {
if (e.dataType === 'source' && e.sourceDataType === 'metadata') {
- t.equal(attribution._editLink.href, 'https://www.mapbox.com/map-feedback/#/0/0/1', 'edit link contains map location data');
+ t.equal(attribution._editLink.href, 'https://www.mapbox.com/feedback/?owner=mapbox&id=streets-v10&access_token=pk.123#/0/0/0', 'edit link contains map location data');
map.setZoom(2);
- t.equal(attribution._editLink.href, 'https://www.mapbox.com/map-feedback/#/0/0/3', 'edit link updates on mapmove');
+ t.equal(attribution._editLink.href, 'https://www.mapbox.com/feedback/?owner=mapbox&id=streets-v10&access_token=pk.123#/0/0/2', 'edit link updates on mapmove');
t.end();
}
});
diff --git a/test/unit/ui/hash.test.js b/test/unit/ui/hash.test.js
index f568701977d..b4a521c271f 100644
--- a/test/unit/ui/hash.test.js
+++ b/test/unit/ui/hash.test.js
@@ -121,8 +121,8 @@ test('hash', (t) => {
t.equal(newHash.length, 3);
t.equal(newHash[0], '#3');
- t.equal(newHash[1], '1.00');
- t.equal(newHash[2], '2.00');
+ t.equal(newHash[1], '1');
+ t.equal(newHash[2], '2');
map.setPitch(60);
@@ -130,8 +130,8 @@ test('hash', (t) => {
t.equal(newHash.length, 5);
t.equal(newHash[0], '#3');
- t.equal(newHash[1], '1.00');
- t.equal(newHash[2], '2.00');
+ t.equal(newHash[1], '1');
+ t.equal(newHash[2], '2');
t.equal(newHash[3], '0');
t.equal(newHash[4], '60');
@@ -141,8 +141,8 @@ test('hash', (t) => {
t.equal(newHash.length, 5);
t.equal(newHash[0], '#3');
- t.equal(newHash[1], '1.00');
- t.equal(newHash[2], '2.00');
+ t.equal(newHash[1], '1');
+ t.equal(newHash[2], '2');
t.equal(newHash[3], '135');
t.equal(newHash[4], '60');