DE:OSMplusOpenLayers

1. Eigene Marker

2. Eigene Tracks

Eigene Inhalte mit OpenLayers auf OSM-Karten

Dieses Beispiel ist gedacht für Menschen, die mit wenig Programmierkenntnissen [1] eine HTML-Seite mit OpenStreetmap-Karte und eigenen Symbolen/Markern (und im 2. Schritt auch mit eigenen Tracks) auf verschiedenen Layern[2] erstellen möchten.

Diese HTML-Seite kann dann zu Hause am Bildschirm betrachtet, als zip-Datei an andere Leute weitergegeben oder auf die eigene Homepage hochgeladen werden.

Zuerst werden die Ausgangsdateien als zip-Archiv von hier[3] (25KB) auf den eigenen Computer heruntergeladen und dort ausgepackt. Öffnet man im Ordner "html" die Datei "osm.htm" mit einem Internetbrowser, so sollte schon ein lauffähiges Beispiel vorliegen.

Im einfachsten Fall brauchen nur folgende Anpassungen im Ordner "userdat" vorgenommen werden:

1. die gewünschten Symbole/Icons/Bilder in den Ordner "userdat" kopieren

Es kann auch die dort schon existierende Vorlage "icon-example.png" mit einem geeigneten Grafikprogramm abgeändert werden.

2. Die Datei "myLayers.js" mit einem Editor öffnen und anpassen:

2.1 Kartenausschnitt wählen

 var lon = 13.0;
 var lat = 45.5;
 var zoom = 9;

2.2 Anzahl der benötigten Layer festlegen:

 var layer1; //usw.

2.3 in function createLayers(map) die Layer hinzufügen:

 var nameLayer1 = "Hier steht der Name des Layers";
 layer1 = new OpenLayers.Layer.Markers(nameLayer1, { visibility: true });
 map.addLayer(layer1);

2.4 in function createMarkers(map) die Icons hinzufügen:

 var icon1 = 'userdat/icon1.png'; 
 var icon2 = 'userdat/icon2.png'; //usw.
 var size = 24;
 var offset = 24;
   

2.5 für jeden Marker Position, Inhalt der Textbox und Icon definieren:

 var lon1 = 12.2600;
 var lat1 = 45.1800;
 var boxTextHtml1 = 'Hier steht ein HTML-Text';
 addMarker(map, layer1, icon1, size, offset, lon1, lat1, boxTextHtml1);

Im übergeordneten Ordner "html" kann nun die Datei "osm.htm" im Browser angezeigt werden.

Eventuelle Fehler können z.B. in Mozilla Firefox über Extras / Fehlerkonsole gesucht werden.

Umlaute und Sonderzeichen in den Texten von nameLayerXY und boxTextHtmlXY müssen entsprechend der HTML-Zeichenreferenz http://de.selfhtml.org/html/referenz/zeichen.htm kodiert werden; z.B.:

"ä" -> "ä"