Ein Bild in OpenLayers

Mit der OpenLayers-Bibliothek kann man nicht nur Karten, sondern auch Bilder auf seinen Seiten darstellen und erhält so eine Möglichkeit, in große Bilder hineinzuzoomen. In diesem Beispiel wird es genutzt, um in ein fast 4.000 x 3.000 Pixel großes Bild hineinzuzoomen und zu navigieren.

Der Code

Im <head> der Seite wird die OpenLayers API aufgerufen (das »Hotlinking« ist ausdrücklich erlaubt):

<script src="http://openlayers.org/api/OpenLayers.js"></script>

In RubyFrontier erfolgt das am Einfachsten mit folgender Direktive:

#meta "<script src=\"http://openlayers.org/api/OpenLayers.js\"></script>"

Außerdem wird mit embedjavascript noch folgendes kleines Script eingebunden:

function init() {
 	var map = new OpenLayers.Map('map');
	var airRoutes1920 = new OpenLayers.Layer.Image (
		"Air Routes 1920",
		"images/air-routes-1920.jpg",
		new OpenLayers.Bounds(-180, -135, 180, 135),
		new OpenLayers.Size(3992, 3012),
		{numZoomLevels:7, maxResolution: .755}
		);
	map.addLayer(airRoutes1920);
 	map.zoomToMaxExtent();
}

Natürlich darf man nicht vergessen, mit

#onload "init()"

das Script auch auszuführen.

Quellen

Marc Jansen und Till Adams: OpenLayers — Webentwicklung mit dynamischen Karten und Geodaten, München (Open Source Press) 2010