ol-side-panel

A responsive tabbed left side panel for OpenLayers.

• Docs: https://symbioquine.github.io/ol-side-panel/latest/docs/
• Example: https://symbioquine.github.io/ol-side-panel/latest/

Inspiration / Credit

ol-side-panel is inspired by and originally based on the code of Turbo87/sidebar-v2 - also MIT licensed.

Getting started

npm i ol-side-panel

import { SidePanel } from 'ol-side-panel';

const sidePanel = new SidePanel();

map.addControl(sidePanel);

const layersPane = sidePanel.definePane({
  paneId: 'layers',
  name: "Layers",
  icon: '<i class="bi bi-layers-half"></i>'
});

const layersGreeting = document.createElement('p');
layersGreeting.innerHTML = "Hi there layers!";

layersPane.addWidgetElement(layersGreeting);