Erste Annäherung: Marker setzen
Schon an anderer Stelle habe ich Beiträge zur Benutzung der OpenLayers-API veröffentlicht (Geodaten mit OL, Optimierung mit OL). Im letzten Beitrag ging es darum, GPX-Tracks programmtechnisch optimiert darzustellen. Die Darstellung von Markierungen in OL verlangt auch nach einer aufwändigen Programmierung, die man sich durch eine entsprechende Bibliothek vereinfachen kann. Außerdem wollte ich die Einbindung von Icons für die Markierung vereinfachen, zumal ich über eine große Kollektion von Icons verfüge. Hier kann ich übrigens nur die mapicons collection empfehlen: Das Projekt wird von etlichen netten Menschen betrieben, die der Welt sprechende, unaufdringliche Icons für Websites zur Verfügung stellen möchten.
Zugriff auf Marker vereinfachen
Will man in JavaScript Bilddateien – wie sie z.B. für Marker-Icons notwendig sind – in den Code einbinden, sollte man besser die URL der Datei als nur den Dateinamen samt Pfadangabe auf dem lokalen Rechner eingeben: Aus diesem Grund habe ich mir eine JavaScript-Datei geschaffen, in der sämtliche Icons mittels einer Zahl aus der gesamten Kollektion aller Bildchen ausgewählt werden können. Beispielaufruf für einen darzustellenden Marker:
layer_markers.addMarker(new erstelle_Marker(14.80577,50.90421,dasBild[786],'24','32','0','1'));
Hinter diesem Code versteckt sich ein Array, in dem alle Verweise auf die entsprechenden Bilddateien deklariert sind:
// Icons für die Kartendarstellung
var dasBild = new Array(
"https://storage.mareitec.de/~husch/karten/icons/buchstaben/letter_a.png",
"https://storage.mareitec.de/~husch/karten/icons/buchstaben/letter_b.png",
"https://storage.mareitec.de/~husch/karten/icons/buchstaben/letter_c.png",
"https://storage.mareitec.de/~husch/karten/icons/buchstaben/letter_d.png",
"https://storage.mareitec.de/~husch/karten/icons/buchstaben/letter_e.png",
...
"https://storage.mareitec.de/~husch/karten/icons/zahlen/number_9.png");
Voraussetzung für die Darstellung der Markers ist, dass man einen Layer auf der OSM-Karte für die Marker erzeugt hat. Erst, wenn man das getan hat, kann man jeden Marker zu diesem Layer hinzufügen. Das klingt kompliziert, ist aber logisch, wenn man über die Architektur von OL nachdenkt.
Marker setzen
Meine Idee besteht darin, das Setzen von Markern auf einen einfachen JavaScript-Code zu reduzieren:
// Marker hinzufügen
//50.90421, 14.80577
layer_markers.addMarker(new erstelle_Marker(14.80577,50.90421,dasBild[786],'24','32','0','1'));
Voraussetzung dafür ist, dass man einen entsprechenden Layer für die Markers erzeugt hat.
layer_markers = new OpenLayers.Layer.Markers("Marker", { projection: new OpenLayers.Projection("EPSG:4326"),visibility: true, displayInLayerSwitcher: false });
map.addLayer(layer_markers);
layer_markers wird dem komplexen Grundobjekt map hinzugefügt.