MapLibre Layer Control

Interactive layer control for MapLibre GL JS with visibility toggle, opacity slider, and style editor

Basic Example

Simple setup with auto-detected layers from the map style. Great starting point for understanding the basics.

Vanilla JS Auto-detect

Full Demo

Comprehensive demo showcasing all layer types with custom GeoJSON data and raster overlay.

Fill Line Circle Raster

Background Legend

Control individual background layer visibility with the gear icon. Shows indeterminate checkbox state.

Legend Visibility Basemap

React Integration

React component integration using LayerControlReact with hooks and proper lifecycle management.

React TypeScript Hooks

Dynamic Layers

Add layers dynamically at runtime and watch them auto-appear in the Layer Control without custom adapters.

Fill Line Circle Raster

CDN Usage

Browser-only example using CDN imports. No build step required - just include scripts and go.

CDN No Build Vanilla JS