@phila/layerboard 3.0.0-beta.21 → 3.0.0-beta.23

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 (17) hide show
  1. package/README.md +47 -54
  2. package/dist/components/LayerCheckboxSet.vue.d.ts +1 -0
  3. package/dist/components/LayerLegend.vue.d.ts +7 -0
  4. package/dist/components/LayerOpacitySlider.vue.d.ts +11 -0
  5. package/dist/components/LayerRadioButtonSet.vue.d.ts +1 -0
  6. package/dist/components/LayerStatusIndicators.vue.d.ts +7 -0
  7. package/dist/components/Layerboard.vue.d.ts +5 -0
  8. package/dist/components/MapPanel.vue.d.ts +7 -0
  9. package/dist/components/TopicAccordion.vue.d.ts +2 -0
  10. package/dist/composables/useLayerState.d.ts +16 -0
  11. package/dist/index.js +2 -2
  12. package/dist/index.mjs +1583 -1681
  13. package/dist/layerboard.css +1 -1
  14. package/dist/utils/index.d.ts +2 -0
  15. package/dist/utils/layer-display.d.ts +20 -0
  16. package/dist/utils/url.d.ts +4 -0
  17. package/package.json +2 -2
package/README.md CHANGED
@@ -23,10 +23,7 @@ pnpm add vue pinia maplibre-gl @fortawesome/fontawesome-svg-core @fortawesome/fr
23
23
 
24
24
  ```vue
25
25
  <template>
26
- <Layerboard
27
- title="My Map App"
28
- web-map-id="1596df70df0349e293ceec46a06ccc50"
29
- />
26
+ <Layerboard title="My Map App" web-map-id="1596df70df0349e293ceec46a06ccc50" />
30
27
  </template>
31
28
 
32
29
  <script setup>
@@ -48,11 +45,7 @@ All layers in a searchable list. Set `show-default-sidebar` to `true` (default)
48
45
  Group layers into collapsible accordions using the sidebar slot:
49
46
 
50
47
  ```vue
51
- <Layerboard
52
- title="StreetSmartPHL"
53
- :web-map-id="webMapId"
54
- :show-default-sidebar="false"
55
- >
48
+ <Layerboard title="StreetSmartPHL" :web-map-id="webMapId" :show-default-sidebar="false">
56
49
  <template #sidebar="{ layers, visibleLayers, toggleLayer, setOpacity }">
57
50
  <TopicAccordion title="Paving" :expanded="true">
58
51
  <LayerCheckboxSet
@@ -68,56 +61,56 @@ Group layers into collapsible accordions using the sidebar slot:
68
61
 
69
62
  ## Props
70
63
 
71
- | Prop | Type | Default | Description |
72
- |------|------|---------|-------------|
73
- | `title` | `string` | *required* | App title in header |
74
- | `webMapId` | `string` | *required* | ArcGIS Online WebMap ID |
75
- | `subtitle` | `string` | — | Subtitle in header |
76
- | `themeColor` | `string` | `"#0f4d90"` | Header/footer background color |
77
- | `showDefaultSidebar` | `boolean` | `true` | Show built-in LayerPanel (false for custom sidebar) |
78
- | `sidebarWidth` | `string` | `"30%"` | Sidebar width (CSS units) |
79
- | `sidebarLabel` | `string` | `"Layers"` | Mobile toggle label for sidebar view |
80
- | `mapLabel` | `string` | `"Map"` | Mobile toggle label for map view |
81
- | `fetchMetadata` | `boolean` | `false` | Fetch layer metadata from Carto |
82
- | `tiledLayers` | `TiledLayerConfig[]` | `[]` | ESRI MapServer tiled layers |
83
- | `dataSources` | `DataSourceConfig[]` | `[]` | External API data sources |
84
- | `layerStyleOverrides` | `Record<string, LayerStyleOverride>` | `{}` | Override paint/legend per layer |
85
- | `popupOverrides` | `Record<string, PopupOverride>` | `{}` | Override popup behavior per layer |
86
- | `initialZoom` | `number` | — | Initial map zoom level |
87
- | `initialCenter` | `[number, number]` | — | Initial map center `[lng, lat]` |
88
- | `cyclomediaConfig` | `CyclomediaConfig` | — | Cyclomedia street-level imagery config |
89
- | `pictometryCredentials` | `PictometryCredentials` | — | Pictometry oblique imagery credentials |
64
+ | Prop | Type | Default | Description |
65
+ | ----------------------- | ------------------------------------ | ----------- | --------------------------------------------------- |
66
+ | `title` | `string` | _required_ | App title in header |
67
+ | `webMapId` | `string` | _required_ | ArcGIS Online WebMap ID |
68
+ | `subtitle` | `string` | — | Subtitle in header |
69
+ | `themeColor` | `string` | `"#0f4d90"` | Header/footer background color |
70
+ | `showDefaultSidebar` | `boolean` | `true` | Show built-in LayerPanel (false for custom sidebar) |
71
+ | `sidebarWidth` | `string` | `"30%"` | Sidebar width (CSS units) |
72
+ | `sidebarLabel` | `string` | `"Layers"` | Mobile toggle label for sidebar view |
73
+ | `mapLabel` | `string` | `"Map"` | Mobile toggle label for map view |
74
+ | `fetchMetadata` | `boolean` | `false` | Fetch layer metadata from Carto |
75
+ | `tiledLayers` | `TiledLayerConfig[]` | `[]` | ESRI MapServer tiled layers |
76
+ | `dataSources` | `DataSourceConfig[]` | `[]` | External API data sources |
77
+ | `layerStyleOverrides` | `Record<string, LayerStyleOverride>` | `{}` | Override paint/legend per layer |
78
+ | `popupOverrides` | `Record<string, PopupOverride>` | `{}` | Override popup behavior per layer |
79
+ | `initialZoom` | `number` | — | Initial map zoom level |
80
+ | `initialCenter` | `[number, number]` | — | Initial map center `[lng, lat]` |
81
+ | `cyclomediaConfig` | `CyclomediaConfig` | — | Cyclomedia street-level imagery config |
82
+ | `pictometryCredentials` | `PictometryCredentials` | — | Pictometry oblique imagery credentials |
90
83
 
91
84
  ### Control Positions
92
85
 
93
86
  All default to sensible positions. Each accepts `"top-left" | "top-right" | "bottom-left" | "bottom-right"`.
94
87
 
95
- | Prop | Default |
96
- |------|---------|
97
- | `basemapControlPosition` | `"top-right"` |
98
- | `navigationControlPosition` | `"bottom-right"` |
99
- | `geolocationControlPosition` | `"bottom-right"` |
100
- | `searchControlPosition` | `"top-left"` |
101
- | `drawControlPosition` | `"bottom-left"` (or `null` to remove) |
102
- | `cyclomediaButtonPosition` | `"top-right"` |
103
- | `pictometryButtonPosition` | `"top-right"` |
88
+ | Prop | Default |
89
+ | ---------------------------- | ------------------------------------- |
90
+ | `basemapControlPosition` | `"top-right"` |
91
+ | `navigationControlPosition` | `"bottom-right"` |
92
+ | `geolocationControlPosition` | `"bottom-right"` |
93
+ | `searchControlPosition` | `"top-left"` |
94
+ | `drawControlPosition` | `"bottom-left"` (or `null` to remove) |
95
+ | `cyclomediaButtonPosition` | `"top-right"` |
96
+ | `pictometryButtonPosition` | `"top-right"` |
104
97
 
105
98
  ## Events
106
99
 
107
- | Event | Payload | Description |
108
- |-------|---------|-------------|
100
+ | Event | Payload | Description |
101
+ | ---------------- | --------------- | -------------------------------- |
109
102
  | `configs-loaded` | `LayerConfig[]` | Layer configs loaded from WebMap |
110
- | `load-error` | `string` | Error message on load failure |
111
- | `zoom` | `number` | Zoom level changed |
103
+ | `load-error` | `string` | Error message on load failure |
104
+ | `zoom` | `number` | Zoom level changed |
112
105
 
113
106
  ## Slots
114
107
 
115
- | Slot | Scope | Description |
116
- |------|-------|-------------|
117
- | `header` | — | Replace default header |
118
- | `sidebar` | layer state + methods (see below) | Replace default LayerPanel |
119
- | `footer` | `{ openModal, closeModal, isModalOpen }` | Custom footer content |
120
- | `modal` | `{ closeModal }` | Modal content |
108
+ | Slot | Scope | Description |
109
+ | --------- | ---------------------------------------- | -------------------------- |
110
+ | `header` | — | Replace default header |
111
+ | `sidebar` | layer state + methods (see below) | Replace default LayerPanel |
112
+ | `footer` | `{ openModal, closeModal, isModalOpen }` | Custom footer content |
113
+ | `modal` | `{ closeModal }` | Modal content |
121
114
 
122
115
  ### Sidebar Slot Scope
123
116
 
@@ -156,11 +149,11 @@ All components are exported for building custom layouts:
156
149
 
157
150
  ```typescript
158
151
  import {
159
- Layerboard, // Main framework component
160
- LayerPanel, // Flat layer list with search/legends/opacity
161
- MapPanel, // MapLibre map with layer rendering
162
- TopicAccordion, // Collapsible accordion for topic grouping
163
- LayerCheckboxSet, // Checkbox controls for layer toggling
152
+ Layerboard, // Main framework component
153
+ LayerPanel, // Flat layer list with search/legends/opacity
154
+ MapPanel, // MapLibre map with layer rendering
155
+ TopicAccordion, // Collapsible accordion for topic grouping
156
+ LayerCheckboxSet, // Checkbox controls for layer toggling
164
157
  LayerRadioButtonSet, // Radio buttons for mutually exclusive layers
165
158
  } from "@phila/layerboard";
166
159
  ```
@@ -184,8 +177,8 @@ import type {
184
177
  LayerboardConfig,
185
178
  TopicConfig,
186
179
  FeatureFlags,
187
- CyclomediaConfig, // re-exported from @phila/phila-ui-map-core
188
- PictometryCredentials, // re-exported from @phila/phila-ui-map-core
180
+ CyclomediaConfig, // re-exported from @phila/phila-ui-map-core
181
+ PictometryCredentials, // re-exported from @phila/phila-ui-map-core
189
182
  } from "@phila/layerboard";
190
183
  ```
191
184
 
package/dist/components/LayerCheckboxSet.vue.d.ts CHANGED
@@ -32,5 +32,6 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
32
32
  showOpacity: boolean;
33
33
  showLegend: boolean;
34
34
  loadingLayerIds: Set<string>;
35
+ groupLabel: string;
35
36
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLFieldSetElement>;
36
37
  export default _default;
package/dist/components/LayerLegend.vue.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { LegendItem } from '../types/layer';
2
+ type __VLS_Props = {
3
+ items: LegendItem[];
4
+ label: string;
5
+ };
6
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLUListElement>;
7
+ export default _default;
package/dist/components/LayerOpacitySlider.vue.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ type __VLS_Props = {
2
+ layerId: string;
3
+ layerName: string;
4
+ opacity: number;
5
+ };
6
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
7
+ "update:opacity": (opacity: number) => any;
8
+ }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
9
+ "onUpdate:opacity"?: ((opacity: number) => any) | undefined;
10
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
11
+ export default _default;
package/dist/components/LayerRadioButtonSet.vue.d.ts CHANGED
@@ -34,6 +34,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
34
34
  showOpacity: boolean;
35
35
  showLegend: boolean;
36
36
  loadingLayerIds: Set<string>;
37
+ groupLabel: string;
37
38
  groupName: string;
38
39
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
39
40
  export default _default;
package/dist/components/LayerStatusIndicators.vue.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ type __VLS_Props = {
2
+ loading: boolean;
3
+ error: string | null;
4
+ unavailable: boolean;
5
+ };
6
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
7
+ export default _default;
package/dist/components/Layerboard.vue.d.ts CHANGED
@@ -298,6 +298,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
298
298
  "onLoad-error"?: ((error: string) => any) | undefined;
299
299
  }>, {
300
300
  tiledLayers: TiledLayerConfig[];
301
+ cyclomediaConfig: CyclomediaConfig;
302
+ pictometryCredentials: PictometryCredentials;
301
303
  basemapControlPosition: ControlPosition;
302
304
  navigationControlPosition: ControlPosition;
303
305
  geolocationControlPosition: ControlPosition;
@@ -305,6 +307,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
305
307
  drawControlPosition: ControlPosition | null;
306
308
  cyclomediaButtonPosition: ControlPosition;
307
309
  pictometryButtonPosition: ControlPosition;
310
+ initialZoom: number;
311
+ initialCenter: [number, number];
312
+ subtitle: string;
308
313
  themeColor: string;
309
314
  showDefaultSidebar: boolean;
310
315
  sidebarWidth: string;
package/dist/components/MapPanel.vue.d.ts CHANGED
@@ -32,6 +32,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
32
32
  onLayerLoading?: ((layerId: string, loading: boolean) => any) | undefined;
33
33
  onLayerError?: ((layerId: string, error: string | null) => any) | undefined;
34
34
  }>, {
35
+ tiledLayers: TiledLayerConfig[];
36
+ visibleTiledLayers: Set<string>;
37
+ tiledLayerOpacities: Record<string, number>;
38
+ cyclomediaConfig: CyclomediaConfig;
39
+ pictometryCredentials: PictometryCredentials;
35
40
  basemapControlPosition: ControlPosition;
36
41
  navigationControlPosition: ControlPosition;
37
42
  geolocationControlPosition: ControlPosition;
@@ -39,6 +44,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
39
44
  drawControlPosition: ControlPosition | null;
40
45
  cyclomediaButtonPosition: ControlPosition;
41
46
  pictometryButtonPosition: ControlPosition;
47
+ initialZoom: number;
48
+ initialCenter: [number, number];
42
49
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
43
50
  mapRef: any;
44
51
  }, HTMLDivElement>;
package/dist/components/TopicAccordion.vue.d.ts CHANGED
@@ -27,8 +27,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
27
27
  onToggle?: ((expanded: boolean) => any) | undefined;
28
28
  onLayerChange?: ((layerId: string, visible: boolean) => any) | undefined;
29
29
  }>, {
30
+ icon: string;
30
31
  expanded: boolean;
31
32
  layerIds: string[];
33
+ headerClass: string;
32
34
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
33
35
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
34
36
  export default _default;
package/dist/composables/useLayerState.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { LayerConfig } from '../types/layer';
2
+ interface LayerStateProps {
3
+ visibleLayerIds: Set<string>;
4
+ layerOpacities: Record<string, number>;
5
+ loadingLayerIds: Set<string>;
6
+ layerErrors: Record<string, string>;
7
+ currentZoom: number;
8
+ }
9
+ export declare function useLayerState(getProps: () => LayerStateProps): {
10
+ isVisible: (layerId: string) => boolean;
11
+ getLayerOpacity: (layerId: string) => number;
12
+ isLayerLoading: (layerId: string) => boolean;
13
+ getLayerError: (layerId: string) => string | null;
14
+ isLayerAvailableAtZoom: (config: LayerConfig) => boolean;
15
+ };
16
+ export {};