Die JavaScript Dateien

Einleitung

Vorbereitung

HTML-Datei

CSS-Datei

JavaScript-Datei

Karte-als-Popup

eigene Kosmos-Karte online stellen

Dieser Abschnitt erklärt die jeweiligen JavaScript-Dateien, welche benötigt werden, um eine OpenStreetMap-Karte in eine Webseite einzubinden.

In unserem Beispiel braucht nur untenstehende JavaScript-Datei geschrieben zu werden. Alle anderen werden mit Hilfe des src-Attributs eingebunden.

Code bearbeiten und speichern

1. öffne mit einem Editor (beispielsweise Notepad++ oder TextEdit) eine leere Seite
2. kopiere untenstehenden JavaScript-Code in die leere Seite
3. speichere das Ergebnis unter: tom.js

JavaScript-Code für tom.js

function jumpTo(lon, lat, zoom) {
    var x = Lon2Merc(lon);
    var y = Lat2Merc(lat);
    map.setCenter(new OpenLayers.LonLat(x, y), zoom);
    return false;
}

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;
}

function addMarker(layer, lon, lat, popupContentHTML) {

    var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
    var feature = new OpenLayers.Feature(layer, ll); 
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(300, 180) } );
    feature.data.popupContentHTML = popupContentHTML;
    feature.data.overflow = "hidden";
            
    var marker = new OpenLayers.Marker(ll);
    marker.feature = feature;

    var markerClick = function(evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);

    layer.addMarker(marker);
    map.addPopup(feature.createPopup(feature.closeBox));
}

function getCycleTileURL(bounds) {
   var res = this.map.getResolution();
   var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
   var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
   var z = this.map.getZoom();
   var limit = Math.pow(2, z);

   if (y < 0 || y >= limit)
   {
     return null;
   }
   else
   {
     x = ((x % limit) + limit) % limit;

     return this.url + z + "/" + x + "/" + y + "." + this.type;
   }
}

Diese Datei muss genauso übernommen werden, wie sie hier dargestellt ist. Wenn man alle anderen Dateien angepasst und in einen Ordner abgespeichert hat, kann man die Karte nun in einer eigenen Webseite betrachten.