@sjvair/monitor-map 4.0.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/lib/assets/icons/ozone/ozone-08-sunrise-haze.svg +1 -0
  2. package/dist/lib/assets/icons/pm25/pm25-02-particle-field.svg +1 -0
  3. package/dist/lib/monitors/monitors-map-integration.svelte.js +2 -2
  4. package/dist/lib/options/menus/PollutantMenu.svelte +19 -9
  5. package/package.json +1 -1
  6. package/src/lib/assets/icons/ozone/ozone-08-sunrise-haze.svg +1 -0
  7. package/src/lib/assets/icons/pm25/pm25-02-particle-field.svg +1 -0
  8. package/src/lib/monitors/monitors-map-integration.svelte.ts +2 -2
  9. package/src/lib/options/menus/PollutantMenu.svelte +19 -9
package/dist/lib/assets/icons/ozone/ozone-08-sunrise-haze.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15a6 6 0 0 1 12 0" stroke="#F2A93B" fill="none"/><path d="M20.37 13.52L21.85 13.26M17.46 8.49L18.43 7.34M12.00 6.50L12.00 5.00M6.54 8.49L5.57 7.34M3.63 13.52L2.15 13.26" stroke="#F2A93B" fill="none"/><path d="M2 15h20M5 18.5h14M8.5 22h7" stroke="#5B6770" fill="none"/></svg>
package/dist/lib/assets/icons/pm25/pm25-02-particle-field.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2" fill="#6B5B4E"/><circle cx="16.5" cy="5" r="1.5" fill="#9C8878"/><circle cx="11" cy="12" r="2.5" fill="#6B5B4E"/><circle cx="5" cy="18" r="1.5" fill="#9C8878"/><circle cx="17.5" cy="17.5" r="2" fill="#6B5B4E"/></svg>
package/dist/lib/monitors/monitors-map-integration.svelte.js CHANGED
@@ -29,8 +29,8 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
29
29
  airgradient: new MapDisplayOption("AirGradient", true, this.icons.get("outside-display-circle")),
30
30
  purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-circle")),
31
31
  vozbox: new MapDisplayOption("VOZbox", true, this.icons.get("outside-display-circle")),
32
- inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-square")),
33
- inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-square"))
32
+ inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-circle")),
33
+ inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-circle"))
34
34
  }));
35
35
  /** Set by the app to handle navigation when a monitor is clicked. Receives the monitor ID. */
36
36
  onMonitorClick = null;
package/dist/lib/options/menus/PollutantMenu.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import { BanIcon, HazeIcon, SunDimIcon } from "@lucide/svelte";
2
+ import { BanIcon } from "@lucide/svelte";
3
3
  import OptionsMenu from "../OptionsMenu.svelte";
4
4
  import RadioRow from "../rows/RadioRow.svelte";
5
5
  import { useOptionsMenus } from "../options-state.svelte.js";
@@ -11,14 +11,18 @@
11
11
  } from "../pollutant-param";
12
12
  import { monitorsManager } from "../../monitors/monitors.svelte";
13
13
  import { monitorsMapIntegration } from "../../monitors/monitors-map-integration.svelte";
14
+ import pm25Icon from "../../assets/icons/pm25/pm25-02-particle-field.svg";
15
+ import ozoneIcon from "../../assets/icons/ozone/ozone-08-sunrise-haze.svg";
14
16
 
15
17
  interface PollutantOption {
16
18
  value: PollutantSelection;
17
19
  label: string;
18
20
  unit?: string;
19
21
  help?: string;
20
- icon: typeof HazeIcon;
21
- color: string;
22
+ /** Lucide component, or an image URL for multi-color SVG icons */
23
+ icon: typeof BanIcon | string;
24
+ /** Tint for Lucide icons; image icons carry their own colors */
25
+ color?: string;
22
26
  }
23
27
 
24
28
  const options: Array<PollutantOption> = [
@@ -27,16 +31,14 @@
27
31
  label: "PM2.5",
28
32
  unit: "µg/m³",
29
33
  help: "Fine particles from smoke, dust, and vehicle exhaust.",
30
- icon: HazeIcon,
31
- color: "#bc8f8f"
34
+ icon: pm25Icon
32
35
  },
33
36
  {
34
37
  value: "o3",
35
38
  label: "Ozone",
36
39
  unit: "ppb",
37
40
  help: "Ground-level gas that forms in sunlight on hot days.",
38
- icon: SunDimIcon,
39
- color: "#daa520"
41
+ icon: ozoneIcon
40
42
  },
41
43
  { value: "none", label: "None", icon: BanIcon, color: "#778899" }
42
44
  ];
@@ -57,9 +59,17 @@
57
59
  }
58
60
  </script>
59
61
 
62
+ {#snippet pollutantIcon(option: PollutantOption, size: number)}
63
+ {#if typeof option.icon === "string"}
64
+ <img src={option.icon} alt="" width={size} height={size} class="shrink-0" />
65
+ {:else}
66
+ <option.icon {size} color={option.color} />
67
+ {/if}
68
+ {/snippet}
69
+
60
70
  <OptionsMenu id="pollutant" label={selected.label}>
61
71
  {#snippet icon()}
62
- <selected.icon size={20} color={selected.color} />
72
+ {@render pollutantIcon(selected, 20)}
63
73
  {/snippet}
64
74
  {#each options as option, i (option.value)}
65
75
  {#if i > 0}<hr class="my-1 border-gray-200" />{/if}
@@ -72,7 +82,7 @@
72
82
  onselect={() => select(option.value)}
73
83
  >
74
84
  {#snippet icon()}
75
- <option.icon size={18} color={option.color} />
85
+ {@render pollutantIcon(option, 18)}
76
86
  {/snippet}
77
87
  </RadioRow>
78
88
  {/each}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sjvair/monitor-map",
3
3
  "description": "SJVAir's interactive monitor map",
4
- "version": "4.0.0",
4
+ "version": "4.0.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/SJVAir/monitor-map"
package/src/lib/assets/icons/ozone/ozone-08-sunrise-haze.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15a6 6 0 0 1 12 0" stroke="#F2A93B" fill="none"/><path d="M20.37 13.52L21.85 13.26M17.46 8.49L18.43 7.34M12.00 6.50L12.00 5.00M6.54 8.49L5.57 7.34M3.63 13.52L2.15 13.26" stroke="#F2A93B" fill="none"/><path d="M2 15h20M5 18.5h14M8.5 22h7" stroke="#5B6770" fill="none"/></svg>
package/src/lib/assets/icons/pm25/pm25-02-particle-field.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2" fill="#6B5B4E"/><circle cx="16.5" cy="5" r="1.5" fill="#9C8878"/><circle cx="11" cy="12" r="2.5" fill="#6B5B4E"/><circle cx="5" cy="18" r="1.5" fill="#9C8878"/><circle cx="17.5" cy="17.5" r="2" fill="#6B5B4E"/></svg>
package/src/lib/monitors/monitors-map-integration.svelte.ts CHANGED
@@ -44,8 +44,8 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
44
44
  ),
45
45
  purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-circle")),
46
46
  vozbox: new MapDisplayOption("VOZbox", true, this.icons.get("outside-display-circle")),
47
- inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-square")),
48
- inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-square"))
47
+ inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-circle")),
48
+ inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-circle"))
49
49
  }));
50
50
 
51
51
  /** Set by the app to handle navigation when a monitor is clicked. Receives the monitor ID. */
package/src/lib/options/menus/PollutantMenu.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import { BanIcon, HazeIcon, SunDimIcon } from "@lucide/svelte";
2
+ import { BanIcon } from "@lucide/svelte";
3
3
  import OptionsMenu from "../OptionsMenu.svelte";
4
4
  import RadioRow from "../rows/RadioRow.svelte";
5
5
  import { useOptionsMenus } from "../options-state.svelte.js";
@@ -11,14 +11,18 @@
11
11
  } from "../pollutant-param";
12
12
  import { monitorsManager } from "$lib/monitors/monitors.svelte";
13
13
  import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
14
+ import pm25Icon from "$lib/assets/icons/pm25/pm25-02-particle-field.svg";
15
+ import ozoneIcon from "$lib/assets/icons/ozone/ozone-08-sunrise-haze.svg";
14
16
 
15
17
  interface PollutantOption {
16
18
  value: PollutantSelection;
17
19
  label: string;
18
20
  unit?: string;
19
21
  help?: string;
20
- icon: typeof HazeIcon;
21
- color: string;
22
+ /** Lucide component, or an image URL for multi-color SVG icons */
23
+ icon: typeof BanIcon | string;
24
+ /** Tint for Lucide icons; image icons carry their own colors */
25
+ color?: string;
22
26
  }
23
27
 
24
28
  const options: Array<PollutantOption> = [
@@ -27,16 +31,14 @@
27
31
  label: "PM2.5",
28
32
  unit: "µg/m³",
29
33
  help: "Fine particles from smoke, dust, and vehicle exhaust.",
30
- icon: HazeIcon,
31
- color: "#bc8f8f"
34
+ icon: pm25Icon
32
35
  },
33
36
  {
34
37
  value: "o3",
35
38
  label: "Ozone",
36
39
  unit: "ppb",
37
40
  help: "Ground-level gas that forms in sunlight on hot days.",
38
- icon: SunDimIcon,
39
- color: "#daa520"
41
+ icon: ozoneIcon
40
42
  },
41
43
  { value: "none", label: "None", icon: BanIcon, color: "#778899" }
42
44
  ];
@@ -57,9 +59,17 @@
57
59
  }
58
60
  </script>
59
61
 
62
+ {#snippet pollutantIcon(option: PollutantOption, size: number)}
63
+ {#if typeof option.icon === "string"}
64
+ <img src={option.icon} alt="" width={size} height={size} class="shrink-0" />
65
+ {:else}
66
+ <option.icon {size} color={option.color} />
67
+ {/if}
68
+ {/snippet}
69
+
60
70
  <OptionsMenu id="pollutant" label={selected.label}>
61
71
  {#snippet icon()}
62
- <selected.icon size={20} color={selected.color} />
72
+ {@render pollutantIcon(selected, 20)}
63
73
  {/snippet}
64
74
  {#each options as option, i (option.value)}
65
75
  {#if i > 0}<hr class="my-1 border-gray-200" />{/if}
@@ -72,7 +82,7 @@
72
82
  onselect={() => select(option.value)}
73
83
  >
74
84
  {#snippet icon()}
75
- <option.icon size={18} color={option.color} />
85
+ {@render pollutantIcon(option, 18)}
76
86
  {/snippet}
77
87
  </RadioRow>
78
88
  {/each}