add name icon

vatger · Jul 15, 2023 · c613fff · c613fff
1 parent 9269dd8
commit c613fff
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/frontend/src/components/Markers.tsx b/frontend/src/components/Markers.tsx
@@ -64,18 +64,32 @@ function Markers({ conditions }: { conditions: WaypointRecord[] }) {
                     if (condition.drawn) {
                         return (
                             <>
+                                <Marker key={`${waypoint.name}`} position={[latitude, longitude]} icon={MarkerNameWidget(waypoint.name)} eventHandlers={{ click: () => handleMarkerClick(waypoint.name) }} />
                                 <Marker key={`${waypoint.name}-marker`} position={[latitude, longitude]} icon={MarkerIcon} eventHandlers={{ click: () => handleMarkerClick(waypoint.name) }} />
                                 <Marker key={`${waypoint.name}-table`} position={[latitude, longitude]} icon={MarkerConditionTable(condition, zoom)} eventHandlers={{ click: () => handleMarkerClick(waypoint.name) }} />
                             </>
                         );
                     }
 
-                    return <Marker key={waypoint.name} position={[latitude, longitude]} icon={MarkerIcon} eventHandlers={{ click: () => handleMarkerClick(waypoint.name) }} />;
+                    return (
+                        <>
+                            <Marker key={`${waypoint.name}`} position={[latitude, longitude]} icon={MarkerNameWidget(waypoint.name)} eventHandlers={{ click: () => handleMarkerClick(waypoint.name) }} />;
+                            <Marker key={`${waypoint.name}-marker`} position={[latitude, longitude]} icon={MarkerIcon} eventHandlers={{ click: () => handleMarkerClick(waypoint.name) }} />{' '}
+                        </>
+                    );
                 })}
         </>
     );
 }
 
+function MarkerNameWidget(name: string) {
+    return new DivIcon({
+        className: 'Marker',
+        iconAnchor: [-10, 20],
+        html: renderToStaticMarkup(<span style={{ fontWeight: 'normal', fontSize: 13 }}>{name}</span>),
+    });
+}
+
 function MarkerConditionTable(condition: WaypointRecord, zoom: number) {
     return new DivIcon({
         className: 'custom-icon',