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

Flickering geolocate circle fix #10334

Merged
merged 2 commits into from
Feb 4, 2021
Merged

Flickering geolocate circle fix #10334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4ae299b
flickering geolocate circle fix
anderswi Jan 27, 2021
aa52342
added tests for #10276
anderswi Feb 4, 2021
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
4 changes: 2 additions & 2 deletions src/ui/control/geolocate_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,8 +311,8 @@ class GeolocateControl extends Evented {
assert(this._circleElement);
const y = this._map._container.clientHeight / 2;
const a = this._map.unproject([0, y]);
const b = this._map.unproject([1, y]);
const metersPerPixel = a.distanceTo(b);
const b = this._map.unproject([100, y]);
const metersPerPixel = a.distanceTo(b) / 100;
const circleDiameter = Math.ceil(2.0 * this._accuracy / metersPerPixel);
this._circleElement.style.width = `${circleDiameter}px`;
this._circleElement.style.height = `${circleDiameter}px`;
Expand Down
33 changes: 33 additions & 0 deletions test/unit/ui/control/geolocate.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,39 @@ test('GeolocateControl accuracy circle radius matches reported accuracy', (t) =>
geolocation.send({latitude: 10, longitude: 20, accuracy: 700});
});

test("GeolocateControl accuracy circle doesn't flicker in size", (t) => {
const map = createMap(t);
const geolocate = new GeolocateControl({
trackUserLocation: true,
showUserLocation: true,
});
map.addControl(geolocate);

geolocate.once('geolocate', () => {
t.ok(geolocate._accuracyCircleMarker._map, 'userLocation accuracy circle marker on map');
t.equal(geolocate._accuracy, 150);
map.jumpTo({
center: [20.123123, 10.123123]
});
map.once('zoomend', () => {
const circleWidth = geolocate._circleElement.style.width;
map.once('zoomend', () => {
map.once('zoomend', () => {
t.equal(geolocate._circleElement.style.width, circleWidth);
t.end();
});
map.zoomTo(18, {duration: 0});
});
map.panBy([123, 123], {duration:0});
map.zoomTo(17, {duration: 0});
});
map.zoomTo(18, {duration: 0});
});

geolocate._geolocateButton.dispatchEvent(new window.Event('click'));
geolocation.send({longitude: 20.123123, latitude: 10.123123, accuracy: 150});
});

test('GeolocateControl shown even if trackUserLocation = false', (t) => {
const map = createMap(t);
const geolocate = new GeolocateControl({
Expand Down