Hallo Welt mit OpenLayers

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>"

Mit den backslashes(\) werden die doppelten Anführungszeichen (") im <script>-Tag maskiert. Man kann an dieser Stelle aber auch schlicht einfache Anführungszeichen (') setzen und erspart sich so das Maskieren.

Als dritte Möglichkeit — wenn man z.B. ein ganzes Directory von Dateien mit dem Script versorgen will — packt man die Direktive in eine #prefs.yaml. Auch dann erspart man sich die backslashes.

Im <body> der Seite wird dann folgendes kleine JavaScript eingefügt:

<div id="map" style="width:460px; height:256px; border:1px solid #eeeeee"></div>
<script defer="defer" type="text/javascript">
	var map = new OpenLayers.Map( 'map' );
	var wms = new OpenLayers.Layer.WMS(
		"OpenLayers WMS",
		"http://labs.metacarta.com/wms/vmap0",
		{ layers:'basic' }
		);
	map.addLayer(wms);
	map.zoomTo(1);
	</script>

Und schon hat man eine wunderbare Weltkarte in seine Seite gezaubert, in die man hinein und hinauszoomen und die man mit gedrückter linker Maustaste auch verschieben kann.