@@ -23,10 +23,7 @@ pnpm add vue pinia maplibre-gl @fortawesome/fontawesome-svg-core @fortawesome/fr
2323
2424``` vue
2525<template>
26- <Layerboard
27- title="My Map App"
28- web-map-id="1596df70df0349e293ceec46a06ccc50"
29- />
26+ <Layerboard title="My Map App" web-map-id="1596df70df0349e293ceec46a06ccc50" />
3027</template>
3128
3229<script setup>
@@ -48,11 +45,7 @@ All layers in a searchable list. Set `show-default-sidebar` to `true` (default)
4845Group layers into collapsible accordions using the sidebar slot:
4946
5047``` 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">
5649 <template #sidebar="{ layers, visibleLayers, toggleLayer, setOpacity }">
5750 <TopicAccordion title="Paving" :expanded="true">
5851 <LayerCheckboxSet
@@ -68,56 +61,56 @@ Group layers into collapsible accordions using the sidebar slot:
6861
6962## Props
7063
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 |
9083
9184### Control Positions
9285
9386All default to sensible positions. Each accepts ` "top-left" | "top-right" | "bottom-left" | "bottom-right" ` .
9487
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" ` |
10497
10598## Events
10699
107- | Event | Payload | Description |
108- | -------| ---------| -------------|
100+ | Event | Payload | Description |
101+ | ---------------- | --------------- | -------------------------------- |
109102| ` 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 |
112105
113106## Slots
114107
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 |
121114
122115### Sidebar Slot Scope
123116
@@ -156,11 +149,11 @@ All components are exported for building custom layouts:
156149
157150``` typescript
158151import {
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
164157 LayerRadioButtonSet , // Radio buttons for mutually exclusive layers
165158} from " @phila/layerboard" ;
166159```
@@ -184,8 +177,8 @@ import type {
184177 LayerboardConfig ,
185178 TopicConfig ,
186179 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
189182} from " @phila/layerboard" ;
190183```
191184
0 commit comments