Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix update edit link, add query parameters for map feedback #4685

Merged
merged 10 commits into from
May 31, 2017
Merged
10 changes: 7 additions & 3 deletions dist/mapbox-gl.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 */
}
14 changes: 11 additions & 3 deletions src/ui/control/attribution_control.js
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
Expand Down Expand Up @@ -66,11 +67,12 @@ 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');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, if I'm understanding this right, the change from .mapboxgl-improve-map to .mapbox-improve-map is in order to match against the CSS class used in our the TileJSON provided by Mapbox's vector tile sources?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

correct @anandthakker - I will ticket out changing that css class at the API level separately

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 styleParams = (this.styleOwner && this.styleId) ? config.ACCESS_TOKEN ? `?owner=${this.styleOwner}&id=${this.styleId}&access_token=${config.ACCESS_TOKEN}` : `?owner=${this.styleOwner}&id=${this.styleId}` : '';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

config.ACCESS_TOKEN wouldn't pick up an access token that a user set using mapboxgl.accessToken = ... right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@anandthakker I think it should

set: function(token) { config.ACCESS_TOKEN = token; }

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙈

this._editLink.href = `https://www.mapbox.com/feedback/${styleParams}#/${
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this map is using a custom style designed in Studio (as opposed to a default style), should the feedback tool display that style in its map? If so, we'll also need to pass in an access token or somehow make it so that the feedback tool can access any style.

/cc @tristen

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@1ec5 yikes I think you brought up something pretty critical here. I assumed a token could be generated with the scope to include any custom style but that doesn't appear to be the case. It looks like an access token would need to be additionally passed for this to work.

@mollymerp client is encoded in the token so it might make sense to drop that parameter for token instead?

Math.round(center.lng * 1000) / 1000}/${Math.round(center.lat * 1000) / 1000}/${Math.round(this._map.getZoom())}`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we dropping the +1 from this._map.getZoom() + 1? Was it incorrect in the first place?

Copy link
Contributor Author

@mollymerp mollymerp May 12, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@anandthakker GL and raster zoom levels are off by one 😊. the old map-feedback link used Mapbox.js and therefore we had to add a zoom level to the hash for the link to open at the right spot.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it still necessary to round the zoom level?

}
}

Expand All @@ -85,6 +87,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();
Expand Down
14 changes: 9 additions & 5 deletions test/unit/ui/control/attribution.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,24 @@
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',
}
});

}

test('AttributionControl appears in bottom-right by default', (t) => {
Expand Down Expand Up @@ -103,14 +108,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: '<a class="mapboxgl-improve-map" href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a>'});
map.addSource('1', {type: 'vector', attribution: '<a class="mapbox-improve-map" href="https://www.mapbox.com/feedback/" target="_blank">Improve this map</a>'});
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();
}
});
Expand Down