refactor: Optimize icon loading

Author: TAEMBO

src/components/LeafletMap.svelte

@@ -47,9 +47,9 @@
                 const marker = layer
                     .bindPopup(properties.popup)
                     .setIcon(icon({
-                        iconUrl: "/icons/" + properties.icon.icon,
-                        iconSize: [properties.icon.dimension, properties.icon.dimension],
-                        iconAnchor: [properties.icon.dimension / 2, properties.icon.dimension / 2],
+                        iconUrl: "/icons/" + properties.icon,
+                        iconSize: [12, 12],
+                        iconAnchor: [6, 6],
                         popupAnchor: [0, -10],
                     }));
 

src/lib/utils/icons.ts

@@ -1,286 +1,58 @@
-export const icons = {
-    default: {
-        icon: "default.png",
-        desc: "No icon",
-        dimension: 12
-    },
-    harvesters: {
-        icon: "harvester.png",
-        desc: "Harvester",
-        dimension: 12
-    },
-    forageharvesters: {
-        icon: "harvester.png",
-        desc: "Forage Harvester",
-        dimension: 12
-    },
-    foragewagon: {
-        icon: "trailer.png",
-        desc: "Loading Wagon",
-        dimension: 12
-    },
-    tractorsl: {
-        icon: "vehicle.png",
-        desc: "Large Tractors",
-        dimension: 12
-    },
-    tractorsm: {
-        icon: "vehicle.png",
-        desc: "Medium Tractors",
-        dimension: 12
-    },
-    tractorss: {
-        icon: "vehicle.png",
-        desc: "Small Tractors",
-        dimension: 12
-    },
-    miscvehicles: {
-        icon: "ropa.png",
-        desc: "Misc. Vehicles",
-        dimension: 12
-    },
-    windrower: {
-        icon: "tool.png",
-        desc: "Windrowers",
-        dimension: 12
-    },
-    planters: {
-        icon: "tool.png",
-        desc: "Planters",
-        dimension: 12
-    },
-    trailer: {
-        icon: "trailer.png",
-        desc: "Traielrs",
-        dimension: 12
-    },
-    car: {
-        icon: "vehicle.png",
-        desc: "Cars",
-        dimension: 12
-    },
-    trucks: {
-        icon: "vehicle.png",
-        desc: "Trucks",
-        dimension: 12
-    },
-    cultivator: {
-        icon: "tool.png",
-        desc: "Cultivators",
-        dimension: 12
-    },
-    fertilizerspreaders: {
-        icon: "tool.png",
-        desc: "Fertilizer Spreaders",
-        dimension: 12
-    },
-    forklifts: {
-        icon: "vehicle.png",
-        desc: "Forklifts",
-        dimension: 12
-    },
-    watertrailer: {
-        icon: "trailer.png",
-        desc: "Water Trailers",
-        dimension: 12
-    },
-    seeders: {
-        icon: "tool.png",
-        desc: "Seeders",
-        dimension: 12
-    },
-    traintrailer: {
-        icon: "train.png",
-        desc: "Train carts",
-        dimension: 12
-    },
-    traintimbertrailer: {
-        icon: "train.png",
-        desc: "Train timber carts",
-        dimension: 12
-    },
-    bigbags: {
-        icon: "crate.png",
-        desc: "Bigbags",
-        dimension: 16
-    },
-    bigbagpallets: {
-        icon: "crate.png",
-        desc: "Bigbag Pallets",
-        dimension: 16
-    },
-    pallets: {
-        icon: "crate.png",
-        desc: "Pallets",
-        dimension: 16
-    },
-    wheelloadertools: {
-        icon: "tool.png",
-        desc: "Wheel loader tools",
-        dimension: 12
-    },
-    wheelloadervehicles: {
-        icon: "vehicle.png",
-        desc: "Wheel loaders",
-        dimension: 12
-    },
-    teleloadertools: {
-        icon: "tool.png",
-        desc: "Telehandler tools",
-        dimension: 12
-    },
-    teleloadervehicles: {
-        icon: "vehicle.png",
-        desc: "Telehandlers",
-        dimension: 12
-    },
-    frontloadertools: {
-        icon: "tool.png",
-        desc: "Front-loader tools",
-        dimension: 12
-    },
-    skidsteertools: {
-        icon: "tool.png",
-        desc: "Skidsteer tools",
-        dimension: 12
-    },
-    skidsteervehicles: {
-        icon: "vehicle.png",
-        desc: "Skidsteers",
-        dimension: 12
-    },
-    forageharvestercutters: {
-        icon: "tool.png",
-        desc: "Forage Harvester Cutters",
-        dimension: 12
-    },
-    mowervehicles: {
-        icon: "mower.png",
-        desc: "Self-propelled Mowers",
-        dimension: 12
-    },
-    selfpropelledsprayer: {
-        icon: "vehicle.png",
-        desc: "Self-propelled Sprayers",
-        dimension: 12
-    },
-    augerwagon: {
-        icon: "trailer.png",
-        desc: "Auger wagons",
-        dimension: 12
-    },
-    baleloaders: {
-        icon: "tool.png",
-        desc: "Bale loaders",
-        dimension: 12
-    },
-    baler: {
-        icon: "tool.png",
-        desc: "Balers",
-        dimension: 12
-    },
-    balewrapper: {
-        icon: "tool.png",
-        desc: "Bale Wrappers",
-        dimension: 12
-    },
-    cutter: {
-        icon: "tool.png",
-        desc: "Combine Harvester Cutters",
-        dimension: 12
-    },
-    handtoolmower: {
-        icon: "mower.png",
-        desc: "Hand-tool Mowers",
-        dimension: 12
-    },
-    plows: {
-        icon: "tool.png",
-        desc: "Plows",
-        dimension: 12
-    },
-    weights: {
-        icon: "tool.png",
-        desc: "Weights",
-        dimension: 12
-    },
-    cuttertrailers: {
-        icon: "trailer.png",
-        desc: "Cutter trailers",
-        dimension: 12
-    },
-    rollers: {
-        icon: "tool.png",
-        desc: "Field rollers",
-        dimension: 12
-    },
-    attachablefrontloader: {
-        icon: "tool.png",
-        desc: "Front-loaders",
-        dimension: 12
-    },
-    mower: {
-        icon: "mower.png",
-        desc: "Mowers",
-        dimension: 12
-    },
-    tedders: {
-        icon: "tool.png",
-        desc: "Tedders",
-        dimension: 12
-    },
-    slurrytanks: {
-        icon: "tool.png",
-        desc: "Slurry Tankers",
-        dimension: 12
-    },
-    slurryvehicles: {
-        icon: "vehicle.png",
-        desc: "Slurry Vehicles",
-        dimension: 12
-    },
-    drivablemixerwagon: {
-        icon: "vehicle.png",
-        desc: "Self-propelled TMR Mixers",
-        dimension: 12
-    },
-    grapetools: {
-        icon: "tool.png",
-        desc: "Grape tools",
-        dimension: 12
-    },
-    vineharvester: {
-        icon: "harvester.png",
-        desc: "Vineyard Harvesters",
-        dimension: 12
-    },
-    ixerwagon: {
-        icon: "tool.png",
-        desc: "Mixer Wagons",
-        dimension: 12
-    },
-    ranetrailer: {
-        icon: "trailer.png",
-        desc: "Forestry Trailers",
-        dimension: 12
-    },
-    tumpcutter: {
-        icon: "tool.png",
-        desc: "Stump Cutters",
-        dimension: 12
-    },
-    misc: {
-        icon: "ropa.png",
-        desc: "Misc.",
-        dimension: 12
-    },
-    controller: {
-        icon: "controller.png",
-        desc: "Player",
-        dimension: 12
-    }
-} as Record<string, {
-    icon: string;
-    desc: string;
-    dimension: number;
-}>;
+export const icons: Record<string, string> = {
+    default: "default.png",
+    harvesters: "harvester.png",
+    forageharvesters: "harvester.png",
+    foragewagon: "trailer.png",
+    tractorsl: "vehicle.png",
+    tractorsm: "vehicle.png",
+    tractorss: "vehicle.png",
+    miscvehicles: "ropa.png",
+    windrower: "tool.png",
+    planters: "tool.png",
+    trailer: "trailer.png",
+    car: "vehicle.png",
+    trucks: "vehicle.png",
+    cultivator: "tool.png",
+    fertilizerspreaders: "tool.png",
+    forklifts: "vehicle.png",
+    watertrailer: "trailer.png",
+    seeders: "tool.png",
+    traintrailer: "train.png",
+    traintimbertrailer: "train.png",
+    bigbags: "crate.png",
+    bigbagpallets: "crate.png",
+    pallets: "crate.png",
+    wheelloadertools: "tool.png",
+    wheelloadervehicles: "vehicle.png",
+    teleloadertools: "tool.png",
+    teleloadervehicles: "vehicle.png",
+    frontloadertools: "tool.png",
+    skidsteertools: "tool.png",
+    skidsteervehicles: "vehicle.png",
+    forageharvestercutters: "tool.png",
+    mowervehicles: "mower.png",
+    selfpropelledsprayer: "vehicle.png",
+    augerwagon: "trailer.png",
+    baleloaders: "tool.png",
+    baler: "tool.png",
+    balewrapper: "tool.png",
+    cutter: "tool.png",
+    handtoolmower: "mower.png",
+    plows: "tool.png",
+    weights: "tool.png",
+    cuttertrailers: "trailer.png",
+    rollers: "tool.png",
+    attachablefrontloader: "tool.png",
+    mower: "mower.png",
+    tedders: "tool.png",
+    slurrytanks: "tool.png",
+    slurryvehicles: "vehicle.png",
+    drivablemixerwagon: "vehicle.png",
+    grapetools: "tool.png",
+    vineharvester: "harvester.png",
+    ixerwagon: "tool.png",
+    ranetrailer: "trailer.png",
+    tumpcutter: "tool.png",
+    misc: "ropa.png",
+    controller: "controller.png"
+};

src/typings.ts

@@ -91,10 +91,6 @@ export interface LeafletVehicle {
     type: string;
     category: string;
     controller?: string;
-    icon: {
-        icon: string;
-        desc: string;
-        dimension: number;
-    };
+    icon: string;
     popup: string;
 }