imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Live location sharing: set map bounds to include all locations (#8324)

Browse source 
* open a dialog with map centered around first beacon

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test dialog opening from beacon body

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test beaconmarker

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add bounds to Map comp

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add focusBeacon to beaconviewdialog, use bounds

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use membercolor on beacon view markers

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add lnglatbounds to maplibre mock

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update snapshots for expanded maplibre Map mock

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test map bounds

Signed-off-by: Kerry Archibald <kerrya@element.io>

* tidy copy paste comment

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add fallback when no more live locations

Signed-off-by: Kerry Archibald <kerrya@element.io>

* accurate signature for getBoundsCenter

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-04-19 13:35:39 +02:00 • committed by GitHub
parent 6b13988eaa
commit f70186ea9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 246 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/components/views/location/Map.tsx
View file

@ -16,6 +16,7 @@ limitations under the License.
import React, { ReactNode, useContext, useEffect } from 'react';
import classNames from 'classnames';
import maplibregl from 'maplibre-gl';
import { ClientEvent, IClientWellKnown } from 'matrix-js-sdk/src/matrix';
import { logger } from 'matrix-js-sdk/src/logger';
@ -24,8 +25,9 @@ import { useEventEmitterState } from '../../../hooks/useEventEmitter';
import { parseGeoUri } from '../../../utils/location';
import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
import { useMap } from '../../../utils/location/useMap';
import { Bounds } from '../../../utils/beacon/bounds';
const useMapWithStyle = ({ id, centerGeoUri, onError, interactive }) => {
const useMapWithStyle = ({ id, centerGeoUri, onError, interactive, bounds }) => {
const bodyId = `mx_Map_${id}`;
// style config
@ -55,6 +57,20 @@ const useMapWithStyle = ({ id, centerGeoUri, onError, interactive }) => {
}
}, [map, centerGeoUri]);
useEffect(() => {
if (map && bounds) {
try {
const lngLatBounds = new maplibregl.LngLatBounds(
[bounds.west, bounds.south],
[bounds.east, bounds.north],
);
map.fitBounds(lngLatBounds, { padding: 100 });
} catch (error) {
logger.error('Invalid map bounds', error);
}
}
}, [map, bounds]);
return {
map,
bodyId,
@ -65,6 +81,7 @@ interface MapProps {
id: string;
interactive?: boolean;
centerGeoUri?: string;
bounds?: Bounds;
className?: string;
onClick?: () => void;
onError?: (error: Error) => void;
@ -74,9 +91,15 @@ interface MapProps {
}
const Map: React.FC<MapProps> = ({
centerGeoUri, className, id, onError, onClick, children, interactive,
bounds,
centerGeoUri,
children,
className,
id,
interactive,
onError, onClick,
}) => {
const { map, bodyId } = useMapWithStyle({ centerGeoUri, onError, id, interactive });
const { map, bodyId } = useMapWithStyle({ centerGeoUri, onError, id, interactive, bounds });
const onMapClick = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,