diff --git a/res/css/views/messages/_MLocationBody.scss b/res/css/views/messages/_MLocationBody.scss index 5bb90fbf7b0..948822bea8a 100644 --- a/res/css/views/messages/_MLocationBody.scss +++ b/res/css/views/messages/_MLocationBody.scss @@ -14,9 +14,30 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MLocationBody_map { - width: 450px; - height: 300px; +.mx_MLocationBody { + .mx_MLocationBody_map { + width: 450px; + height: 300px; - border-radius: $timeline-image-border-radius; + border-radius: $timeline-image-border-radius; + } + + .mx_MLocationBody_markerBorder { + width: 31px; + height: 31px; + border-radius: 50%; + background-color: $accent; + filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2)); + + .mx_BaseAvatar { + margin-top: 2px; + margin-left: 2px; + } + } + + .mx_MLocationBody_pointer { + position: absolute; + bottom: -3px; + left: 12px; + } } diff --git a/res/img/location/pointer.svg b/res/img/location/pointer.svg new file mode 100644 index 00000000000..8a7c5edf712 --- /dev/null +++ b/res/img/location/pointer.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/messages/MLocationBody.tsx b/src/components/views/messages/MLocationBody.tsx index a09e9929b2b..56bbfa6af81 100644 --- a/src/components/views/messages/MLocationBody.tsx +++ b/src/components/views/messages/MLocationBody.tsx @@ -23,6 +23,7 @@ import SdkConfig from '../../../SdkConfig'; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { IBodyProps } from "./IBodyProps"; import { _t } from '../../../languageHandler'; +import MemberAvatar from '../avatars/MemberAvatar'; interface IState { error: Error; @@ -32,7 +33,6 @@ interface IState { export default class MLocationBody extends React.Component { private map: maplibregl.Map; private coords: GeolocationCoordinates; - private description: string; constructor(props: IBodyProps) { super(props); @@ -49,8 +49,6 @@ export default class MLocationBody extends React.Component { this.state = { error: undefined, }; - - this.description = loc?.description ?? content['body']; } componentDidMount() { @@ -65,13 +63,12 @@ export default class MLocationBody extends React.Component { zoom: 13, }); - new maplibregl.Popup({ - closeButton: false, - closeOnClick: false, - closeOnMove: false, + new maplibregl.Marker({ + element: document.getElementById(this.getMarkerId()), + anchor: 'bottom', + offset: [0, -1], }) .setLngLat(coordinates) - .setHTML(this.description) .addTo(this.map); this.map.on('error', (e)=>{ @@ -88,6 +85,10 @@ export default class MLocationBody extends React.Component { return `mx_MLocationBody_${this.props.mxEvent.getId()}`; }; + private getMarkerId = () => { + return `mx_MLocationBody_marker_${this.props.mxEvent.getId()}`; + }; + render() { const error = this.state.error ?
@@ -97,6 +98,22 @@ export default class MLocationBody extends React.Component { return
{ error } +
+
+ +
+ +
; } }