https://github.com/symbioquine/ol-side-panel

A responsive tabbed side panel for OpenLayers
https://github.com/symbioquine/ol-side-panel

openlayers openlayers6

Last synced: about 1 year ago
JSON representation

A responsive tabbed side panel for OpenLayers

• Host: GitHub
• URL: https://github.com/symbioquine/ol-side-panel
• Owner: symbioquine
• License: mit
• Created: 2021-06-18T15:12:53.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2022-05-05T19:13:59.000Z (about 4 years ago)
• Last Synced: 2025-03-18T10:51:43.583Z (about 1 year ago)
• Topics: openlayers, openlayers6
• Language: JavaScript
• Homepage: https://symbioquine.github.io/ol-side-panel/latest/docs/
• Size: 1.35 MB
• Stars: 7
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ol-side-panel

A responsive tabbed left side panel for OpenLayers.

* Docs: [https://symbioquine.github.io/ol-side-panel/latest/docs/](https://symbioquine.github.io/ol-side-panel/latest/docs/)

* Example: [https://symbioquine.github.io/ol-side-panel/latest/](https://symbioquine.github.io/ol-side-panel/latest/)

![image](https://user-images.githubusercontent.com/30754460/123520513-faa39e80-d665-11eb-9b39-394a5cff2464.png)

## Inspiration / Credit

ol-side-panel is inspired by and originally based on the code of [Turbo87/sidebar-v2](https://github.com/Turbo87/sidebar-v2) - also MIT licensed.

## Getting started

```sh

npm i ol-side-panel

```

```javascript

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

const sidePanel = new SidePanel();

map.addControl(sidePanel);

const layersPane = sidePanel.definePane({

  paneId: 'layers',

  name: "Layers",

  icon: ''

});

const layersGreeting = document.createElement('p');

layersGreeting.innerHTML = "Hi there layers!";

layersPane.addWidgetElement(layersGreeting);

```