Add custom annotation to the map.

package.json

@@ -128,7 +128,7 @@
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+        "matrix-js-sdk": "github:toshanmugaraj/matrix-js-sdk#mapannotation",
         "matrix-widget-api": "^1.10.0",
         "memoize-one": "^6.0.0",
         "mime": "^4.0.4",
@@ -307,4 +307,4 @@
     "engines": {
         "node": ">=20.0.0"
     }
-}
+}

res/css/components/views/location/_Marker.pcss

@@ -10,6 +10,69 @@ Please see LICENSE files in the repository root for full details.
     color: $accent;
 }
 
+.mx_Marker_red {
+    color: red; 
+}
+
+.mx_Marker_green {
+    color: green; 
+}
+
+.mx_Marker_blue {
+    color: blue; 
+}
+
+.mx_Marker_yellow {
+    color: yellow; 
+}
+
+.mx_Marker_cyan {
+    color: cyan; 
+}
+
+.mx_Marker_magenta {
+    color: magenta; 
+}
+
+.mx_Marker_orange {
+    color: orange; 
+}
+
+.mx_Marker_purple {
+    color: purple; 
+}
+
+.mx_Marker_pink {
+    color: pink; 
+}
+
+.mx_Marker_brown {
+    color: brown; 
+}
+
+.mx_AnnotationMarker_border {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
+    background-color: currentColor;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /* caret down */
+    &::before {
+        content: "";
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 5px solid currentColor;
+        position: absolute;
+        bottom: -4px;
+    }
+}
+
+
 .mx_Marker_border {
     width: 42px;
     height: 42px;

src/components/views/location/Annotation.tsx

@@ -0,0 +1,7 @@
+interface Annotation {
+     body: string,
+     geoUri: string,
+     color?: string,
+}
+
+export default Annotation;

src/components/views/location/AnnotationDialog.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import BaseDialog from "../dialogs/BaseDialog";
+
+
+interface Props {
+    onFinished: () => void;
+    onSubmit: (title: string, color: string) => void;
+    displayBack?: boolean;
+}
+
+const colorOptions = [
+    { label: 'Red', value: 'red' },
+    { label: 'Green', value: 'green' },
+    { label: 'Blue', value: 'blue' },
+    { label: 'Yellow', value: 'yellow' },
+    { label: 'Cyan', value: 'cyan' },
+    { label: 'Magenta', value: 'magenta' },
+    { label: 'Orange', value: 'orange' },
+    { label: 'Purple', value: 'purple' },
+    { label: 'Pink', value: 'pink' },
+    { label: 'Brown', value: 'brown' },
+];
+
+const AnnotationDialog: React.FC<Props> = ({ onSubmit, onFinished }) => {
+
+    const [title, setTitle] = useState('');
+    const [color, setColor] = useState('red'); // Default color
+
+    const handleSubmit = () => {
+        onSubmit(title, color);
+        onFinished();
+    };
+
+    return (
+        <BaseDialog
+        title="Annotation details"
+        onFinished={onFinished}
+        hasCancel={true}
+        className="mx_WidgetCapabilitiesPromptDialog"
+    >
+        <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+            <input
+                type="text"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Enter title"
+            />
+
+            <div>
+                <label htmlFor="colorSelect" style={{ marginRight: "10px" }}>Choose Color:</label>
+                <select
+                    id="colorSelect"
+                    value={color}
+                    onChange={(e) => setColor(e.target.value)}
+                >
+                    {colorOptions.map((color) => (
+                        <option key={color.value} value={color.value} style={{ backgroundColor: color.value }}>
+                        {color.label}
+                    </option>
+                    ))}
+                </select>
+            </div>
+
+            <button onClick={handleSubmit}>Submit</button>
+        </div>
+    </BaseDialog>
+    );
+};
+
+export default AnnotationDialog;

src/components/views/location/AnnotationMarker.tsx

@@ -0,0 +1,78 @@
+import React, { ReactNode, useState } from "react";
+import classNames from "classnames";
+import LocationIcon from "@vector-im/compound-design-tokens/assets/web/icons/location-pin-solid";
+
+
+
+
+/**
+ * Wrap with tooltip handlers when
+ * tooltip is truthy
+ */
+const OptionalTooltip: React.FC<{
+    tooltip?: React.ReactNode;
+    annotationKey: string;
+    children: React.ReactNode;
+    onDelete: (key: string) => void; // Optional delete function
+}> = ({ tooltip, children, onDelete, annotationKey }) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    return (
+        <div
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            style={{ position: "relative" }} // Set position for proper tooltip alignment
+        >
+            {tooltip && (
+                <div style={{ display: "flex", alignItems: "center" }}>
+                    {tooltip}
+                    {isHovered && (
+                        <button
+                            onClick={() => onDelete(annotationKey)}
+                            style={{
+                                marginLeft: "8px", // Space between tooltip and button
+                                backgroundColor: "red", // Customize button style
+                                color: "white",
+                                border: "none",
+                                borderRadius: "3px",
+                                cursor: "pointer"
+                            }}
+                        >
+                            X
+                        </button>
+                    )}
+                </div>
+            )}
+            {children}
+        </div>
+    );
+};
+
+/**
+ * Generic location marker
+ */
+
+interface Props {
+    id: string;
+    useColor?: string;
+    tooltip?: ReactNode;
+    onDelete: (annotationKey: string) => void;
+}
+
+const AnnotationMarker = React.forwardRef<HTMLDivElement, Props>(({ id, useColor, tooltip, onDelete}, ref) => {
+    return (
+        <div
+            ref={ref}
+            id={id}
+            className={classNames("mx_Marker", useColor ? `mx_Marker_${useColor}` : "mx_Marker_defaultColor" )}
+        >
+            <OptionalTooltip tooltip={tooltip} annotationKey={id} onDelete={onDelete}>
+                <div className="mx_AnnotationMarker_border">
+                    <LocationIcon className="mx_Marker_icon" />
+                </div>
+            </OptionalTooltip>
+        </div>
+    );
+});
+
+export default AnnotationMarker;