0

I would like to create a sidebar on the side of my map to place my various buttons. I chose ol-3 sidebar (https://github.com/Turbo87/sidebar-v2) and it works, with its only problem that the sidebar is not aligned to the map in any view (desktop or mobile). Could you please help me? My code (in its plain version) is this:

enter image description here

<html>
<head>
    <meta charset='utf-8'/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>.
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.4.2/ol.js" type="text/javascript"></script>
    <script src="js/ol3-sidebar.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/ol3-sidebar.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.4.2/ol.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/css/tether.min.css">
</head>
<style>body {padding: 0;margin: 0;overflow: hidden;background-color: #ff9900;}</style>
<body>
    <div class="container-fluid" id="index">
        <div id="sidebar" class="sidebar collapsed" style= "max-width: 100%; height: auto;">
            <div class="sidebar-tabs">
                <ul role="tablist">
                    <li><a href="#a" role="tab">A</a></li>
                    <li><a href="#b" role="tab">B</a></li>
                    <li><a href="#c" role="tab">C</a></li>
                </ul>
                <ul role="tablist">
                    <li><a href="#settings" role="tab">Settings</a></li>
                </ul>
            </div>
            <div class="sidebar-content">
                <div class="sidebar-pane" id="a">
                    <h1 class="sidebar-header">a</h1>
                    <hr width="100%" size="8" align="center">
                </div>
                <div class="sidebar-pane" id="b">
                    <h1 class="sidebar-header">b</h1>
                    <hr width="100%" size="8" align="center">
                </div>
                <div class="sidebar-pane" id="c">
                    <h1 class="sidebar-header">c</h1>
                    <hr width="100%" size="8" align="center">
                </div>
                <div class="sidebar-pane" id="settings">
                    <h1 class="sidebar-header">Settings</h1>
                    <hr width="50%" size="8" align="center">
                </div>
            </div>
        </div>
        <div id="map" class="sidebar-map mymap" style="width: 100%; height: 85%;">
            <script>
                var layers = [
                    new ol.layer.Tile({source: new ol.source.OSM()})
                ];
                var map = new ol.Map({
                    controls: ol.control.defaults({
                        attributionOptions: ({collapsible: false})
                    }).extend([
                    new ol.control.ZoomSlider(),
                    new ol.control.Rotate(),
                    new ol.control.OverviewMap(),
                    new ol.control.ScaleLine(),
                    new ol.control.FullScreen()
                    ]),
                    interactions: ol.interaction.defaults().extend([
                        new ol.interaction.Select({condition: ol.events.condition.mouseMove})
                    ]),
                    layers: layers,
                    target: 'map',
                    view: new ol.View({
                      center: [2687148, 4556999],
                      zoom: 7
                    })
                });
                var sidebar = new ol.control.Sidebar({element: 'sidebar', position: 'left'});
                map.addControl(sidebar);
            </script>
        </div>
    </div>
</body>

ilitse
  • 127
  • 2
  • 10

1 Answers1

3

You can try and embed the sidebar div inside the map div:

<div id="map" class="sidebar-map mymap" style="width: 100%; height: 85%;">
    <div id="sidebar" class="sidebar collapsed" style= "max-width: 100%; height: auto;">
   ...
   </div>
</div>

It worked for me (using Openlayers 4.6.5 and sidebar-v2). The only problem is that clicking the nav tabs scrolls the page to that element.

EDIT: The last problem is easily solved by adding an exclamation mark, i.e. using <a href="#!...> instead of <a href="#...> (see: How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?)

EDIT2: Even better, add a class="tab" to all the in the navigation tablist and (since you are using JQuery) add a function:

$('.tab').click(function($e) {
    $e.preventDefault();
});
TheVRChris
  • 171
  • 7