OpenStreetMap und OpenLayers

OpenLayers funktioniert natürlich auch prima mit den Karten von OpenStreetMap. Ich schätze mal, daß dies die meistgenutzte Anwendung von OpenLayers ist. Neben der JavaScript-Bibliothek von OpenLayers muß man dann aber auch die OpenStreetMap-Bibliothek mitverlinken.

Der Code

Da die :meta-Direktive in der #prefs.yaml-Datei überschrieben wird, wenn eine #meta-Direktive im Textfile steht, mußte ich beide hier einbinden:

#meta "<script type=\"text/javascript\" src=\"http://openlayers.org/api/OpenLayers.js\"></script>\n
<script type=\"text/javascript\" src=\"http://openstreetmap.org/openlayers/OpenStreetMap.js\"></script>"

Die Karte selber wird mit folgendem, kleinen einzubettenden JavaScript initialisiert und eingebunden:

function init() {
	var proj4326 = new OpenLayers.Projection("EPSG:4326");
	var projmerc = new OpenLayers.Projection("EPSG:900913");
	var lonlat   = new OpenLayers.LonLat(13.43724, 52.46174);
 	var zoom     = 14;

	var map = new OpenLayers.Map("map", {
		controls: [
			new OpenLayers.Control.KeyboardDefaults(),
			new OpenLayers.Control.MouseDefaults(),
			new OpenLayers.Control.LayerSwitcher(),
			new OpenLayers.Control.PanZoomBar(),
			new OpenLayers.Control.MousePosition(),
			new OpenLayers.Control.Attribution()],
		maxExtent:
			new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
		numZoomLevels: 18,
		maxResolution: 156543,
		units: 'm',
		projection: projmerc,
		displayProjection: proj4326
	});
	var mapnik_layer = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
	var tah_layer    = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
	var cycle_layer  = new OpenLayers.Layer.OSM.CycleMap("Fahrradkarte");
	var layer_marker = new OpenLayers.Layer.Markers("Bommels");
	map.addLayers([mapnik_layer, tah_layer, cycle_layer, layer_marker]);
	lonlat.transform(proj4326, projmerc);
	map.setCenter(lonlat, zoom);
	
	var size     = new OpenLayers.Size(21, 25);
	var offset   = new OpenLayers.Pixel(-(size.w/2), -size.h);
	var icon     = new OpenLayers.Icon('http://www.testbett.de/images/marker.png', size, offset);
	layer_marker.addMarker(new OpenLayers.Marker(lonlat, icon));
}

Und 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