Eigene Homepage

Eine Karte auf der eigenen Seite

Völlig richtig, alle Karten unterliegen einem Copyright und es kostet eigentlich Geld, sie zu benutzen. "Eigentlich" deswegen, weil es eine Karte gibt, die - wie Wikipedia - frei ist und kostenlos benutzt werden darf. Man muss lediglich die Quelle angeben. Und das ist:

• www.openstreetmap.org

Wenn Du mitmachen möchtest, dann findest Du alle möglichen Infos auf www.openstreetmap.de. Auch, wenn Du nicht mitmachen möchtest, darfst Du dieses Kartenmaterial kostenlos benutzen, Du must nur die Quelle nennen.

Jetzt ist ja eine Möglichkeit für eine Anfahrtskarte, einen Auschnitt zu nehmen und als Bild auf die Seite zu setzen, so, wie ich es hier vormache:

Vorher malt man mit einem Pfeil ein, wo es hingehen soll. Allerdings: weißt Du wo der nebenstehende Kartenausschnitt überhaupt auf der Welt angesiedelt ist? Du kannst die Karte natürlich mit einem Link versehen, der in einem neuen Fenster/Tab die Openstreetmap-Karte öffnet. Für das Ziel des Links stellst Du die Karte so ein, wie der Besucher Deiner Webseite sie sehen soll und klickst rechts unten auf den "Permalink" - oben in der Adressleiste steht das Ziel.

Aber es wäre doch viel schöner, wenn Du interaktiv mit der Karte umgehen kannst, also zoomen und verschieben. Und eben das ist auch machbar und das kommt jetzt.

Karte von Openstreetmap CC-by-SA

Du brauchst dafür eine Software, die Kartendaten aus dem Netz lädt und sie auf den Bildschirm malt: Openlayer.js. Die ist frei erhältlich und Du kannst sie einfach in die Homepage einbinden mit:

Eine zweite Software, die die erste steuert und praktischerweise noch einen Zeiger auf die Karte zaubert:

var map;
function init() {
    
    // The overlay layer for our marker, 
    // with a simple diamond as symbol
    var overlay = new OpenLayers.Layer.Vector('Overlay', {
        styleMap: new OpenLayers.StyleMap({
            externalGraphic: zeiger,
            graphicWidth: 20, graphicHeight: 30, graphicYOffset: -30,
            title: '${tooltip}'
        })
    });

    // The location of our marker and popup. 
    // We usually think in geographic
    // coordinates ('EPSG:4326'), 
    // but the map is projected ('EPSG:3857').
    var myLocation = new OpenLayers.Geometry.Point(lon, lat)
        .transform('EPSG:4326', 'EPSG:3857');

    // We add the marker with a tooltip text to the overlay
    overlay.addFeatures([
        new OpenLayers.Feature.Vector(myLocation, {tooltip: hovertext})
    ]);

    // A popup with some information about our location
    var popup = new OpenLayers.Popup.FramedCloud("Popup", 
        myLocation.getBounds().getCenterLonLat(), null,
        popuptext+'   ', null,
        true // <-- true if we want a close (X) button, false otherwise
    );

    // Finally we create the map
    map = new OpenLayers.Map({
        div: "map", projection: "EPSG:3857",
        layers: [new OpenLayers.Layer.OSM(), overlay],
        center: myLocation.getBounds().getCenterLonLat(), zoom: wiedicht
    });
    // and add the popup to it.
    map.addPopup(popup);
}			// <-- hier ist noch eine Klammer

Kopiere dies und speichere es im Ordner mit der Karteseite als "osm-marker-popup.js" ab. Danach bindest Du diese Datei wie üblich ein:

Dieses letzte Script habe ich im Netz gefunden und abgeändert: alle festen Werte sind jetzt durch Variablennamen ersetzt und diese Variablen setze ich jetzt in den head der Datei ein. Hier stehen Sie gut sichtbar, die Namen sind selbsterklärend und hier fülle ich sie mit Werten:

<!-- Die Variablen dafür an dieser Stelle, 
	damit sie leichter zu ändern sind -->
        <script>
        var popuptext = '<a href="https://www.campingplatz-harra.de" 
        target="_blank">Der Campingplatz<br>am Trepplesfelsen</a>';
        var hovertext = 'Hier isser';
        var lon = 11.687;
        var lat = 50.42;
        var wiedicht = 15;
        var zeiger = 'Bilder/marker-green.png';
        </script>
<!-- Ende der Deklaration -->

Die Werte für die Variablen musst Du selbst rausfinden und eintragen. Dazu gehst Du in einem anderen Fenster auf Openstreetmap und suchst Dir den Kartenausschnitt, den Du hier zeigen willst. Oben befindet sich ein Karteikartenreiter "Export", den klickst Du an. Dann siehst Du ein neues Feld, in dem oben die Koordinaten der Kartenfläche stehen. Zieh den Punkt, den Du zeigen willst, in die linke obere Ecke, dann stehen links und oben die Koordinaten, die Du brauchst. Es gibt noch eine Variable namens "wiedicht", die Du ändern kannst, aber 15 ist ein guter Wert.

Es fehlt noch der Positionsmarker - hier rechts habe ich den grünen Marker platziert. Rechte Maustaste und "speichern unter" im Bilderverzeichnis...

Es fehlt immer noch was: in der CSS-Datei habe ich an einer Stelle für Bilder vorgeschrieben, dass sie - wenn möglich - 100% breit sind:

 img { max-width: 100%; }

Und jetzt kommt endlich die Karte. Sie ist bereits interaktiv, spiel mit ihr:

Viel Spaß damit ...