Freitag, 29. Juli 2016

Big Size Screenshot von Openstreetmap

Ein Tutorial zum Erstellen von hochauflösenden Landkarten-Grafiken (High Definition Maps) mit Openstreetmap und Firefox ohne Apps, Add-ons, oder Plug-ins, sowie ohne zusätzliche Software. Hilfreich ist dies für eine Weiterbearbeitung einer Maps, die einen größeren Kartenausschnitt benötigt, als das Browserfenster groß ist, oder einen eventuellen Posterdruck.

Openstreetmap (OSM) ist sehr beliebt und bietet verschiedene Karten-Styles als Layer an. Das einzige, was bei OSM einschränkend wirkt, ist die Bildschirmgröße. Ein Bildschirmfoto (Screenshot) ist immer nur so groß, wie das Browser-Fenster. Selbst ein Add-on, das ein Bildschirmfoto (Screenshot) der kompletten/ganzen Website erstellt, hilft hier nicht.

Mit einem kleinen Trick lassen sich hochauflösende Landkarten-Grafiken (High Definition Maps) mit Openstreetmap und Firefox erstellen. Zudem zeigt das Tutorial nebenbei noch ein paar andere Tricks, die unter anderem jegliche Screenshot-Add-ons (mit ihren Sicherheitsrisiken und Werbung) überflüssig machen.

Es geht los!

1.) Firefox öffnen und http://www.openstreetmap.org öffnen.
Für die spätere Navigation, sowie das Bildschirmfoto / den Screenshot selbst, ist es ratsam, einiges auf dem Bildschirm auszublenden. Dafür wird der "Inspektor" der "Entwickler-Werkzeuge" (Web Developer menu "Tools") von Firefox benötigt.

Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen

Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen

Alternativ kann auch schneller die Maus auf das Element geschoben und der Firefox "Inspektor" mit der rechten Maustaste über "Element untersuchen (Q)" gestartet werden.
Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen

Zur besseren Übersichtlichkeit wird der Firefox "Inspektor" in einem eigenen Fenster geöffnet.

Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen

Nun kann das Element per CSS Eigenschaft "display: none;" für diese Firefox-Sitzung ausgeblendet werden.

Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen
Mit dieser Methode lassen sich weitere Elemente, wie der Header und die rechte Sidebar, vorübergehend ausblenden.

Beim Header Ausblenden muss zusätzlich bei "<div id="content" class="overlay-sidebar">" die CSS Eigenschaft "top: 55px;" auf "top: 0px;" gesetzt werden.

Vom Ausblenden des © Credits wird abgeraten. Stattdessen kann der Text bei "<div class="leaflet-control-attribution leaflet-control">" vergrößert werden. In diesem Tutorial wurde er von "font-size: 11px;" auf  von "font-size: 112px;" vergrößert.

Bitte vor dem Ausblenden der rechten Sidebar die gewünschte OSM Kartenebene auswählen.
Danach den Firefox "Inspektor" schließen (close).


2.) Bildschirmgröße über die Firefox "Entwickler-Werkzeuge" (Web Developer menu "Responsive Design Mode") festlegen.

Bitte vorher schon den ungefähren Kartenausschnitt heranzoomen.

"Bildschirmgröße testen" starten: Menü → Entwickler-Werkzeuge → Bildschirmgröße testen.
Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen
Als nächstes die Bildschirmgröße in dieses Feld mit der Tastatur angeben.

Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen
In diesem Tutorial wurde eine Bildschirmgröße von "9000x9000" Pixel angegeben. (Die maximale Größe ist 10000x10000.)

Jetzt ist die Fläche des Browsers 9000 x 9000 Pixel groß und es erscheinen horizontale und vertikale Scrollbalken.

ACHTUNG: Der Browser benötigt jetzt viel Ressourcen an Arbeitsspeicher und ist auch wegen dem Laden der Map-Grafiken langsamer. Bei älteren Computern und langsamen Internet-Anschluss kann es zu starken Verzögerungen bis hin zum Einfrieren (Keine Rückmeldung) und Absturz kommen.

Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen

Jetzt muss die Openstreetmap an die ausgewählte Bildschirmgröße angepasst werden. Dies ist eine etwas mühselige Arbeit, da nicht die ganze Map zu sehen ist, sondern nur ein Teil. Es muss behutsam mit dem Maus-Rad der passende Map-Zoom gewählt werden, die Map mit der Maus an die passende Stelle geschoben werden und jedes Mal mittels der Scrollbalken der komplette Map-Ausschnitt kontrolliert werden. Es benötigt viel Geduld. Auch das Laden der Tiles (Map-Grafiken) dauert seine Zeit.

Hier der Link für eine Big Size Map von Berlin, die in diesem Tutorial verwendet wurde: http://www.openstreetmap.org/#map=14/52.4865/13.3407
Der Zoom-Wert beträgt 14. Das sind bei 9000x9000px ungefähr 52 x 52 km.
Die größte Ausdehnung Berlins beträgt 45 km Ost-West und 38 km Nord-Süd.
Bei einem maximalen Zoom und 10000x10000 sind (nur) 1,82 x 1,82 km sichtbar.


3.) Big Size Map Screenshot erstellen

Als letztes wird das Bildschirmfoto (Screenshot) von der Landkarte (Map) geschossen. Das Firefox-Tool liefert dafür schon eine Funktion mit.
Die Grafik wird als PNG-Datei in den Ordner gespeichert, der in den Firefox-Einstellungen angegeben ist, oder es erscheint ein "Speichern unter" Fenster, in dem der Speicherort ausgewählt werden kann. Je nach dem, was in Firefox eingestellt wurde.

ACHTUNG: Bei älteren Computern mit wenig Arbeitsspeicher (RAM) und schwacher CPU, kann die Funktion versagen. Dann passiert gar nichts. Es kann auch zum Absturz kommen. Dann eventuell dieses Tutorial direkt nach dem Neustart des Computers durchführen.
Die in diesem Tutorial erstellte High Definition Map von Berlin ist 52,4 MB groß. Die Grafik-Datei kann komprimiert werden in JPG mit bis zu 50% und erreicht dabei eine Dateigröße von 5 bis 10 MB.

Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen
Fertig!

Als Ergebnis hat man eine High Definition Map mit einer Auflösung von 9000 x 9000 Pixel im unkomprimierten PNG Dateiformat.

Big Size Screenshot von Openstreetmap erstellen
Big Size Screenshot von Openstreetmap erstellen
In dieser Big Size Map Grafik sind nun viele Details in der Map mit aufgeführt. Die Grafik ist wie eine richtige Landkarte, nur im digitalen Format.

Beim Ausdrucken der Big Size Landkarte bei einer Druckerei in Großformat-Druck und Posterdruck bitte dabei die Angaben des Copyrights nicht weglassen und die Lizenzbedingungen einhalten.

Bei einem Druck einer 10.000x10.000px Grafik und einer Druck-Auflösung von 300dpi ergibt das ein Poster von 85x85 cm. Bei 150dpi sind es 170x170cm.
Die Druckqualität wurde nicht getestet.


Ausschluss-Klausel: Keine Garantie. Keine Gewähr. Kein Support. Anfragen zwecklos.