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.

Sign up for GitHub

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

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

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
973fe84
fix update edit link, add query parameters for map feedback
May 5, 2017
d18d408
update url structure
May 9, 2017
ef0eb1f
correct url in test
May 12, 2017
ad82f4f
add access_token param
May 23, 2017
cbfe7b7
update tests w access_token param
May 23, 2017
dc8664f
add pitch and bearing
May 23, 2017
e2d0a3f
fix hash, make consistent w existing hash option
May 23, 2017
8601854
use rounding instead of toFixed to get rid of .00s, update tests
May 24, 2017
fc2afc1
make hash conform to feedback expectations
May 24, 2017
192dfd4
change hash back to private property
May 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions dist/mapbox-gl.css
View file
Open in desktop
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
Open in desktop
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');
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

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
Open in desktop
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;
6 changes: 3 additions & 3 deletions src/ui/map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,9 +192,9 @@ class Map extends Camera {

bindHandlers(this, options);

this._hash = options.hash && (new Hash()).addTo(this);
this.hash = options.hash && (new Hash()).addTo(this);
Copy link
Contributor

Choose a reason for hiding this comment

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

IMO we should keep the _ to signal that this is a private member rather than a public API.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

oooh good point – for some reason I was thinking the convention was no _ if its called from w/in another module but that is not correct 😊

// don't set position from options if set through hash
if (!this._hash || !this._hash._onHashChange()) {
if (!this.hash || !this.hash._onHashChange()) {
this.jumpTo({
center: options.center,
zoom: options.zoom,
Expand Down Expand Up @@ -1458,7 +1458,7 @@ class Map extends Camera {
* methods on the map.
*/
remove() {
if (this._hash) this._hash.remove();
if (this.hash) this.hash.remove();
browser.cancelFrame(this._frameId);
this.setStyle(null);
if (typeof window !== 'undefined') {
Expand Down
17 changes: 11 additions & 6 deletions test/unit/ui/control/attribution.test.js
View file
Open in desktop
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
Open in desktop
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