DE:OSM in Website für Gemeinde/js

Übersicht

HTML-Datei

JS-Code

JS-Funktionen

CSS-Datei

GPX-Dateien

Testanwendung

ToDo-Liste

Die JavaScript-Funktionen erzeugen den Kartenausschnitt, setzen die Marker, berechnen projektionsspezifische Koordinaten, etc.

JavaScript-Funktionen

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 = feature.createMarker();
 
    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);
}
 
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;
   }
}

JavaScript-Funktionen kopieren

1. kopiere den gesamten Code. Achte darauf, dass du auch das erste und letzte Zeichen kopiert hast.
2. füge den Code im Texteditor in eine neue Seite ein
3. speichere den Code unter dem Dateinamen "OSM-Karte-Funktionen.js"
4. lade die Datei mit dem FTP-Programm auf den Webserver in den passenden Ordner

Falls du einen anderen Ordner- oder Dateinamen wählst, passe die HTML-Datei entsprechend an.