Openlayer V4.5.0 Problem: Überlappung eines Controll-Elementes.

Moin Moin,

momentan füge ich ja kleine nützliche Dinge in die Karte hinzu, dabei ist jetzt eine Überlappung vorhanden, wie kann diese Überlappung rückgängig gemacht werden?

Ich habe hierzu bislang auch nix weiteres gefunden.

Der Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Christian Thal">
<meta name="keywords" lang="de" content="Schienenpost, Post, Schiene, Startseite">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="Startseite.css">
<title>Schienenpost - Die Startseite</title>
<link rel="stylesheet" href="http://www.schienenpost.de/v4.5.0/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.jsfeatures=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="http://www.schienenpost.de/v4.5.0/build/ol.js"></script>
</head>
<body>
<h1>Schienenpost - Startseite</h1>
<nav>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="Login.html">Login</a></li>
<li><a href="FAQ.html">FAQ</a></li>
<li><a href="Kontaktseite.html">Kontakt</a></li>
<li><a href="Update.html">Update</a></li>
<li><a href="Impressum.html">Impressum</a></li>
</ul>
</nav>
<div id="map" class="map"><div id="popup"></div></div>
    <script>
      var logoElement = document.createElement('a');
      logoElement.href = 'https://www.schienenpost.de/';
      logoElement.target = '_blank';

      var logoImage = document.createElement('img');
      logoImage.src = 'http://www.schienenpost.de/schienenpost.png';

      logoElement.appendChild(logoImage);

      var scaleLineControl = new ol.control.ScaleLine();

      var map = new ol.Map({
        controls: ol.control.defaults()
        .extend([
          new ol.control.OverviewMap(),
          new ol.control.FullScreen(),
          scaleLineControl
        ]),
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [1100000, 7000000],
          zoom: 7
        }),
       logo: logoElement
      });
    </script>
</body>
</html>

Ich war auch auf den Gedanken gekommen mittels der css-Datei dies zu ändern, aber dies habe ich schnell verworfen.

Vielleicht hat jemand eine Idee?
Die beiden heißen im Code: new ol.control.FullScreen(), und scaleLineControl .

Gruß

Thal

PS: Darstellungsfehler: http://www.schienenpost.de/

Moin!

was Schienenpost sein - verstehe ich noch nicht ganz!

Jan

kann es sein, dass Du an

.ol-scale-line {
[...]
left: 8px;
[...]
}

drehen möchtest?
Edit: Und wenn nicht, warum nicht?

Je nach Reihenfolge der CSSe bräuchte man noch ein !important dahinter:

.ol-scale-line {
   ....
    left: 80px !important;
   ...
}

Oh,

funktioniert fast, kann es sein, das Overviewmap für die Scale-Line nicht vorhanden ist?

Ich habe in der CSS-Datei folgendes hinzugefügt:

.ol-scale-line {
    left: 15% !important;
}

Kann der Abstand zwischen Overviewmap und Scale-Line auch definiert werden?
Momentan geht der Abstand fest vom linken Rand aus.

Die Overviewmap verdeckt beim öffnen natürlich dann die Scale-Line…

Moin,

ich bins nochmal.

Also die Index-HTML verweist im Head-Bereich auf die ol-css Datei.
Ich habe mir diese auch einmal angeschaut:

.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-unselectable,.ol-viewport{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.ol-control{position:absolute;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}

Dabei fiel mir auf, das .ol-overviewmap hier ja auch vorhanden ist, wäre es möglich dann direkt dort die Position zu verändern?

Gruß

Thal