Leaflet Superbar is a customizable sidebar component for Leaflet maps that enables users to manage, import, and style vector layers directly from the UI. This plugin is designed to enhance mapping applications with a rich, interactive panel that supports both data control and visual customization.

• Import Layers: Easily load layers via file input (e.g., GeoJSON).
• Layer Management: Toggle visibility, set color, view geometry type, and delete layers.
• Customizable UI:
  • Header background and title colors
  • Logo and title text
  • Font family and sizes
  • Toolbar and toggle button styles
  • Layer name styling and geometry color
• Minimal and extensible layout designed for plugin or app integration.

Leaflet 1.0.0 and plus

You can view a demo here.

npm i leaflet.superbar

then add this line in your main html file :

<script src="https://unpkg.com/leaflet.superbar@latest/dist/superbar.js"></script>

You can customize the appearance of Leaflet Superbar using the applyStyles function before calling initializeApp. Here are all available customization options:

<script
  src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
  crossorigin=""
></script>
<script src="https://unpkg.com/leaflet.superbar@latest/dist/superbar.js"></script>
<script>
  const map = L.map("map").setView([48.8566, 2.3522], 13);
  const customStyles = {
    HEAD_COLOR: "#1abc9c",
    HEAD_TITLE: "My Custom Map",
    HEAD_TITLE_COLOR: "#ffffff",
    HEAD_LOGO_URL: "./my_logo.png",
    HEAD_LOGO_WIDTH: "40px",
    HEAD_LOGO_HEIGHT: "40px",
    TOOLBAR_COLOR: "#16a085",
    TOGGLE_BUTTON_COLOR: "#27ae60",
    LAYERS_NAME_COLOR: "#34495e",
    LAYERS_GEOMETRY_COLOR: "#e67e22",
  };
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "© OpenStreetMap contributors",
  }).addTo(map);
  SuperBar.applyStyles(customStyles);
  SuperBar.initializeApp(map);
</script>

This plugin is released under the MIT License. See the LICENSE file for details.

Contributions are welcome! 😄 If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the GitHub repository.

If you like this project, don’t forget to ⭐ star it on GitHub — it really helps and is much appreciated!