4.1. Einen Maßstabsbalken einblenden

Auf Karten werden nicht selten Maßstabsbalken zur besseren Orientierung angezeigt. Mit ol3 ist dies auch möglich: die Klasse ol.control.ScaleLine kann hierzu verwendet werden.

4.1.1. Erzeugung des Maßstabsbalkens

Übungen

1. Öffnen Sie map.html im Texteditor.

2. Fügen Sie nachfolgenden Code irgendwo innerhalb der ol.Map-Konfiguration hinzu:

   controls: ol.control.defaults().extend([
     new ol.control.ScaleLine()
   ]),
   

3. Speichern Sie Ihre Änderungen und laden Sie die Seite im Browser neu: http://localhost/ol3-ws/map.html

   

   Der Maßstabsbalken ohne Anpassungen.

4.1.2. ScaleLine Control anpassen

Vermutlich finden auch Sie, dass der Maßstabsbalken schlecht zu lesen ist, wenn er auf der Weltkarte angezeigt wird. Man kann verschiedenen Dinge unternehmen, um die Lesbarkeit zu verbessern. Vielleicht reicht es, wenn wir den CSS-Stil anpassen? Wir wollen zunächst eine andere Hintergrundfarbe festlegen und auch etwas mehr Innenabstand zuweisen:

.ol-scale-line, .ol-scale-line:not([ie8andbelow]) {
  background: black;
  padding: 5px;
}

Aus didaktischen Gründen wollen wir aber nun annehmen, dass Ihr Karten-div sowieso schon überfüllt ist, und Sie daher entschieden haben, dass der Maßstabsbalken in ein separates <div>-Element außerhalb der Karte plaziert werden sollte.

Hierzu werden wir zunächst ein solches Element dem HTML hinzufügen, und anschließend der ol.control.ScaleLine mitteilen, wo sie gerendert werden soll.

Tasks

1. Erzeugen sie ein neues <div>-Element auf Ihrer HTML-Seite. Um den Zugriff auf das Element zu vereinfachen, geben Sie dem <div> bitte die id="scale-line". Fügen Sie z.B. den nachfolgenden Code ein:

   <div id="scale-line" class="scale-line"></div>
   

2. Anschließend müssen wir den Code modifizieren, der die ScaleLine erzeugt. Beachten Sie vor allem den Schlüssel target:

   controls: ol.control.defaults().extend([
     new ol.control.ScaleLine({
       className: 'ol-scale-line',
       target: document.getElementById('scale-line')
     })
   ]),
   

3. Speichern Sie Ihre Änderungen und laden Sie die Seite im Browser neu: http://localhost/ol3-ws/map.html

4. Was ändern die folgenden Zeilen CSS?

   .scale-line {
     position: absolute;
     top: 350px;
   }
   .ol-scale-line {
     position: relative;
     bottom: 0px;
     left: 0px;
   }
   

5. Speichern Sie Ihre Änderungen erneut und laden Sie die Seite im Browser neu: http://localhost/ol3-ws/map.html

   

   Ein Maßstabsbalken in separatem <div>-Element.

Bemerkung

Um eigene controls zu erzeugen sei auf http://openlayers.org/en/master/examples/custom-controls.html verwiesen.