# sidebar-v2 Documentation ## Installation ### NPM ``` npm install sidebar-v2 --save ``` ### CDN hosted OpenLayers 3+ ```HTML ``` ### Self hosted Download the [latest release](https://github.com/Turbo87/sidebar-v2/releases/latest), unpack the downloaded file, and load the CSS and JavaScript into your document, for instance (OpenLayers 3+): ```HTML ``` ## Usage In your HTML ensure that you have loaded the [OpenLayers](https://openlayers.org/) and `sidebar-v2` CSS. In the example code below we also use [FontAwesome](https://fontawesome.com/) so that nice symbols can be used for the sidebar's buttons. ```HTML ``` Then create the `div` element within the HTML `body` for the map similarly to how one would for plain OpenLayers maps. However note that you need to use `class="sidebar-map"` instead of `class="map"` and the map `div` needs to *follow* the `div` for the sidebar: ```HTML ``` Now define the sidebar (by default in a collapsed state) via the `sidebar` and `collapsed` classes: ```HTML ``` Each sidebar element consists of a navigation tab connected to a tab pane containing the content of the sidebar element. The navigation tabs are a simple unordered list of anchors linking to the respective tab pane: ```HTML
``` The content of a given tab is contained in a sidebar tab pane (note the `id` attribute pointing back to the relevant navigation tab). A pane includes a header (via the `sidebar-header` class), which contains the `span` element needed to close the pane, and then simple HTML text, for instance `p` elements: ```HTML
``` Now that the HTML has been set up, we can add the sidebar to the OpenLayers map within JavaScript by adding a `script` element at the end of the `body`. Don't forget to load the OpenLayers and sidebar-v2 JavaScript: ```HTML ``` Then set up the OpenLayers map, in this case using an [OpenStreetMap](https://www.openstreetmap.org/) source: ```HTML ``` To add the sidebar, simply create a new `Sidebar` object which links to the sidebar `div` created above, and then add it as a new control to the map: ```javascript var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' }); map.addControl(sidebar); ``` Putting it all together we get: ```HTML sidebar-v2 usage example ``` For a more complete examples, have a look at the files in the `examples/` directory of the distribution.