Use SVG marker icons

app/[lang]/tournois/TournamentMap.tsx

@@ -238,10 +238,10 @@ export default function TournamentMap() {
     const childCount = cluster.getChildCount();
     const children = cluster.getAllChildMarkers();
 
-    // We added the time control to the icon options when creating the marker
+    // We added the time control as the class name when creating the marker
     const timeControlCounts = countBy(
       children,
-      (child: any) => child.options.icon.options.timeControl,
+      (child: any) => child.options.icon.options.className,
     );
 
     const html = `
@@ -289,7 +289,6 @@ export default function TournamentMap() {
             }}
             key={groupId}
             tournamentGroup={tournamentGroup}
-            colour={colours[timeControl]}
           />
         );
       }),

app/[lang]/tournois/TournamentMarker.tsx

@@ -11,6 +11,7 @@ import { last } from "lodash";
 
 import type { BouncingMarker } from "@/leafletTypes";
 import { debouncedHoveredMapTournamentGroupIdAtom } from "@/app/atoms";
+import { TimeControlColours } from "@/app/constants";
 
 export type TournamentMarkerRef = {
   getMarker: () => L.Marker<any>;
@@ -19,13 +20,12 @@ export type TournamentMarkerRef = {
 
 type TournamentMarkerProps = {
   tournamentGroup: Tournament[];
-  colour: string;
 } & Omit<MarkerProps, "position">;
 
 export const TournamentMarker = forwardRef<
   TournamentMarkerRef,
   TournamentMarkerProps
->(({ tournamentGroup, colour, ...markerProps }, ref) => {
+>(({ tournamentGroup, ...markerProps }, ref) => {
   const t = useTranslations("Tournaments");
   const markerRef = useRef<L.Marker<any> | null>(null);
 
@@ -50,15 +50,18 @@ export const TournamentMarker = forwardRef<
 
   const iconOptions = useMemo(
     () =>
-      new L.Icon({
+      new L.DivIcon({
-        iconUrl: `/images/leaflet/marker-icon-2x-${colour}.png`,
+        html: `
-        iconSize: [25, 41],
+          <svg x="0px" y="0px" viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve">
-        iconAnchor: [12, 41],
+            <g><path stroke="#666666" stroke-width="10" fill="${TimeControlColours[timeControl]}" d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8   c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/></g>
-        popupAnchor: [1, -34],
+          </svg>
-
+        `,
-        timeControl,
+        className: timeControl,
+        iconSize: [24, 40],
+        iconAnchor: [12, 40],
+        popupAnchor: [1, -40],
       }),
-    [colour, timeControl],
+    [timeControl],
   );
 
   const startDate = date;

app/constants.ts

@@ -3,6 +3,6 @@ import { TimeControl } from "@/types"
 export const TimeControlColours = {
   [TimeControl.Classic]: "#00ac39",
   [TimeControl.Rapid]: "#0086c7",
-  [TimeControl.Blitz]: "#cec348",
+  [TimeControl.Blitz]: "#ddce20",
-  [TimeControl.Other]: "#d10c3e",
+  [TimeControl.Other]: "#ea5f17",
 }