-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* set width * cleanup * add show scale toggle in map settings * tslint * remove unmapped css comment * move scale for full screen mode so they do not collide * change default and add unit test for scale_control * simplify scale * add tilda to label * update jest expects * eslint * eslint Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
- Loading branch information
1 parent
60f8b24
commit c272d35
Showing
11 changed files
with
265 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
...ublic/connected_components/mb_map/scale_control/__snapshots__/scale_control.test.tsx.snap
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
15 changes: 15 additions & 0 deletions
15
x-pack/plugins/maps/public/connected_components/mb_map/scale_control/_index.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
.mapScaleControl { | ||
position: absolute; | ||
z-index: $euiZLevel1; | ||
left: $euiSizeM; | ||
bottom: $euiSizeM; | ||
pointer-events: none; | ||
color: $euiTextColor; | ||
border-left: 2px solid $euiTextColor; | ||
border-bottom: 2px solid $euiTextColor; | ||
text-align: right; | ||
} | ||
|
||
.mapScaleControlFullScreen { | ||
bottom: $euiSizeL * 2; | ||
} |
7 changes: 7 additions & 0 deletions
7
x-pack/plugins/maps/public/connected_components/mb_map/scale_control/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
|
||
export { ScaleControl } from './scale_control'; |
67 changes: 67 additions & 0 deletions
67
x-pack/plugins/maps/public/connected_components/mb_map/scale_control/scale_control.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
|
||
import React from 'react'; | ||
import { mount, shallow } from 'enzyme'; | ||
import { ScaleControl } from './scale_control'; | ||
import { LngLat, LngLatBounds, Map as MapboxMap, PointLike } from 'mapbox-gl'; | ||
|
||
const CLIENT_HEIGHT_PIXELS = 1200; | ||
const DISTANCE_METERS = 87653; | ||
|
||
const mockMbMapHandlers: { [key: string]: () => void } = {}; | ||
const mockMBMap = ({ | ||
on: (eventName: string, callback: () => void) => { | ||
mockMbMapHandlers[eventName] = callback; | ||
}, | ||
off: (eventName: string) => { | ||
delete mockMbMapHandlers[eventName]; | ||
}, | ||
getContainer: () => { | ||
return { | ||
clientHeight: CLIENT_HEIGHT_PIXELS, | ||
}; | ||
}, | ||
getZoom: () => { | ||
return 4; | ||
}, | ||
getBounds: () => { | ||
return ({ | ||
getNorth: () => { | ||
return 75; | ||
}, | ||
getSouth: () => { | ||
return -60; | ||
}, | ||
} as unknown) as LngLatBounds; | ||
}, | ||
unproject: (point: PointLike) => { | ||
return ({ | ||
distanceTo: (lngLat: LngLat) => { | ||
return DISTANCE_METERS; | ||
}, | ||
} as unknown) as LngLat; | ||
}, | ||
} as unknown) as MapboxMap; | ||
|
||
test('render', () => { | ||
const component = shallow(<ScaleControl mbMap={mockMBMap} isFullScreen={false} />); | ||
expect(component).toMatchSnapshot(); | ||
}); | ||
|
||
test('isFullScreen', () => { | ||
const component = shallow(<ScaleControl mbMap={mockMBMap} isFullScreen={true} />); | ||
expect(component).toMatchSnapshot(); | ||
}); | ||
|
||
test('should un-register all map callbacks on unmount', () => { | ||
const component = mount(<ScaleControl mbMap={mockMBMap} isFullScreen={false} />); | ||
|
||
expect(Object.keys(mockMbMapHandlers).length).toBe(1); | ||
|
||
component.unmount(); | ||
expect(Object.keys(mockMbMapHandlers).length).toBe(0); | ||
}); |
121 changes: 121 additions & 0 deletions
121
x-pack/plugins/maps/public/connected_components/mb_map/scale_control/scale_control.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
|
||
import { i18n } from '@kbn/i18n'; | ||
import classNames from 'classnames'; | ||
import React, { Component } from 'react'; | ||
import { Map as MapboxMap } from 'mapbox-gl'; | ||
const MAX_WIDTH = 110; | ||
|
||
interface Props { | ||
isFullScreen: boolean; | ||
mbMap: MapboxMap; | ||
} | ||
|
||
interface State { | ||
label: string; | ||
width: number; | ||
} | ||
|
||
function getScaleDistance(value: number) { | ||
const orderOfMagnitude = Math.floor(Math.log10(value)); | ||
const pow10 = Math.pow(10, orderOfMagnitude); | ||
|
||
// reduce value to single order of magnitude to making rounding simple regardless of order of magnitude | ||
const distance = value / pow10; | ||
|
||
if (distance < 1) { | ||
return pow10 * (Math.round(distance * 10) / 10); | ||
} | ||
|
||
// provide easy to multiple round numbers for scale distance so its easy to measure distances longer then the scale | ||
if (distance >= 10) { | ||
return 10 * pow10; | ||
} | ||
|
||
if (distance >= 5) { | ||
return 5 * pow10; | ||
} | ||
|
||
if (distance >= 3) { | ||
return 3 * pow10; | ||
} | ||
|
||
return Math.floor(distance) * pow10; | ||
} | ||
|
||
export class ScaleControl extends Component<Props, State> { | ||
private _isMounted: boolean = false; | ||
|
||
state: State = { label: '', width: 0 }; | ||
|
||
componentDidMount() { | ||
this._isMounted = true; | ||
this.props.mbMap.on('move', this._onUpdate); | ||
this._onUpdate(); | ||
} | ||
|
||
componentWillUnmount() { | ||
this._isMounted = false; | ||
this.props.mbMap.off('move', this._onUpdate); | ||
} | ||
|
||
_onUpdate = () => { | ||
if (!this._isMounted) { | ||
return; | ||
} | ||
const centerHeight = this.props.mbMap.getContainer().clientHeight / 2; | ||
const leftLatLon = this.props.mbMap.unproject([0, centerHeight]); | ||
const rightLatLon = this.props.mbMap.unproject([MAX_WIDTH, centerHeight]); | ||
const maxDistanceMeters = leftLatLon.distanceTo(rightLatLon); | ||
if (maxDistanceMeters >= 1000) { | ||
this._setScale( | ||
maxDistanceMeters / 1000, | ||
i18n.translate('xpack.maps.kilometersAbbr', { | ||
defaultMessage: 'km', | ||
}) | ||
); | ||
} else { | ||
this._setScale( | ||
maxDistanceMeters, | ||
i18n.translate('xpack.maps.metersAbbr', { | ||
defaultMessage: 'm', | ||
}) | ||
); | ||
} | ||
}; | ||
|
||
_setScale(maxDistance: number, unit: string) { | ||
const scaleDistance = getScaleDistance(maxDistance); | ||
const zoom = this.props.mbMap.getZoom(); | ||
const bounds = this.props.mbMap.getBounds(); | ||
let label = `${scaleDistance} ${unit}`; | ||
if ( | ||
zoom <= 4 || | ||
(zoom <= 6 && (bounds.getNorth() > 23.5 || bounds.getSouth() < -23.5)) || | ||
(zoom <= 8 && (bounds.getNorth() > 45 || bounds.getSouth() < -45)) | ||
) { | ||
label = '~' + label; | ||
} | ||
this.setState({ | ||
width: MAX_WIDTH * (scaleDistance / maxDistance), | ||
label, | ||
}); | ||
} | ||
|
||
render() { | ||
return ( | ||
<div | ||
className={classNames('mapScaleControl', { | ||
mapScaleControlFullScreen: this.props.isFullScreen, | ||
})} | ||
style={{ width: `${this.state.width}px` }} | ||
> | ||
{this.state.label} | ||
</div> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters