Skip to content

Commit

Permalink
fix update edit link, add query parameters for map feedback (#4685)
Browse files Browse the repository at this point in the history 
* fix update edit link, add query parameters for map feedback

* update url structure

* correct url in test

* add access_token param

* update tests w access_token param

* add pitch and bearing

* fix hash, make consistent w existing hash option

* use rounding instead of toFixed to get rid of .00s, update tests

* make hash conform to feedback expectations

* change hash back to private property
  • Loading branch information
@mollymerp
mollymerp authored May 31, 2017
1 parent cb34199 commit 7d2b30b
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 32 deletions.
10 changes: 7 additions & 3 deletions dist/mapbox-gl.css
View file
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 */
}
27 changes: 23 additions & 4 deletions src/ui/control/attribution_control.js
View file
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,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();
Expand All @@ -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();
Expand Down
37 changes: 24 additions & 13 deletions src/ui/hash.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
17 changes: 11 additions & 6 deletions test/unit/ui/control/attribution.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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: '<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
12 changes: 6 additions & 6 deletions test/unit/ui/hash.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,17 +121,17 @@ 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);

newHash = getHash();

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');

Expand All @@ -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');

Expand Down

0 comments on commit 7d2b30b

Please sign in to comment.