{"_id":"@drecchia/maplibre-layer-control","_rev":"4-2b9ff159951b93a0d01cab0916e16c8f","name":"@drecchia/maplibre-layer-control","dist-tags":{"latest":"2.1.0"},"versions":{"1.0.0":{"name":"@drecchia/maplibre-layer-control","version":"1.0.0","keywords":["layer","control","maplibre","vanillajs"],"author":{"name":"Danilo T Recchia"},"license":"CC-BY-NC-4.0","_id":"@drecchia/maplibre-layer-control@1.0.0","maintainers":[{"name":"drecchia","email":"ciscomp@gmail.com"}],"homepage":"https://github.com/drecchia/maplibre-layer-control#readme","bugs":{"url":"https://github.com/drecchia/maplibre-layer-control/issues"},"dist":{"shasum":"99a0b6d6871c0652b1cc3d1af43328c1029cdf82","tarball":"https://registry.npmjs.org/@drecchia/maplibre-layer-control/-/maplibre-layer-control-1.0.0.tgz","fileCount":4,"integrity":"sha512-9uS4MnlW4gFn/bSlrN6rieASLS+STBBrreLRPwGAeO9q1o1FMkSwgGt0xVsJ4r7XZH1tnH5mmX1tTzYHzoFh9Q==","signatures":[{"sig":"MEUCIGD7EXir6KwB+4Y8szqB7RpCUAiAaphvpXjNpp9rq8ePAiEA6aXWm75q/+n5KBx58NpE3/aDgEsxWF495nk+21KeYD0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34428},"main":"dist/js/all.min.js","gitHead":"5239c6a50c53641afa0c528bb9cdfc60b3d3494a","scripts":{"build":"gulp default"},"_npmUser":{"name":"drecchia","email":"ciscomp@gmail.com"},"repository":{"url":"git+https://github.com/drecchia/maplibre-layer-control.git","type":"git"},"_npmVersion":"10.2.3","description":"MapLibre Layer Control, the best independent layer control tool.","directories":{},"_nodeVersion":"20.10.0","_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.2","gulp-concat":"^2.6.1","gulp-uglify":"^3.0.2","gulp-postcss":"^10.0.0","gulp-clean-css":"^4.3.0","postcss-nested":"^7.0.2","gulp-autoprefixer":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/maplibre-layer-control_1.0.0_1755365870111_0.03266128553375447","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0":{"name":"@drecchia/maplibre-layer-control","version":"1.1.0","keywords":["layer","control","maplibre","vanillajs"],"author":{"name":"Danilo T Recchia"},"license":"CC-BY-NC-4.0","_id":"@drecchia/maplibre-layer-control@1.1.0","maintainers":[{"name":"drecchia","email":"ciscomp@gmail.com"}],"homepage":"https://github.com/drecchia/maplibre-layer-control#readme","bugs":{"url":"https://github.com/drecchia/maplibre-layer-control/issues"},"dist":{"shasum":"9bbb2cc973067965b93c19c174b22cead11a5c92","tarball":"https://registry.npmjs.org/@drecchia/maplibre-layer-control/-/maplibre-layer-control-1.1.0.tgz","fileCount":4,"integrity":"sha512-lvP6BkY06474Sdn2yL29uxQ80UsUxbS6Cgn7ApmQRsuDsu7XzlBKAlEatNFfSfJmVB0E9dCb/8h4B0l8kZRndA==","signatures":[{"sig":"MEYCIQDC88WTMCvxXwCfNIsr+sjyRMA0WyUp4p9xN2YE0ULhJAIhAMo1qglHuSRBC6IKqI1iFzGyqm5BQdC6bEJCoAqhHeAL","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42710},"main":"dist/js/all.min.js","gitHead":"d62cf9dbea9c6f92b8ef4eb8f464e489d5c051aa","scripts":{"build":"gulp default"},"_npmUser":{"name":"drecchia","email":"ciscomp@gmail.com"},"repository":{"url":"git+https://github.com/drecchia/maplibre-layer-control.git","type":"git"},"_npmVersion":"10.2.3","description":"MapLibre Layer Control, the best independent layer control tool.","directories":{},"_nodeVersion":"20.10.0","_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.2","gulp-concat":"^2.6.1","gulp-uglify":"^3.0.2","gulp-postcss":"^10.0.0","gulp-clean-css":"^4.3.0","postcss-nested":"^7.0.2","gulp-autoprefixer":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/maplibre-layer-control_1.1.0_1755461201479_0.5818438209378074","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.1.0":{"name":"@drecchia/maplibre-layer-control","version":"2.1.0","keywords":["layer","control","maplibre","vanillajs"],"author":{"name":"Danilo T Recchia"},"license":"CC-BY-NC-4.0","_id":"@drecchia/maplibre-layer-control@2.1.0","maintainers":[{"name":"drecchia","email":"ciscomp@gmail.com"}],"homepage":"https://github.com/drecchia/maplibre-layer-control#readme","bugs":{"url":"https://github.com/drecchia/maplibre-layer-control/issues"},"dist":{"shasum":"77f5414f1f9eae407515705897cec40b0c0bc4cb","tarball":"https://registry.npmjs.org/@drecchia/maplibre-layer-control/-/maplibre-layer-control-2.1.0.tgz","fileCount":4,"integrity":"sha512-d/A/kQDt1HlNemjEcxcuuLxOYNdVWIKbWMhqgV/fmrI5AqbYjBSXHTEA5IJA3lOnyg48GACPawgg0jRusZit4A==","signatures":[{"sig":"MEQCIEZCZ8SzZByd7qFLcL4YWgY9ug76xsK0Uew0A5ABELPRAiBaYY3otag9abdIjeqv9KFZiaB52ANfXV28PUhOhCpwAQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50096},"main":"dist/js/all.min.js","gitHead":"e9c36c2f9df9600f5c4f762e7dfbf16017c8d327","scripts":{"build":"gulp default"},"_npmUser":{"name":"drecchia","email":"ciscomp@gmail.com"},"repository":{"url":"git+https://github.com/drecchia/maplibre-layer-control.git","type":"git"},"_npmVersion":"10.2.3","description":"MapLibre Layer Control, the best independent layer control tool.","directories":{},"_nodeVersion":"20.10.0","_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.2","gulp-concat":"^2.6.1","gulp-uglify":"^3.0.2","gulp-postcss":"^10.0.0","gulp-clean-css":"^4.3.0","postcss-nested":"^7.0.2","gulp-autoprefixer":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/maplibre-layer-control_2.1.0_1755540567707_0.8607730252221268","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2025-08-16T17:37:50.028Z","modified":"2026-02-19T16:30:52.249Z","1.0.0":"2025-08-16T17:37:50.301Z","1.1.0":"2025-08-17T20:06:41.677Z","2.1.0":"2025-08-18T18:09:27.898Z"},"bugs":{"url":"https://github.com/drecchia/maplibre-layer-control/issues"},"author":{"name":"Danilo T Recchia"},"license":"CC-BY-NC-4.0","homepage":"https://github.com/drecchia/maplibre-layer-control#readme","keywords":["layer","control","maplibre","vanillajs"],"repository":{"url":"git+https://github.com/drecchia/maplibre-layer-control.git","type":"git"},"description":"MapLibre Layer Control, the best independent layer control tool.","maintainers":[{"name":"drecchia","email":"ciscomp@gmail.com"}],"readme":"# LayersControl — MapLibre Layer Manager\n\nA compact, modern, and extensible layer control for MapLibre GL JS, designed for production apps needing:\n\n- Fast, testable code with clear separation of concerns\n- Flexible UX: grouping, per-overlay and group opacity, pan-on-add\n- Dynamic data loading via `renderOnClick` (async overlays)\n- Deck.gl integration for high-performance overlays\n- State persistence (base, overlays, opacity, order, viewport)\n- Event-driven API for analytics, telemetry, or custom UI\n\n![UI interaction](docs/img01.gif)\n![Dynamic loader](docs/img02.gif)\n\n---\n\n## Features\n\n- Base map switching (`setStyle` or `toggleBackground` strategies)\n- Overlay grouping and group-level opacity\n- Per-overlay opacity sliders and status indicators (loading/error/zoom-filtered)\n- `panOnAdd`: fly to overlay location on enable\n- `renderOnClick`: async remote overlay loader (with caching and retry)\n- State persistence: base, overlays, opacity, order, viewport (via `localStorage`)\n- Event system for all state changes and overlay lifecycle\n- Works with MapLibre and optionally deck.gl\n\n---\n\n## Installation\n\nInclude MapLibre GL JS, deck.gl, LayersControl JS, and CSS in your page:\n\n```html\n<script src=\"https://unpkg.com/maplibre-gl/dist/maplibre-gl.js\"></script>\n<script src=\"https://unpkg.com/deck.gl/dist.min.js\"></script>\n<script src=\"path/to/layers-control.js\"></script>\n<link rel=\"stylesheet\" href=\"path/to/main.css\">\n```\n\n---\n\n## Usage (Minimal Example)\n\n```javascript\nconst baseStyles = [\n  { id: 'osm', label: 'OpenStreetMap', style: 'https://demotiles.maplibre.org/style.json', strategy: 'setStyle' }\n];\n\nconst overlays = [\n  {\n    id: 'traffic',\n    label: 'Traffic Flow',\n    deckLayers: [\n      {\n        id: 'traffic-lines',\n        type: 'LineLayer',\n        props: {\n          data: [ /* your line data */ ],\n          getSourcePosition: d => d.from,\n          getTargetPosition: d => d.to,\n          getColor: [255,0,0],\n          getWidth: 2\n        }\n      }\n    ],\n    opacityControls: true,\n    defaultVisible: false\n  }\n];\n\nconst layersControl = new LayersControl({\n  baseStyles,\n  overlays,\n  defaultBaseId: 'osm',\n  persist: { localStorageKey: 'my-app-layers' },\n  position: 'top-right'\n});\n\nconst map = new maplibregl.Map({\n  container: 'map',\n  style: LayersControl.getInitialStyle({\n    baseStyles,\n    defaultBaseId: 'osm',\n    persist: { localStorageKey: 'my-app-layers' }\n  }) || baseStyles[0].style,\n  center: [0, 0],\n  zoom: 2\n});\n\nmap.on('load', () => {\n  layersControl.addTo(map);\n  const vp = LayersControl.getInitialViewport({ persist: { localStorageKey: 'my-app-layers' } });\n  if (vp) map.jumpTo(vp);\n});\n```\n\n---\n\n## Configuration\n\nSee [docs/CONFIGURATION.md](docs/CONFIGURATION.md) for all options and persisted state schema.\n\n- `baseStyles`: Array of base map styles (id, label, style, strategy)\n- `overlays`: Array of overlays (id, label, group, deckLayers, renderOnClick, opacityControls, etc.)\n- `groups`: Optional array for overlay grouping\n- `persist`: `{ localStorageKey }` for state persistence\n- `position`: MapLibre control position\n- `i18n`: Label translation function\n- `autoClose`, `showOpacity`, `showLegends`: UI options\n\n---\n\n## Supported Overlay Types\n\n- Only `deckLayers` and `renderOnClick` overlays are supported.\n- MapLibre `source`/`layers` overlays are NOT supported.\n\nSee [docs/RENDER_ON_CLICK.md](docs/RENDER_ON_CLICK.md) for the dynamic overlay contract.\n\n---\n\n## Events\n\nLayersControl emits events for all state changes and overlay lifecycle:\n\n- `basechange`, `overlaychange`, `overlaygroupchange`, `change`\n- `loading`, `success`, `error`\n- `styleload`, `sourceloaded`, `viewportchange`, `zoomfilter`, `memorycleared`\n\nSee [docs/EVENTS.md](docs/EVENTS.md) for event payloads and usage.\n\n---\n\n## Persistence\n\n- State is saved to `localStorage` under the configured key.\n- Persisted: baseId, overlays (visibility, opacity), groups, layerOrder, viewport.\n\n---\n\n## CSS Customization\n\nAll UI classes are defined in [src/css/main.css](src/css/main.css).  \nOverride these classes in your own CSS for custom themes or layout.\n\nSee [docs/CSS.md](docs/CSS.md) for a full class reference.\n\n---\n\n## Reference & Further Documentation\n\n- [docs/QUICKSTART.md](docs/QUICKSTART.md): Quickstart and minimal examples\n- [docs/API_REFERENCE.md](docs/API_REFERENCE.md): Full API and method signatures\n- [docs/CONFIGURATION.md](docs/CONFIGURATION.md): Options schema and persisted state\n- [docs/RENDER_ON_CLICK.md](docs/RENDER_ON_CLICK.md): Dynamic overlays contract\n- [docs/EVENTS.md](docs/EVENTS.md): Emitted events and payloads\n- [docs/CSS.md](docs/CSS.md): CSS class names and styling\n- [docs/WORKFLOWS.md](docs/WORKFLOWS.md): Runtime workflows\n- [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md): Internal design and responsibilities\n\n---\n\n## License\n\nMIT (see LICENSE)\n","readmeFilename":"README.md"}