OpenLayers.Layer.Text - Fenstergröße

r_a_mueller · November 23, 2012, 4:31pm

Hallo,
Ich möchte Popup-Marker erstellen mit OpenLayers.Layer.Text. Leider komme ich mit manchem nicht so richtig weiter:

Wie kann ich die Größe des Textfensters, das “aufpoppt”, bestimmen? In manchen Fenstern steht nur ein Wort, in anderen längerer Text. Schön wäre z.B. eine Automatik, die das Fenster anhand der Textmenge bestimmt oder eine manuell einstellbare Fenstergröße.
Ich möchte ggf. kleine Thumbnails einfügen. Bei Klick auf diese soll ein größeres Bildfenster erscheinen, am liebsten per Lightbox. Ich hatte diesen Ansatz: In der Textdatei füge ich ein (Spalte description):

texttexttext<a href="./bilder/P1020842.JPG" rel="lightbox[guenne]" title="Zwiesel">
<img src="./bilder/P1020842.JPG" width="100" height="75" alt="" /></a>

Leider erscheint kein Thumbnail, geschweige denn ein klickbares (die für Lightbox nötigen JS-Dateien sind natürlich geladen). Muss ich evtl. etwas maskieren?
3. Kann ich die Schriftgrößen in den Popup-Boxen bestimmen? (Natürlich kann ich den jeweiligen Text in einschließen, ich habe aber an eine globalere Lösung gedacht.

Ich habe die Datei tom.js aus http://wiki.openstreetmap.org/wiki/Die_HTML_Dateien eingebunden.

Danke für Eure Hilfe!
Richard

Joachim_Moskalewski · November 23, 2012, 8:27pm

Ich nehme an die Beispiele unter http://www.openlayers.org/dev/examples/ hast Du bereits gefunden?

Verschiedene Größen eines Openlayer Popups erreichst Du z.B. via CSS-Angaben. Jedoch weisst Du bei Schrift niemals die benötigte Größe - je nach Glättung und Desktop und Webbrowser laufen Schriften unterschiedlich weit. Evtl. kannst Du eine stets zu kleine Angabe setzen, und im CSS “overvlow:visible;” setzen. Das Popup von Openlayers passt sich dem Inhalt so an (Bsp. bei meinem Einsatz der Kartensuche auf http://www.gpxtour.com/ - z.B. Europa → Deutschland → BW → Schönbuch, anklickbare Fähnchen erscheinen - deren Größe ist einzig durch den im Popup angezeigten HTML-Code bestimmt).
Vergiss Lightbox, Openlayers hat die gewünschte Funktionalität nativ an Bord. Bei den Beispielen sind viele hiervon dabei. Z.B. http://www.openlayers.org/dev/examples/dynamic-text-layer.html
Ja. Du zeigst im Popup-Overlay komplette HTML Schnipsel an, und so kannst Du Deine HTML Tags und/ oder CSS hierfür wie gewohnt verwenden.

Der Einatz von Openlayers kann allerdings recht komplex und zeitaufwändig werden…

r_a_mueller · November 24, 2012, 1:07pm

Danke!
Das mit dem HTML-Code in Textfile klappt, aber das war auch noch die leichteste Übung.
Was die Größe der Popup-Fenster angeht, stehe ich trotz der genannten Beispiele immer noch auf dem Schlauch: Ich habe mir Deine css-Datei angesehen (style.css), dort aber in Bezug zu Popups nur Angaben zu Rändern etc. gefunden (decoration). Habe ich etwas übersehen? Auch wie ich Schriftgrößen u.ä. bestimme, hat sich mir leider nicht erschlossen, da mir nicht klar geworden ist, wie das Element heißt, auf das sich Font-Angaben etc. beziehen.
Welche Lightbox-Alternativen bringt OpenLayers von Hause aus mit und wie komme ich an diese ran? Manchmal bin ich im Zusammenhang mit Openlayers über Slimbox gestolpert, aber das ist ja auch eher ein AddOn statt nativ.

Tschöh, Richard

Joachim_Moskalewski · November 25, 2012, 9:07am

Zur Größe des Popups in meinem Beispiel: Ich verwende im Popup ein iframe, und dieses erhält die Größenangaben als Attribute (width=“XY” und height=“XY”) im HTML-Tag (m.W. sieht ein iframe hier diese beiden Angaben zwingend vor, so dass ich diese nicht nochmals via Stylesheet angebe). Du findest den iframe Aufruf in der Javascript-Datei http://www.gpxtour.com/web/jsf/common.js; Die Größenangabe könnte man natürlich auch dynamisch übergeben, ebenso wie ich teile der URL dynamisch übergebe (“feature.attributes.url”).

Lightbox macht nix anderes als ein Overlay über Deine Webseite zu legen, und in diesem wiederum HTML anzuzeigen. Genau das machen die Popups von Openlayer auch. Die Fähnchen inklusive Overlay trägt dieser Teil aus common.js ein:

var oPin = new OpenLayers.Layer.Vector("mypins",{
	eventListeners:{
		'featureselected':function(evt){
			var feature = evt.feature;
			var popup = new OpenLayers.Popup.FramedCloud("popup",
				OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
				null,
				"<iframe src=\"strack_info.html?tour=" + feature.attributes.url + "\" width=\"220\" height=\"95\" name=\"" + feature.attributes.url + "\"><img src=\"web/img/loading.gif\" width=\"31\" height=\"31\" alt=\"loading\" style=\"margin:27px 0px 0px 95px;\" /></iframe>",
				null,
				false
			);
			feature.popup = popup;
			map.addPopup(popup);
		},
		'featureunselected':function(evt){
			var feature = evt.feature;
			map.removePopup(feature.popup);
			feature.popup.destroy();
			feature.popup = null;
		}
	}
});
for (var sTrack in sResult.split("::")) { oPin.addFeatures(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(sResult.split("::")[sTrack].split(":")[1], sResult.split("::")[sTrack].split(":")[2]).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), {url:sResult.split("::")[sTrack].split(":")[0]}, {externalGraphic:sBasePath+"web/img/flag.png", graphicHeight:24, graphicWidth:18, graphicYOffset:-22, graphicXOffset:-2, rotation:0, fillOpacity:1})); }
var selector = new OpenLayers.Control.SelectFeature(oPin, {onclick:true, autoActivate:true});
var PinLayer = new OpenLayers.Layer.Vector();
map.addLayers([PinLayer, oPin]);
map.addControl(selector);

Ich zerlege hierbei mit sResult.split(“::”) bzw. sResult.split(“:”) einfach einen String mit Angaben zur Position und der URL zu mehreren Fähnchen - so kann ich aus einem einzigen String beliebig viele Fähnchen mit beliebig vielen Informationen setzen. Vereinfacht das einfügen eines Fähnchens wäre statt der for-Schleife:

oPin.addFeatures(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(LON, LAT), WEITERE_PARAMETER, GRAPHIK));