Inhaltsverzeichnis

OSM OpenLayers Test

FIXME Irgendetwas scheint sich an der API geändert zu haben, sie funzt nicht mehr. Nachprüfen …

FIXME Vielleicht hilft dieses oder dieses Plug-In. Testen!

Es gibt mehrere Wege, Karten des OpenStreetMap-Projektes in die eigene Webseite einzubauen. Am einfachsten gelingt dies mit der OpenLayers-Bibliothek. Hier haben allerdings die Götter vor dem Erfolg den Download gesetzt. Daher müßt ihr als erstes die OpenLayers-Bibliothek herunterladen und auf einem Webserver Eurer Wahl, den Ihr erreichen könnt, in einem eigenen Verzeichnis (z.B. /ol/ ) entpacken.

Hallo Rollberg!


Der Rest ist nur ein wenig JavaScript:

Quellcode

<div id="map" style="width:460px; height:400px;">
<script type="text/javascript" src="http://www.deinserver.de/ol/OpenLayers.js"></script>
<script type="text/javascript" src="http://openstreetmap.org/openlayers/OpenStreetMap.js">
</script>
<script type="text/javascript">
  function Lon2Merc(lon) {
    return 20037508.34*lon/180;
  }
 
  function Lat2Merc(lat) {
    var PI = 3.14159265358979323846;
    lat = Math.log(Math.tan((90 + lat)*PI/360))/(PI/180);
    return 20037508.34*lat/180;
  }
</script>
<script type="text/javascript">
  var lon = 13.426837921142578;
  var lat = 52.48142115832729;
  var zoom = 13;
  var map = new OpenLayers.Map("map", {
  controls: [
    new OpenLayers.Control.KeyboardDefaults(),
    new OpenLayers.Control.MouseDefaults(),
    new OpenLayers.Control.LayerSwitcher(),
    new OpenLayers.Control.PanZoomBar()],
  maxExtent:
    new OpenLayers.Bounds(-20037508.34, -20037508.34,
			   20037508.34,  20037508.34),
    numZoomLevels: 18,
    maxResolution: 156543,
    units: 'meters',
    projection: "EPSG:41001"} );
 
  var mapnik_layer = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
  var tah_layer = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
  map.addLayers([mapnik_layer, tah_layer]);
 
  var x = Lon2Merc(lon);
  var y = Lat2Merc(lat);
  map.setCenter(new OpenLayers.LonLat(x, y), zoom);
</script>
</div>

Erläuterungen und Hinweise

Die erste Script-Definitionen, die die OpenLayers-JavaScript-Bibliothek lädt und auch die zweite, die die daszugehörenden OpenStreetMap-spezifischen Ergänzungen vom OSM-Server dazupackt, werden typischerweise in der <head>-Section einer HTML-Seite eingebunden. Da aber viele Weblog-Systeme und CMS es nicht oder nur schwer erlauben, Header in einzelnen HTML-Seiten zu manipulieren, habe ich die gesamte Karte mit allen JavaScript-Definitionen in eine einziges <div> gepackt. Das geht in der Regel auch:

Also weiter im Text. Als nächstes definieren wir uns ein paar Hilfsfunktionen, die die Umrechnung von geographischer Länge und Breite in die Mercator-Projektion erledigen.

Die Zahl 20037508.34 ist irgendwie magisch, sie wird uns noch einmal begegnen. Sie hat irgendetwas mit der Umrechnung der Kacheln (Tiles), aus denen die OpenStreetMap-Karten zusammengesetzt werden, in geographische Koordinaten zu tun.

Das letzte Script zeichnet die eigentliche Karte: Ich habe als erstes die Koordinaten des Rollbergs in Neukölln eingegeben und als Zoomstufe 13 gewählt. Das entspricht dem Ausschnitt der Google-Karte in meinem entsprechenden Tutorial, so kann man am Besten vergleichen.

Nun weiter im Code: Als nächstes werden die Controls geladen, es wird das Standard-Maus- und Tastaturverhalten simuliert., Dann werden der Layer-Switcher (das ist das Plus-Zeichen rechts oben) und die Pan- und Zoom-Leiste links geladen.

Mit der magischen Zahl von oben wird als nächstes die Maximale Kartengrenze (das heißt die ganze Welt ) festgelegt und danach werden noch ein paar weitere Kosntanten wie die Anzahl der Zoom-Levels, aber auch die Art der Projektion, festgelegt.

Als besonderes Schmankerl habe ich zwei verschiedene Layer eingebunden. Einmal den Mapnik-Layer und dann den Layer des Tiles@Home-Projektes. Beide rendern die Karte auf etwas unterschiedliche Weise und enthalten leicht abweichende Informationen. Ihr könnt nach Klicken des Plus-Symbols zwischen den beiden Layern wechseln und die Karten vergleichen.

Und zum Schluß wird einfach noch der Mittelpunkt der Karte berechnet und diese dann gezeichnet. Und vergesst bitte nicht, das <div>-Element wieder zu schließen.



Kategorie: Arbeitsmaterial Webmapping → OpenStreetMap


Zuletzt angesehen: » Henry-Ford-Bau » Sun xVM VirtualBox » Piaggio Ape » ffmpegX » Django » CrazyTalk5 » Harry's Freilach » Tempelhofer Feld » Großziethen » OSM OpenLayers Test

Navigation