Information Technology Reference
In-Depth Information
Wie schon in Abschnitt 7.1.2, Online-Kartendienste
,
werden hier die Daten
des OpenStreetMap-Projekts mithilfe der OpenLayers-Bibliothek dargestellt.
Nachdem die beiden dazu notwendigen JavaScript-Dateien geladen sind, wird
in diesem Beispiel die Karte initialisiert und werden die gewünschten Steuer-
elemente hinzugefügt.
// Karte initialisieren und Navigation hinzufügen
var map = new OpenLayers.Map ("map");
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.PanZoomBar());
Neben dem Navigationselement mit den vier Pfeilen wird die Zoom-Leiste an
die Karten-Variable (
map
) angehängt. Anschließend wird das Auswahl-Element
für die unterschiedlichen Layer erzeugt (
Control.LayerSwitcher
) und werden
mehrere Layer zu der Karte hinzugefügt. Der Funktionsaufruf von
map.addLay-
ers()
nimmt dabei ein Array von neu erzeugten Karten-Objekten entgegen.
// Layerauswahl mit vier Kartentypen
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addLayers([
new OpenLayers.Layer.OSM.Mapnik("Mapnik"),
new OpenLayers.Layer.OSM.Osmarender("Osmarender"),
new OpenLayers.Layer.OSM.Maplint("Maplint"),
new OpenLayers.Layer.OSM.CycleMap("CycleMap")
]);
Abschließend erhält die Karte noch einen Layer für den Marker:
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
Das Success-Callback nach einer erfolgreichen Positionsbestimmung sieht so
aus:
function(pos) {
var ll = new OpenLayers.LonLat(
pos.coords.longitude,
pos.coords.latitude).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
map.setCenter (ll,zoom);
markers.addMarker(
new OpenLayers.Marker(
ll,new OpenLayers.Icon(
