Logo

Eigene Homepage

Eine Karte auf der eigenen Seite


"Da ist doch Copyright drauf, oder?"

Kartenausschnitte 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:

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:

Fixe Karte

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: den nachfolgenden Quelltext, ein passendes Icon und eine kleine Textdatei. Fangen wir mal mit dem Quelltext an:

<div style="width:600px; height:400px; margin-left:30px;
	background-color:#ffffff;">
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
 
    var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"Homepage-Bilder/textfile.txt",
                      projection: map.displayProjection
                    });
    map.addLayer(pois);
 
    //Set start centrepoint and zoom
    var lonLat = new OpenLayers.LonLat( 8.35905, 53.59715 )
          .transform(
          new OpenLayers.Projection("EPSG:4326"),  //from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
    var zoom=14;
    map.setCenter (lonLat, zoom);  
 
  </script>
</div>

In diesem Script musst Du die Daten für "Openlayers.LonLAT( Breite, Länge)" 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, an dem Dein Ferienhaus steht, in die linke obere Ecke, dann stehen links und oben die Koordinaten, die Du brauchst. Es gibt noch eine Variable namens "zoom", die Du ändern kannst, aber 14 ist ein guter Wert. Und Du must natürlich in der ersten Zeile die Größe des Kastens auf Deine Bedürfnisse anpassen ...

Schiffslogo

Um das Icon in der Größe 16x16, 24x24, 32x32 oder 48x48 musst Du Dich selbst kümmern, jetzt kommen wir zur Textdatei. In der müssen die folgenden Daten per Tabulatortaste getrennt stehen (eigentlich nur 2 Zeilen, hier auf 2 mal 2 Zeilen umgebrochen):

lat	lon	        title	        description
53.5908	8.355703	Ferienwohnung   <br>"Lüttje Lage"<br><br>(nochmal 

                        icon	                       iconSize  iconOffset
klicken zum Schließen)	Homepage-Bilder/Haus.png	48,48	    0,0

Um es nochmal klar zu machen: es soll in der Textdatei nur das stehen, was Du hier in der 2. und 4.Zeile siehst, und diese Werte nur durch ein Tabulatorzeichen getrennt. Der Speicherort mit Name des Icons muss stimmen! Was der Text unter "description" bedeutet, kannst Du in der folgenden Karte sehen, wenn Du auf die Icons klickst. Die Karte ist bereits interaktiv, spiel mit ihr:


Viel Spaß damit ...


Zurück zum Formular <------> Weiter zur Diashow

Feedback Mein Gästebuch nach oben